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 }