Load scripts in order

WordPress · May 18, 2021 · 6eed179 · 6eed179
1 parent da0c057
commit 6eed179
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git 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 "<script>window.__editorStyles = $editor_styles</script>";
+	echo "<script>window.__editorAssets = $editor_styles</script>";
 }
 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
@@ -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 = (
 		<>
 			<style>{ 'body{margin:0}' }</style>
-			{ assets.map( ( { tagName, src, href, id, rel, media }, index ) => {
+			{ styles.map( ( { tagName, href, id, rel, media }, index ) => {
 				const TagName = tagName.toLowerCase();
 				return (
-					<TagName
-						{ ...{ src, href, id, rel, media } }
-						key={ index }
-					/>
+					<TagName { ...{ href, id, rel, media } } key={ index } />
 				);
 			} ) }
 			{ head }