Iframed editor: support scripts

WordPress · May 17, 2021 · c8fdbfe · c8fdbfe
1 parent 80e562c
commit c8fdbfe
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -708,7 +708,8 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings )
  * Sets the editor styles to be consumed by JS.
  */
 function gutenberg_extend_block_editor_styles_html() {
-	$handles = array(
+	$script_handles = array();
+	$handles        = array(
 		'wp-block-editor',
 		'wp-block-library',
 		'wp-edit-blocks',
@@ -724,6 +725,10 @@ function gutenberg_extend_block_editor_styles_html() {
 		if ( ! empty( $block_type->editor_style ) ) {
 			$handles[] = $block_type->editor_style;
 		}
+
+		if ( ! empty( $block_type->script ) ) {
+			$script_handles[] = $block_type->script;
+		}
 	}
 
 	$handles = array_unique( $handles );
@@ -735,6 +740,13 @@ function gutenberg_extend_block_editor_styles_html() {
 	wp_styles()->do_items( $handles );
 	wp_styles()->done = $done;
 
+	$script_handles = array_unique( $script_handles );
+	$done           = wp_scripts()->done;
+
+	wp_scripts()->done = array();
+	wp_scripts()->do_items( $script_handles );
+	wp_scripts()->done = $done;
+
 	$editor_styles = wp_json_encode( array( 'html' => ob_get_clean() ) );
 
 	echo "<script>window.__editorStyles = $editor_styles</script>";

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -6,6 +6,8 @@ import {
 	createPortal,
 	useCallback,
 	forwardRef,
+	useLayoutEffect,
+	useMemo,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
@@ -121,19 +123,7 @@ function setBodyClassName( doc ) {
 	}
 }
 
-/**
- * Sets the document head and default styles.
- *
- * @param {Document} doc  Document to set the head for.
- * @param {string}   head HTML to set as the head.
- */
-function setHead( doc, head ) {
-	doc.head.innerHTML =
-		// Body margin must be overridable by themes.
-		'<style>body{margin:0}</style>' + head;
-}
-
-function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
+function Iframe( { contentRef, children, head, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
 	const setRef = useCallback( ( node ) => {
@@ -155,9 +145,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 				contentRef.current = body;
 			}
 
-			setHead( contentDocument, headHTML );
 			setBodyClassName( contentDocument );
-			styleSheetsCompat( contentDocument );
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
 			setIframeDocument( contentDocument );
@@ -175,6 +163,34 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 		} );
 	}, [] );
 
+	useLayoutEffect( () => {
+		if ( iframeDocument ) {
+			styleSheetsCompat( iframeDocument );
+		}
+	}, [ 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: TagName, src, href, id, rel, media }, index ) => (
+					<TagName
+						{ ...{ src, href, id, rel, media } }
+						key={ index }
+					/>
+				)
+			) }
+			{ head }
+		</>
+	);
+
 	return (
 		<iframe
 			{ ...props }

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -70,7 +70,6 @@ function MaybeIframe( {
 
 	return (
 		<Iframe
-			headHTML={ window.__editorStyles.html }
 			head={ <EditorStyles styles={ styles } /> }
 			ref={ ref }
 			contentRef={ contentRef }

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -92,7 +92,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<BlockTools __unstableContentRef={ contentRef }>
 					<Iframe
 						style={ resizedCanvasStyles }
-						headHTML={ window.__editorStyles.html }
 						head={ <EditorStyles styles={ settings.styles } /> }
 						ref={ ref }
 						contentRef={ mergedRefs }