| @@ -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; |
