← All changes | src/Agent/hooks/useSiteVibesOverride.js +6 -1 3.1.1 → trunk View file →

		@@ -1,4 +1,6 @@
	1	+import { useSiteVibesVariations } from '@agent/hooks/useSiteVibesVariations';
	2	+import { refreshBlockHighlight } from '@agent/lib/block-highlight';
1	3	import { isInEditor } from '@agent/lib/util';
2	4	import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
3	5
4	6	const styleId = 'block-style-variation-styles-inline-css';
		@@ -12,12 +14,14 @@
12	14
13	15	// update the CSS so that it won't affect the switcher preview area
14	16	const transformVibeCSS = (css, slug) => css.replaceAll(slug, 'natural-1');
15	17
16		-export const useSiteVibesOverride = ({ css, slug }) => {
	18	+export const useSiteVibesOverride = ({ css: vibeCss, slug }) => {
17	19	const blockStyles = useRef(null);
18	20	const [theDocument, setDocument] = useState(null);
19	21	const onEditor = isInEditor();
	22	+ const { data } = useSiteVibesVariations();
	23	+ const css = vibeCss ? `${data?.resets?.[slug] ?? ''}${vibeCss}` : vibeCss;
20	24
21	25	useEffect(() => {
22	26	if (!css || onEditor || !slug) return;
23	27	const style = document.getElementById(styleId);
		@@ -25,8 +29,9 @@
25	29	if (!blockStyles.current) {
26	30	blockStyles.current = style.innerHTML;
27	31	}
28	32	style.innerHTML = transformVibeCSS(css, slug);
	33	+ refreshBlockHighlight();
29	34	}, [css, slug, onEditor]);
30	35
31	36	useEffect(() => {
32	37	if (!css || !theDocument || !onEditor) return;