← All changes | src/DonationForms/Blocks/DonationFormBlock/Controllers/BlockRenderController.php +32 -3 4.16.1 → 4.17.0 View file →

		@@ -2,9 +2,12 @@
2	2
3	3	namespace Give\DonationForms\Blocks\DonationFormBlock\Controllers;
4	4
5	5	use Give\DonationForms\Actions\GenerateDonationConfirmationReceiptViewRouteUrl;
	6	+use Give\DonationForms\Actions\GenerateDonationFormPageUrl;
6	7	use Give\DonationForms\Actions\GenerateDonationFormViewRouteUrl;
	8	+use Give\DonationForms\Actions\GetFormSkeletonData;
	9	+use Give\DonationForms\Actions\RenderFormSkeleton;
7	10	use Give\DonationForms\Blocks\DonationFormBlock\DataTransferObjects\BlockAttributes;
8	11	use Give\DonationForms\DataTransferObjects\DonationConfirmationReceiptViewRouteData;
9	12	use Give\DonationForms\Models\DonationForm;
10	13	use Give\Framework\EnqueueScript;
		@@ -18,8 +21,10 @@
18	21	*/
19	22	protected static int $embedInstance = 0;
20	23
21	24	/**
	25	+ * @since 4.17.0 print a server-rendered skeleton of the form inside the root so it paints before any script runs.
	26	+ * @since 4.17.0 Build the form page URL through GenerateDonationFormPageUrl, shared with the external embed.
22	27	* @since 4.14.5 add escaping to the output.
23	28	* @since 4.7.0 detach check for gutenberg editor to make this more reusable
24	29	* @since 4.1.0 updated with embed ID instance fallback when block ID is not set.
25	30	* @since 3.22.0 Add locale support
		@@ -46,11 +51,14 @@
46	51	$embedId = $blockAttributes->blockId ?? 'givewp-embed-' . static::$embedInstance;
47	52
48	53	$locale = Language::getLocale();
49	54	$viewUrl = $this->getViewUrl($donationForm, $embedId);
50		- $formUrl = add_query_arg(['p' => $blockAttributes->formId], site_url('?post_type=give_forms'));
	55	+ $formUrl = (new GenerateDonationFormPageUrl())($blockAttributes->formId);
51	56	$formViewUrl = $this->getFormViewUrl($donationForm);
52	57	$colorSettings = $donationForm->getColorSettings();
	58	+ // The app treats every format it does not know as on-page, so the skeleton follows the same rule.
	59	+ $isOnPage = !in_array($blockAttributes->formFormat, ['modal', 'reveal', 'newTab'], true);
	60	+ $skeleton = $isOnPage ? $this->renderSkeleton($donationForm) : '';
53	61
54	62	/**
55	63	* Note: iframe-resizer uses querySelectorAll so using a data attribute makes the most sense to target.
56	64	* It will also generate a dynamic ID - so when we have multiple embeds on a page there will be no conflict.
		@@ -55,9 +63,9 @@
55	63	* Note: iframe-resizer uses querySelectorAll so using a data attribute makes the most sense to target.
56	64	* It will also generate a dynamic ID - so when we have multiple embeds on a page there will be no conflict.
57	65	*/
58	66	return sprintf(
59		- "<div class='root-data-givewp-embed' data-form-locale='%s' data-form-url='%s' data-form-view-url='%s' data-src='%s' data-givewp-embed-id='%s' data-form-format='%s' data-open-form-button='%s' style='--givewp-primary-color: %s; --givewp-secondary-color: %s;'></div>",
	67	+ "<div class='root-data-givewp-embed' data-form-locale='%s' data-form-url='%s' data-form-view-url='%s' data-src='%s' data-givewp-embed-id='%s' data-form-format='%s' data-open-form-button='%s' style='--givewp-primary-color: %s; --givewp-secondary-color: %s;'>%s</div>",
60	68	esc_attr($locale),
61	69	esc_attr($formUrl),
62	70	esc_attr($formViewUrl),
63	71	esc_attr($viewUrl),
		@@ -64,10 +72,31 @@
64	72	esc_attr($embedId),
65	73	esc_attr($blockAttributes->formFormat),
66	74	esc_attr($blockAttributes->openFormButton),
67	75	esc_attr($colorSettings['primaryColor']),
68		- esc_attr($colorSettings['secondaryColor'])
	76	+ esc_attr($colorSettings['secondaryColor']),
	77	+ $skeleton
69	78	);
	79	+ }
	80	+
	81	+ /**
	82	+ * The skeleton and its styles go inside the root so they paint as the page parses, before the
	83	+ * block's script or footer stylesheet arrives. The embed app reads them back out of the root
	84	+ * and keeps showing them until the form's handshake. An empty string means the design is one
	85	+ * the skeleton cannot sketch, and the app shows a spinner.
	86	+ *
	87	+ * @since 4.17.0
	88	+ */
	89	+ private function renderSkeleton(DonationForm $donationForm): string
	90	+ {
	91	+ $renderer = new RenderFormSkeleton();
	92	+ $markup = $renderer((new GetFormSkeletonData())($donationForm));
	93	+
	94	+ if (!$markup) {
	95	+ return '';
	96	+ }
	97	+
	98	+ return '<style class="givewp-embed-skeleton-styles">' . $renderer->css() . '</style>' . $markup;
70	99	}
71	100
72	101	/**
73	102	* Return early if we're still inside the editor to avoid server side effects