import { useSiteVibesOverride } from '@agent/hooks/useSiteVibesOverride'; import { useSiteVibesVariations } from '@agent/hooks/useSiteVibesVariations'; import { useVariationOverride } from '@agent/hooks/useVariationOverride'; import apiFetch from '@wordpress/api-fetch'; import { registerCoreBlocks } from '@wordpress/block-library'; import { getBlockTypes, parse, serialize } from '@wordpress/blocks'; import { Spinner } from '@wordpress/components'; import { useDispatch } from '@wordpress/data'; import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; const undoHeroSectionChange = () => { document.querySelector('.ext-hero-section-preview')?.remove(); const heroSectionElement = document.querySelector('.ext-hero-section'); if (heroSectionElement) heroSectionElement.style.display = 'block'; }; const updateHeroSection = (content) => { document.querySelector('.ext-hero-section-preview')?.remove(); const heroSectionElement = document.querySelector('.ext-hero-section'); if (heroSectionElement) { heroSectionElement.style.display = 'none'; } const contentArea = document.querySelector('.entry-content') ?? document.querySelector('main'); if (!contentArea) return; contentArea.insertAdjacentHTML('afterbegin', content); const visibleHeroSection = [ ...document.querySelectorAll('.ext-hero-section'), ].find((el) => el.style.display !== 'none'); visibleHeroSection?.classList.add('ext-hero-section-preview'); }; const { context } = window.extAgentData; const isAdmin = context?.adminPage; const VIEWPORT_WIDTH = 1400; const PREVIEW_HEIGHT = 200; const DesignOption = ({ renderedHtml, styles, isSelected, onClick }) => { const containerRef = useRef(null); const [scale, setScale] = useState(1); const [previewHeight, setPreviewHeight] = useState(PREVIEW_HEIGHT); useLayoutEffect(() => { const el = containerRef.current; if (!el) return; setScale(el.offsetWidth / VIEWPORT_WIDTH); const obs = new ResizeObserver(([entry]) => { setScale(entry.contentRect.width / VIEWPORT_WIDTH); }); obs.observe(el); return () => obs.disconnect(); }, []); const srcdoc = useMemo(() => { const themeStyleHref = document.getElementById('extendable-style-css')?.getAttribute('href') ?? ''; const wpFontsLocal = document.querySelector('style.wp-fonts-local')?.innerHTML ?? ''; const wpBlockLibraryInline = document.getElementById('wp-block-library-inline-css')?.innerHTML ?? ''; const linkTags = (styles.linkStyles ?? []) .map((url) => ``) .join('\n'); return ` ${themeStyleHref ? `` : ''} ${linkTags} ${wpFontsLocal ? `` : ''} ${wpBlockLibraryInline ? `` : ''} ${lowerImageQuality(renderedHtml)} `; }, [ renderedHtml, styles.linkStyles, styles.colorAndFontsVariations, styles.vibes, styles.blockSupportsCss, ]); const handleIframeLoad = (e) => { const contentHeight = e.target.contentDocument?.body?.scrollHeight; if (contentHeight && scale) { setPreviewHeight( Math.min(Math.round(contentHeight * scale), PREVIEW_HEIGHT), ); } }; return (