Block editor: iframe: use block settings to pass assets (#37193)

lib/client-assets.php

@@ -710,7 +710,7 @@ 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() {
+function gutenberg_resolve_assets() {
 	global $pagenow;
 
 	$script_handles = array();
@@ -765,16 +765,17 @@ function gutenberg_extend_block_editor_styles_html() {
 
 	$scripts = ob_get_clean();
 
-	$editor_assets = wp_json_encode(
-		array(
-			'styles'  => $styles,
-			'scripts' => $scripts,
-		)
+	return array(
+		'styles'  => $styles,
+		'scripts' => $scripts,
 	);
-
-	echo "<script>window.__editorAssets = $editor_assets</script>";
 }
-add_action( 'admin_footer-appearance_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' );
-add_action( 'admin_footer-widgets.php', 'gutenberg_extend_block_editor_styles_html' );
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		// In the future we can allow WP Dependency handles to be passed.
+		$settings['__unstableResolvedAssets'] = gutenberg_resolve_assets();
+		return $settings;
+	}
+);

packages/block-editor/src/components/block-preview/auto.js

@@ -25,8 +25,12 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 		contentResizeListener,
 		{ height: contentHeight },
 	] = useResizeObserver();
-	const styles = useSelect( ( select ) => {
-		return select( store ).getSettings().styles;
+	const { styles, assets } = useSelect( ( select ) => {
+		const settings = select( store ).getSettings();
+		return {
+			styles: settings.styles,
+			assets: settings.__unstableResolvedAssets,
+		};
 	}, [] );
 
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
@@ -46,6 +50,7 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) {
 			>
 				<Iframe
 					head={ <EditorStyles styles={ styles } /> }
+					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {
 							ownerDocument: { documentElement },

packages/block-editor/src/components/iframe/index.js

@@ -164,12 +164,15 @@ async function loadScript( head, { id, src } ) {
 	} );
 }
 
-function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
+function Iframe(
+	{ contentRef, children, head, tabIndex = 0, assets, ...props },
+	ref
+) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
-	const styles = useParsedAssets( window.__editorAssets?.styles );
-	const scripts = useParsedAssets( window.__editorAssets?.scripts );
+	const styles = useParsedAssets( assets?.styles );
+	const scripts = useParsedAssets( assets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 	const setRef = useRefEffect( ( node ) => {

packages/block-editor/src/store/defaults.js

@@ -234,4 +234,6 @@ export const SETTINGS_DEFAULTS = {
 			slug: 'midnight',
 		},
 	],
+
+	__unstableResolvedAssets: { styles: [], scripts: [] },
 };

packages/edit-post/src/components/visual-editor/index.js

@@ -42,7 +42,14 @@ import { __ } from '@wordpress/i18n';
 import BlockInspectorButton from './block-inspector-button';
 import { store as editPostStore } from '../../store';
 
-function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
+function MaybeIframe( {
+	children,
+	contentRef,
+	shouldIframe,
+	styles,
+	assets,
+	style,
+} ) {
 	const ref = useMouseMoveTypingReset();
 
 	if ( ! shouldIframe ) {
@@ -64,6 +71,7 @@ function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
 	return (
 		<Iframe
 			head={ <EditorStyles styles={ styles } /> }
+			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }
 			style={ { width: '100%', height: '100%', display: 'block' } }
@@ -106,9 +114,12 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const themeSupportsLayout = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().supportsLayout;
+	const { themeSupportsLayout, assets } = useSelect( ( select ) => {
+		const _settings = select( blockEditorStore ).getSettings();
+		return {
+			themeSupportsLayout: _settings.supportsLayout,
+			assets: _settings.__unstableResolvedAssets,
+		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { setIsEditingTemplate } = useDispatch( editPostStore );
@@ -216,6 +227,7 @@ export default function VisualEditor( { styles } ) {
 						}
 						contentRef={ contentRef }
 						styles={ styles }
+						assets={ assets }
 						style={ { paddingBottom } }
 					>
 						{ themeSupportsLayout && ! isTemplateMode && (

packages/edit-site/src/components/block-editor/resizable-editor.js

@@ -137,6 +137,7 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 						}</style>
 					</>
 				}
+				assets={ settings.__unstableResolvedAssets }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -127,6 +127,7 @@ function useBlockEditorSettings( settings, hasTemplate ) {
 				'titlePlaceholder',
 				'supportsLayout',
 				'widgetTypesToHideFromLegacyWidgetBlock',
+				'__unstableResolvedAssets',
 			] ),
 			mediaUpload: hasUploadPermissions ? mediaUpload : undefined,
 			__experimentalReusableBlocks: reusableBlocks,