Block editor: add a way to extend style dependency handles for editor content

lib/experimental/content-styles.php

@@ -0,0 +1,39 @@
+<?php
+
+/**
+ * Resolves WP Dependency handles to HTML.
+ *
+ * @param array      $instance WP Dependency instance.
+ * @param array|null $handles  Handles to resolve.
+ *
+ * @return string HTML.
+ */
+function gutenberg_resolve_dependencies( $instance, $handles ) {
+	if ( ! $handles || count( $handles ) === 0 ) {
+		return '';
+	}
+
+	ob_start();
+
+	$done           = $instance->done;
+	$instance->done = array();
+	$instance->do_items( array_unique( $handles ) );
+	$instance->done = $done;
+
+	return ob_get_clean();
+}
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		// In the future the above assets should be passed through here as well,
+		// but some stylesheets cannot be prefixed without specificity issues,
+		// so we need to make an exception.
+		$settings['__unstableResolvedContentStyles'] = gutenberg_resolve_dependencies(
+			wp_styles(),
+			isset( $settings['__experimentalContentStyles'] ) ? $settings['__experimentalContentStyles'] : array()
+		);
+		return $settings;
+	},
+	100
+);

lib/load.php

@@ -57,6 +57,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 }
 
 require __DIR__ . '/experimental/editor-settings.php';
+require __DIR__ . '/experimental/content-styles.php';
 
 // Gutenberg plugin compat.
 require __DIR__ . '/compat/plugin/edit-site-routes-backwards-compat.php';

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

@@ -29,14 +29,17 @@ function AutoBlockPreview( {
 		useResizeObserver();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets, duotone } = useSelect( ( select ) => {
-		const settings = select( store ).getSettings();
-		return {
-			styles: settings.styles,
-			assets: settings.__unstableResolvedAssets,
-			duotone: settings.__experimentalFeatures?.color?.duotone,
-		};
-	}, [] );
+	const { styles, assets, __unstableResolvedContentStyles, duotone } =
+		useSelect( ( select ) => {
+			const settings = select( store ).getSettings();
+			return {
+				styles: settings.styles,
+				assets: settings.__unstableResolvedAssets,
+				duotone: settings.__experimentalFeatures?.color?.duotone,
+				__unstableResolvedContentStyles:
+					settings.__unstableResolvedContentStyles,
+			};
+		}, [] );
 
 	// Avoid scrollbars for pattern previews.
 	const editorStyles = useMemo( () => {
@@ -77,7 +80,14 @@ function AutoBlockPreview( {
 				} }
 			>
 				<Iframe
-					head={ <EditorStyles styles={ editorStyles } /> }
+					head={
+						<EditorStyles
+							styles={ editorStyles }
+							__unstableResolvedContentStyles={
+								__unstableResolvedContentStyles
+							}
+						/>
+					}
 					assets={ assets }
 					contentRef={ useRefEffect( ( bodyElement ) => {
 						const {

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

@@ -66,7 +66,71 @@ function useDarkThemeBodyClassName( styles ) {
 	);
 }
 
-export default function EditorStyles( { styles } ) {
+function useParsedAssets( html ) {
+	return useMemo( () => {
+		const doc = document.implementation.createHTMLDocument( '' );
+		doc.body.innerHTML = html;
+		return Array.from( doc.body.children );
+	}, [ html ] );
+}
+
+function PrefixedStyle( {
+	tagName,
+	__unstablePrefix,
+	href,
+	id,
+	rel,
+	media,
+	textContent,
+} ) {
+	const TagName = tagName.toLowerCase();
+
+	function onLoad( event ) {
+		const { sheet, ownerDocument } = event.target;
+		const { defaultView } = ownerDocument;
+		const { CSSStyleRule } = defaultView;
+		const { cssRules } = sheet;
+
+		let index = 0;
+
+		for ( const rule of cssRules ) {
+			const { selectorText, cssText } = rule;
+
+			if ( ! ( rule instanceof CSSStyleRule ) ) {
+				continue;
+			}
+
+			if ( selectorText.includes( EDITOR_STYLES_SELECTOR ) ) {
+				continue;
+			}
+
+			sheet.deleteRule( index );
+			sheet.insertRule(
+				'html :where(.editor-styles-wrapper) ' + cssText,
+				index
+			);
+
+			index++;
+		}
+	}
+
+	if ( ! __unstablePrefix ) {
+		onLoad = null;
+	}
+
+	if ( TagName === 'style' ) {
+		return <TagName { ...{ id, onLoad } }>{ textContent }</TagName>;
+	}
+
+	return <TagName { ...{ href, id, rel, media, onLoad } } />;
+}
+
+export default function EditorStyles( {
+	styles,
+	__unstableResolvedContentStyles,
+	__unstablePrefix,
+} ) {
+	const _styles = useParsedAssets( __unstableResolvedContentStyles );
 	const transformedStyles = useMemo(
 		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
 		[ styles ]
@@ -77,6 +141,22 @@ export default function EditorStyles( { styles } ) {
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
 			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			{ _styles.map(
+				( { tagName, href, id, rel, media, textContent } ) => (
+					<PrefixedStyle
+						key={ id }
+						__unstablePrefix={ __unstablePrefix }
+						{ ...{
+							tagName,
+							href,
+							id,
+							rel,
+							media,
+							textContent,
+						} }
+					/>
+				)
+			) }
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }

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

@@ -240,5 +240,5 @@ export const SETTINGS_DEFAULTS = {
 		},
 	],
 
-	__unstableResolvedAssets: { styles: [], scripts: [] },
+	__unstableResolvedAssets: { styles: '', scripts: '' },
 };

packages/block-editor/src/utils/transform-styles/index.js

@@ -15,6 +15,21 @@ import traverse from './traverse';
 import urlRewrite from './transforms/url-rewrite';
 import wrap from './transforms/wrap';
 
+export function transformStyle( { css, baseURL }, wrapperClassName ) {
+	const transforms = [];
+	if ( wrapperClassName ) {
+		transforms.push( wrap( wrapperClassName ) );
+	}
+	if ( baseURL ) {
+		transforms.push( urlRewrite( baseURL ) );
+	}
+	if ( transforms.length ) {
+		return traverse( css, compose( transforms ) );
+	}
+
+	return css;
+}
+
 /**
  * Applies a series of CSS rule transforms to wrap selectors inside a given class and/or rewrite URLs depending on the parameters passed.
  *
@@ -23,20 +38,9 @@ import wrap from './transforms/wrap';
  * @return {Array} converted rules.
  */
 const transformStyles = ( styles, wrapperClassName = '' ) => {
-	return map( styles, ( { css, baseURL } ) => {
-		const transforms = [];
-		if ( wrapperClassName ) {
-			transforms.push( wrap( wrapperClassName ) );
-		}
-		if ( baseURL ) {
-			transforms.push( urlRewrite( baseURL ) );
-		}
-		if ( transforms.length ) {
-			return traverse( css, compose( transforms ) );
-		}
-
-		return css;
-	} );
+	return map( styles, ( style ) =>
+		transformStyle( style, wrapperClassName )
+	);
 };
 
 export default transformStyles;

packages/e2e-tests/plugins/iframed-editor-style.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Editor Style
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-add-editor-style
+ */
+
+// Enable the template editor to test the iframed content.
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		wp_register_style(
+			'my-theme-stylesheet',
+			plugin_dir_url( __FILE__ ) . 'iframed-editor-style/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-editor-style/style.css' )
+		);
+		$settings['__experimentalContentStyles'][] = 'my-theme-stylesheet';
+		return $settings;
+	}
+);

packages/e2e-tests/plugins/iframed-editor-style/style.css

@@ -0,0 +1,3 @@
+p {
+    border: 1px solid red
+}

packages/e2e-tests/specs/editor/plugins/iframed-editor-style.test.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	canvas,
+	createNewTemplate,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context ) {
+	return await context.evaluate( () => {
+		const container = document.querySelector( '.wp-block-paragraph' );
+		return window.getComputedStyle( container )[ 'border-width' ];
+	} );
+}
+
+describe( 'iframed editor styles', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-editor-style' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-editor-style' );
+	} );
+
+	it( 'should load editor styles through the block editor settings', async () => {
+		await insertBlock( 'Paragraph' );
+
+		expect( await getComputedStyle( page ) ).toBe( '1px' );
+
+		await createNewTemplate( 'Iframed Test' );
+		await canvas().waitForSelector( '.wp-block-paragraph' );
+
+		expect( await getComputedStyle( canvas() ) ).toBe( '1px' );
+	} );
+} );

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

@@ -49,13 +49,20 @@ function MaybeIframe( {
 	styles,
 	assets,
 	style,
+	__unstableResolvedContentStyles,
 } ) {
 	const ref = useMouseMoveTypingReset();
 
 	if ( ! shouldIframe ) {
 		return (
 			<>
-				<EditorStyles styles={ styles } />
+				<EditorStyles
+					styles={ styles }
+					__unstableResolvedContentStyles={
+						__unstableResolvedContentStyles
+					}
+					__unstablePrefix
+				/>
 				<WritingFlow
 					ref={ contentRef }
 					className="editor-styles-wrapper"
@@ -70,7 +77,14 @@ function MaybeIframe( {
 
 	return (
 		<Iframe
-			head={ <EditorStyles styles={ styles } /> }
+			head={
+				<EditorStyles
+					styles={ styles }
+					__unstableResolvedContentStyles={
+						__unstableResolvedContentStyles
+					}
+				/>
+			}
 			assets={ assets }
 			ref={ ref }
 			contentRef={ contentRef }
@@ -123,6 +137,7 @@ export default function VisualEditor( { styles } ) {
 		themeSupportsLayout,
 		assets,
 		useRootPaddingAwareAlignments,
+		__unstableResolvedContentStyles,
 	} = useSelect( ( select ) => {
 		const _settings = select( blockEditorStore ).getSettings();
 		return {
@@ -131,6 +146,8 @@ export default function VisualEditor( { styles } ) {
 			assets: _settings.__unstableResolvedAssets,
 			useRootPaddingAwareAlignments:
 				_settings.__experimentalFeatures?.useRootPaddingAwareAlignments,
+			__unstableResolvedContentStyles:
+				_settings.__unstableResolvedContentStyles,
 		};
 	}, [] );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
@@ -251,6 +268,9 @@ export default function VisualEditor( { styles } ) {
 						styles={ styles }
 						assets={ assets }
 						style={ { paddingBottom } }
+						__unstableResolvedContentStyles={
+							__unstableResolvedContentStyles
+						}
 					>
 						{ themeSupportsLayout &&
 							! themeHasDisabledLayoutStyles &&

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

@@ -173,7 +173,12 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>
-						<EditorStyles styles={ settings.styles } />
+						<EditorStyles
+							styles={ settings.styles }
+							__unstableResolvedContentStyles={
+								settings.__unstableResolvedContentStyles
+							}
+						/>
 						<style>{
 							// Forming a "block formatting context" to prevent margin collapsing.
 							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context