import { usePreviewIframe } from '@library/hooks/usePreviewIframe'; import { BlockPreview } from '@wordpress/block-editor'; import { rawHandler } from '@wordpress/blocks'; import { useEffect, useMemo, useRef, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import classNames from 'classnames'; export const BlockPreviewButton = ({ insertPattern, code }) => { const [ready, setReady] = useState(false); const blockRef = useRef(); const blocks = useMemo( () => rawHandler({ HTML: lowerImageQuality(code) }), [code], ); const { ready: show } = usePreviewIframe({ container: blockRef.current, ready, onIFrameLoaded: () => undefined, loadDelay: 50, }); useEffect(() => setReady(true), []); return ( insertPattern(blocks)} > ); }; const lowerImageQuality = (html) => { return html.replace( /(https?:\/\/\S+\?w=\d+)/gi, '$1&q=10&auto=format,compress&fm=avif', ); };