← All changes | src/Agent/workflows/theme/components/change-site-design/DesignOption.jsx +24 -15 3.0.4 → 3.2.2 View file →

		@@ -1,16 +1,13 @@
1	1	import { useIframeScale } from '@agent/hooks/useIframeScale';
2	2	import { removeAnimationClasses } from '@agent/workflows/theme/components/change-site-design/utils/removeAnimationClasses';
3		-import { useMemo, useRef } from '@wordpress/element';
	3	+import { useMemo } from '@wordpress/element';
4	4	import { __ } from '@wordpress/i18n';
5	5	import classnames from 'classnames';
6	6	import { colord } from 'colord';
7	7
8		-const VIEWPORT_WIDTH = Math.max(window.innerWidth, 1400);
9		-const VIEWPORT_HEIGHT =
10		- (document.querySelector('header')?.offsetHeight ?? 0) +
11		- (document.querySelector('.ext-hero-section')?.offsetHeight ?? 0) ||
12		- window.innerHeight;
	8	+const PREVIEW_VIEWPORT_WIDTH = 1440;
	9	+const PREVIEW_VIEWPORT_HEIGHT = 1024;
13	10
14	11	const lowerImageQuality = (html) =>
15	12	html.replace(
16	13	/(https?:\/\/\S+\?w=\d+)/gi,
		@@ -59,14 +56,20 @@
59	56	el.remove();
60	57	});
61	58
62	59	clone.querySelector('#block-style-variation-styles-inline-css')?.remove();
	60	+ clone.querySelector('#extendify-palette-preview-css')?.remove();
63	61	clone.querySelector('#admin-bar-inline-css')?.remove();
	62	+ clone.querySelector('#admin-bar-css')?.remove();
	63	+ clone.querySelector('#extendify-toolbar-reset')?.remove();
	64	+ body.classList.remove('admin-bar');
64	65
65	66	// Inject variation styles
66	67	const styleEl = head.appendChild(document.createElement('style'));
67	68	styleEl.textContent = [
68	69	styles?.colorAndFontsVariations ?? '',
	70	+ // Ties the option on specificity, so it only wins by coming after it.
	71	+ styles?.paletteCss ?? '',
69	72	styles?.vibes ?? '',
70	73	styles?.blockSupportsCss ?? '',
71	74	].join('\n');
72	75
		@@ -84,11 +87,15 @@
84	87
85	88	const duotoneSvgNodes = getDuotoneSvgNodes(styles?.duotoneTheme);
86	89
87	90	// Set body to header + hero section, then append duotone SVGs
88		- const headerHtml =
89		- removeAnimationClasses(document.querySelector('header'))?.outerHTML ?? '';
90		- body.innerHTML = `${headerHtml}${lowerImageQuality(renderedHtml)}`;
	91	+ body.removeAttribute('style');
	92	+
	93	+ const headerNode = removeAnimationClasses(document.querySelector('header'));
	94	+ headerNode?.classList.remove('is-past-hero', 'is-scrolled');
	95	+ headerNode?.removeAttribute('style');
	96	+ const headerHtml = headerNode?.outerHTML ?? '';
	97	+ body.innerHTML = `${headerHtml}<div class="entry-content">${lowerImageQuality(renderedHtml)}</div>`;
91	98	duotoneSvgNodes.forEach((node) => {
92	99	body.appendChild(node);
93	100	});
94	101
		@@ -95,11 +102,10 @@
95	102	return `<!DOCTYPE html>${clone.outerHTML}`;
96	103	};
97	104
98	105	export const DesignOption = ({ renderedHtml, styles, isSelected, onClick }) => {
99		- const iframeRef = useRef(null);
100	106	const { containerRef, scale, contentHeight, handleIframeLoad } =
101		- useIframeScale();
	107	+ useIframeScale({ viewportWidth: PREVIEW_VIEWPORT_WIDTH });
102	108
103	109	const srcdoc = useMemo(
104	110	() => generatePreviewHtml(renderedHtml, styles),
105	111	[
		@@ -105,8 +111,9 @@
105	111	[
106	112	renderedHtml,
107	113	styles?.linkStyles,
108	114	styles?.colorAndFontsVariations,
	115	+ styles?.paletteCss,
109	116	styles?.duotoneTheme,
110	117	styles?.vibes,
111	118	styles?.blockSupportsCss,
112	119	],
		@@ -116,9 +123,9 @@
116	123	<button
117	124	ref={containerRef}
118	125	type="button"
119	126	style={{
120		- height: `${(contentHeight ?? VIEWPORT_HEIGHT) * scale}px`,
	127	+ height: `${(contentHeight ?? PREVIEW_VIEWPORT_HEIGHT) * scale}px`,
121	128	}}
122	129	className={classnames(
123	130	'relative w-full cursor-pointer overflow-hidden rounded-md border shadow-md',
124	131	{
		@@ -131,21 +138,23 @@
131	138	>
132	139	<div
133	140	className="overflow-hidden"
134	141	style={{
135		- width: VIEWPORT_WIDTH,
	142	+ width: PREVIEW_VIEWPORT_WIDTH,
136	143	transform: `scale(${scale})`,
137	144	transformOrigin: 'top left',
138	145	}}
139	146	>
140	147	<iframe
141		- ref={iframeRef}
142	148	title={__('Preview site design', 'extendify-local')}
143	149	onLoad={handleIframeLoad}
144	150	srcDoc={srcdoc}
145	151	style={{
146	152	width: '100%',
147		- height: Math.max(contentHeight ?? VIEWPORT_HEIGHT, VIEWPORT_HEIGHT),
	153	+ height: Math.max(
	154	+ contentHeight ?? PREVIEW_VIEWPORT_HEIGHT,
	155	+ PREVIEW_VIEWPORT_HEIGHT,
	156	+ ),
148	157	border: 0,
149	158	pointerEvents: 'none',
150	159	display: 'block',
151	160	overflow: 'hidden',