import { useIframeScale } from '@agent/hooks/useIframeScale'; import { removeAnimationClasses } from '@agent/workflows/theme/components/change-site-design/utils/removeAnimationClasses'; import { useMemo, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import classnames from 'classnames'; import { colord } from 'colord'; const VIEWPORT_WIDTH = Math.max(window.innerWidth, 1400); const VIEWPORT_HEIGHT = (document.querySelector('header')?.offsetHeight ?? 0) + (document.querySelector('.ext-hero-section')?.offsetHeight ?? 0) || window.innerHeight; const lowerImageQuality = (html) => html.replace( /(https?:\/\/\S+\?w=\d+)/gi, '$1&q=10&auto=format,compress&fm=avif', ); // Clone duotone SVG filters from the page and adjust colors for this variation const getDuotoneSvgNodes = (duotoneTheme) => { const duotoneMap = new Map( (duotoneTheme ?? []).map((item) => [item.slug, item]), ); return [ ...document.querySelectorAll('svg:has(filter[id^="wp-duotone"])'), ].map((svg) => { const cloned = svg.cloneNode(true); cloned.querySelectorAll('filter[id^="wp-duotone"]').forEach((filter) => { const preset = duotoneMap.get(filter.id.replace('wp-duotone-', '')); if (!preset?.colors || preset.colors.length !== 2) return; const [dark, light] = preset.colors.map((hex) => { const { r, g, b } = colord(hex).toRgb(); return { r: r / 255, g: g / 255, b: b / 255 }; }); ['feFuncR', 'feFuncG', 'feFuncB'].forEach((func, i) => { const ch = ['r', 'g', 'b'][i]; filter .querySelector(func) ?.setAttribute('tableValues', `${dark[ch]} ${light[ch]}`); }); }); return cloned; }); }; const generatePreviewHtml = (renderedHtml, styles) => { const clone = document.documentElement.cloneNode(true); const head = clone.querySelector('head'); const body = clone.querySelector('body'); // Strip all scripts clone.querySelectorAll('script').forEach((el) => { el.remove(); }); clone.querySelector('#block-style-variation-styles-inline-css')?.remove(); clone.querySelector('#admin-bar-inline-css')?.remove(); // Inject variation styles const styleEl = head.appendChild(document.createElement('style')); styleEl.textContent = [ styles?.colorAndFontsVariations ?? '', styles?.vibes ?? '', styles?.blockSupportsCss ?? '', ].join('\n'); // Inject link styles (styles?.linkStyles ?? []).forEach((href) => { if (clone.querySelector(`link[href="${href}"]`)) return; const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; head.appendChild(link); }); const duotoneSvgNodes = getDuotoneSvgNodes(styles?.duotoneTheme); // Set body to header + hero section, then append duotone SVGs const headerHtml = removeAnimationClasses(document.querySelector('header'))?.outerHTML ?? ''; body.innerHTML = `${headerHtml}${lowerImageQuality(renderedHtml)}`; duotoneSvgNodes.forEach((node) => { body.appendChild(node); }); return `${clone.outerHTML}`; }; export const DesignOption = ({ renderedHtml, styles, isSelected, onClick }) => { const iframeRef = useRef(null); const { containerRef, scale, contentHeight, handleIframeLoad } = useIframeScale(); const srcdoc = useMemo( () => generatePreviewHtml(renderedHtml, styles), [ renderedHtml, styles?.linkStyles, styles?.colorAndFontsVariations, styles?.duotoneTheme, styles?.vibes, styles?.blockSupportsCss, ], ); return (