← All changes | src/Agent/workflows/theme/components/change-site-design/SelectSiteDesign.jsx +48 -20 3.1.6 → trunk View file →

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