← All changes | src/Agent/workflows/theme/components/change-site-design/SelectSiteDesign.jsx +51 -26 3.1.6 → 3.2.2 View file →

		@@ -1,19 +1,22 @@
	1	+import { usePaletteOverride } from '@agent/hooks/usePaletteOverride';
	2	+import { usePalettes } from '@agent/hooks/usePalettes';
1	3	import { useSiteVibesOverride } from '@agent/hooks/useSiteVibesOverride';
2	4	import { useSiteVibesVariations } from '@agent/hooks/useSiteVibesVariations';
3	5	import { useVariationOverride } from '@agent/hooks/useVariationOverride';
4	6	import { refreshBlockHighlight } from '@agent/lib/block-highlight';
5	7	import { DesignOption } from '@agent/workflows/theme/components/change-site-design/DesignOption';
	8	+import { fontsOnlyVariation } from '@agent/workflows/theme/components/change-site-design/utils/fontsOnlyVariation';
6	9	import { removeAnimationClasses } from '@agent/workflows/theme/components/change-site-design/utils/removeAnimationClasses';
7	10	import { handleSiteImages } from '@auto-launch/fetchers/get-images';
8		-import { handleSiteStrings } from '@auto-launch/fetchers/get-strings';
9	11	import { useUserSelectionStore } from '@launch/state/user-selections';
	12	+import { paletteDuotone } from '@shared/lib/palette-preview';
	13	+import { samplePalettes } from '@shared/lib/palettes';
10	14	import { safeParseJson } from '@shared/lib/parsing';
11	15	import { normalizeSiteImages } from '@shared/lib/site-images';
12	16	import apiFetch from '@wordpress/api-fetch';
13	17	import { registerCoreBlocks } from '@wordpress/block-library';
14	18	import { getBlockTypes, parse, serialize } from '@wordpress/blocks';
15		-import { Spinner } from '@wordpress/components';
16	19	import { useDispatch } from '@wordpress/data';
17	20	import { useEffect, useMemo, useRef, useState } from '@wordpress/element';
18	21	import { __ } from '@wordpress/i18n';
19	22	import classnames from 'classnames';
		@@ -96,8 +99,9 @@
96	99
97	100	const [selectedColorAndFonts, setSelectedColorAndFonts] = useState();
98	101	const [selectedHeroPattern, setSelectedHeroPattern] = useState();
99	102	const [selectedVibe, setSelectedVibe] = useState();
	103	+ const [selectedPalette, setSelectedPalette] = useState();
100	104
101	105	const { updateSettings } = useDispatch('core/block-editor');
102	106
103	107	const injectedLinksRef = useRef([]);
		@@ -124,14 +128,35 @@
124	128	});
125	129	injectedLinksRef.current = [];
126	130	};
127	131
	132	+ const {
	133	+ palettes,
	134	+ preferred,
	135	+ css: paletteCss,
	136	+ isLoading: isLoadingPalettes,
	137	+ } = usePalettes();
	138	+ const onPalettes = Boolean(palettes?.length);
	139	+ const shownPalettes = useMemo(
	140	+ () => samplePalettes(palettes, preferred),
	141	+ [palettes, preferred],
	142	+ );
	143	+ const paletteFor = (index) =>
	144	+ onPalettes ? shownPalettes[index % shownPalettes.length] : undefined;
	145	+
128	146	const { undoChange: undoColorAndFontsChange } = useVariationOverride({
129	147	css: !isAdmin && selectedColorAndFonts?.css,
130	148	duotoneTheme:
131		- !isAdmin && selectedColorAndFonts?.settings?.color?.duotone?.theme,
	149	+ !isAdmin &&
	150	+ !onPalettes &&
	151	+ selectedColorAndFonts?.settings?.color?.duotone?.theme,
132	152	});
133	153
	154	+ const { undoChange: undoPaletteChange } = usePaletteOverride({
	155	+ css: (!isAdmin && paletteCss?.[selectedPalette?.slug]) || '',
	156	+ duotoneTheme: (!isAdmin && paletteDuotone(selectedPalette)) || null,
	157	+ });
	158	+
134	159	const { undoChange: undoVibesChange } = useSiteVibesOverride({
135	160	css: !isAdmin && selectedVibe?.css,
136	161	slug: !isAdmin && selectedVibe?.slug,
137	162	});
		@@ -147,8 +172,13 @@
147	172	.filter(([slug]) => slug !== vibesData.currentVibe)
148	173	.map(([slug, css]) => ({
149	174	slug,
150	175	css: css?.replaceAll(slug, 'natural-1'),
	176	+ // Css only adds, so a cloned page keeps the applied vibe's slots.
	177	+ previewCss: `${vibesData.resets?.[slug] ?? ''}${css ?? ''}`.replaceAll(
	178	+ slug,
	179	+ 'natural-1',
	180	+ ),
151	181	}))
152	182	.sort(() => Math.random() - 0.5);
153	183
154	184	return [...vibes, ...vibes.slice(0, 3)];
		@@ -201,14 +231,8 @@
201	231	const storedSiteImages =
202	232	stored?.state?.siteImages ?? launchState?.siteImages?.siteImages ?? [];
203	233	const siteProfile = stored?.state?.siteProfile ?? launchState?.siteProfile;
204	234
205		- const storedDescription =
206		- description ??
207		- stored?.state?.heroDescription ??
208		- launchState?.siteStrings?.heroDescription ??
209		- null;
210		-
211	235	(async () => {
212	236	const siteImages = await resolveSiteImages({
213	237	storedSiteImages,
214	238	siteProfile,
		@@ -213,13 +237,8 @@
213	237	storedSiteImages,
214	238	siteProfile,
215	239	});
216	240
217		- const resolvedDescription =
218		- storedDescription || !siteProfile
219		- ? storedDescription
220		- : (await handleSiteStrings({ siteProfile })).heroDescription;
221		-
222	241	apiFetch({
223	242	path: '/extendify/v1/agent/site-design-variations',
224	243	method: 'POST',
225	244	data: {
		@@ -226,9 +245,9 @@
226	245	title,
227	246	images: domImages,
228	247	siteImages,
229	248	postId: context?.postId,
230		- description: resolvedDescription,
	249	+ description,
231	250	currentHeroPattern: heroPatternName,
232	251	source: 'change-site-design-workflow',
233	252	cta: {
234	253	label: cta?.textContent,
		@@ -272,8 +291,9 @@
272	291
273	292	const undoChanges = () => {
274	293	undoHeroSectionChange();
275	294	undoColorAndFontsChange();
	295	+ undoPaletteChange();
276	296	undoVibesChange();
277	297	removeInjectedLinks();
278	298	refreshBlockHighlight();
279	299	};
		@@ -336,9 +356,12 @@
336	356	data: {
337	357	updatedPageBlocks,
338	358	postId,
339	359	vibeSlug: selectedVibe.slug,
340		- colorAndFontsVariation: selectedColorAndFonts,
	360	+ colorAndFontsVariation: onPalettes
	361	+ ? fontsOnlyVariation(selectedColorAndFonts)
	362	+ : selectedColorAndFonts,
	363	+ colorPalette: selectedPalette?.slug,
341	364	},
342	365	shouldRefreshPage: true,
343	366	});
344	367	} catch (error) {
		@@ -347,9 +370,9 @@
347	370	setIsSaving(false);
348	371	}
349	372	};
350	373
351		- if (isLoading || isLoadingVibes) {
	374	+ if (isLoading || isLoadingVibes || isLoadingPalettes) {
352	375	return (
353	376	<div className="min-h-24 p-2 text-center text-sm">
354	377	{__('Loading design options...', 'extendify-local')}
355	378	</div>
		@@ -356,9 +379,9 @@
356	379	);
357	380	}
358	381
359	382	return (
360		- <div className="mb-4 ms-12 me-2 flex flex-col rounded-lg border border-gray-300 bg-gray-50">
	383	+ <div className="mb-4 ms-2 me-2 flex flex-col rounded-lg border border-gray-300 bg-gray-50">
361	384	<div className="rounded-lg border-b border-gray-300 bg-white">
362	385	<div className="flex flex-col gap-4 p-3">
363	386	{currentHeroHtml && (
364	387	<DesignOption
		@@ -368,8 +391,9 @@
368	391	onClick={() => {
369	392	setSelectedHeroPattern(currentDesignOption);
370	393	setSelectedColorAndFonts(null);
371	394	setSelectedVibe(null);
	395	+ setSelectedPalette(null);
372	396
373	397	undoChanges();
374	398	}}
375	399	/>
		@@ -381,11 +405,13 @@
381	405	isSelected={selectedHeroPattern?.id === heroPattern.id}
382	406	styles={{
383	407	linkStyles: heroPattern.linkStyles,
384	408	colorAndFontsVariations: colorAndFontsVariations[i].css,
385		- duotoneTheme:
386		- colorAndFontsVariations[i]?.settings?.color?.duotone?.theme,
387		- vibes: vibes[i]?.css,
	409	+ paletteCss: paletteCss?.[paletteFor(i)?.slug],
	410	+ duotoneTheme: onPalettes
	411	+ ? paletteDuotone(paletteFor(i))
	412	+ : colorAndFontsVariations[i]?.settings?.color?.duotone?.theme,
	413	+ vibes: vibes[i]?.previewCss,
388	414	blockSupportsCss: heroPattern.blockSupportsCss,
389	415	}}
390	416	onClick={() => {
391	417	setSelectedHeroPattern(heroPattern);
		@@ -390,8 +416,9 @@
390	416	onClick={() => {
391	417	setSelectedHeroPattern(heroPattern);
392	418	setSelectedColorAndFonts(colorAndFontsVariations[i]);
393	419	setSelectedVibe(vibes[i]);
	420	+ setSelectedPalette(paletteFor(i));
394	421
395	422	if (!isAdmin) {
396	423	const blockSupportsCss = heroPattern.blockSupportsCss;
397	424	if (blockSupportsCss) {
		@@ -455,13 +482,11 @@
455	482	)}
456	483	disabled={!selectedHeroPattern || isSaving}
457	484	onClick={handleConfirm}
458	485	>
459		- {isSaving ? (
460		- <Spinner className="m-0" />
461		- ) : (
462		- __('Save', 'extendify-local')
463		- )}
	486	+ {isSaving
	487	+ ? __('Saving...', 'extendify-local')
	488	+ : __('Save', 'extendify-local')}
464	489	</button>
465	490	</div>
466	491	</div>
467	492	);