diff --git a/lib/client-assets.php b/lib/client-assets.php index c3aa41f669fd04..6b767e007648cb 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -740,16 +740,27 @@ function gutenberg_extend_block_editor_styles_html() { wp_styles()->do_items( $handles ); wp_styles()->done = $done; + $styles = ob_get_clean(); + $script_handles = array_unique( $script_handles ); $done = wp_scripts()->done; + ob_start(); + wp_scripts()->done = array(); wp_scripts()->do_items( $script_handles ); wp_scripts()->done = $done; - $editor_styles = wp_json_encode( array( 'html' => ob_get_clean() ) ); + $scripts = ob_get_clean(); + + $editor_styles = wp_json_encode( + array( + 'styles' => $styles, + 'scripts' => $scripts, + ) + ); - echo ""; + echo ""; } add_action( 'admin_footer-toplevel_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' ); add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index b67d66ee7c6600..230d831c2b5e8f 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -128,9 +128,29 @@ function setBodyClassName( doc ) { } } +function useParsedAssets( html ) { + return useMemo( () => { + const doc = document.implementation.createHTMLDocument( '' ); + doc.body.innerHTML = html; + return Array.from( doc.body.children ); + }, [ html ] ); +} + +async function loadScript( doc, { id, src } ) { + return new Promise( ( resolve, reject ) => { + const script = doc.createElement( 'script' ); + script.id = id; + script.src = src; + script.onload = () => resolve(); + script.onerror = () => reject(); + doc.head.appendChild( script ); + } ); +} + function Iframe( { contentRef, children, head, ...props }, ref ) { const [ iframeDocument, setIframeDocument ] = useState(); - + const styles = useParsedAssets( window.__editorAssets.styles ); + const scripts = useParsedAssets( window.__editorAssets.scripts ); const clearerRef = useBlockSelectionClearer(); const setRef = useCallback( ( node ) => { if ( ! node ) { @@ -158,6 +178,12 @@ function Iframe( { contentRef, children, head, ...props }, ref ) { clearerRef( documentElement ); clearerRef( body ); + scripts.reduce( + ( promise, script ) => + promise.then( () => loadScript( contentDocument, script ) ), + Promise.resolve() + ); + return true; } @@ -177,23 +203,13 @@ function Iframe( { contentRef, children, head, ...props }, ref ) { } }, [ iframeDocument ] ); - const { html } = window.__editorStyles; - const assets = useMemo( () => { - const doc = document.implementation.createHTMLDocument( '' ); - doc.body.innerHTML = html; - return Array.from( doc.body.children ); - }, [ html ] ); - head = ( <> - { assets.map( ( { tagName, src, href, id, rel, media }, index ) => { + { styles.map( ( { tagName, href, id, rel, media }, index ) => { const TagName = tagName.toLowerCase(); return ( - + ); } ) } { head }