Block editor: iframe: load inline styles (#33389)

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

@@ -49,6 +49,19 @@ function styleSheetsCompat( doc ) {
 			return;
 		}
 
+		// Generally, ignore inline styles. We add inline styles belonging to a
+		// stylesheet later, which may or may not match the selectors.
+		if ( ownerNode.tagName !== 'LINK' ) {
+			return;
+		}
+
+		// Don't try to add the reset styles, which were removed as a dependency
+		// from `edit-blocks` for the iframe since we don't need to reset admin
+		// styles.
+		if ( ownerNode.id === 'wp-reset-editor-styles-css' ) {
+			return;
+		}
+
 		const isMatch = Array.from( cssRules ).find(
 			( { selectorText } ) =>
 				selectorText &&
@@ -62,9 +75,17 @@ function styleSheetsCompat( doc ) {
 				`Stylesheet ${ ownerNode.id } was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,
-				ownerNode
+				ownerNode.outerHTML
 			);
 			doc.head.appendChild( ownerNode.cloneNode( true ) );
+
+			// Add inline styles belonging to the stylesheet.
+			const inlineCssId = ownerNode.id.replace( '-css', '-inline-css' );
+			const inlineCssElement = document.getElementById( inlineCssId );
+
+			if ( inlineCssElement ) {
+				doc.head.appendChild( inlineCssElement.cloneNode( true ) );
+			}
 		}
 	} );
 }
@@ -232,12 +253,23 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 	head = (
 		<>
 			<style>{ 'body{margin:0}' }</style>
-			{ styles.map( ( { tagName, href, id, rel, media }, index ) => {
-				const TagName = tagName.toLowerCase();
-				return (
-					<TagName { ...{ href, id, rel, media } } key={ index } />
-				);
-			} ) }
+			{ styles.map(
+				( { tagName, href, id, rel, media, textContent } ) => {
+					const TagName = tagName.toLowerCase();
+
+					if ( TagName === 'style' ) {
+						return (
+							<TagName { ...{ id } } key={ id }>
+								{ textContent }
+							</TagName>
+						);
+					}
+
+					return (
+						<TagName { ...{ href, id, rel, media } } key={ id } />
+					);
+				}
+			) }
 			{ head }
 		</>
 	);

packages/e2e-tests/plugins/iframed-inline-styles.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed Inline Styles
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-inline-styles
+ */
+
+add_action(
+	'setup_theme',
+	function() {
+		add_theme_support( 'block-templates' );
+	}
+);
+
+add_action(
+	'init',
+	function() {
+		wp_register_script(
+			'iframed-inline-styles-editor-script',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/editor.js',
+			array(
+				'wp-blocks',
+				'wp-block-editor',
+				'wp-element',
+			),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/editor.js' )
+		);
+		wp_register_style(
+			'iframed-inline-styles-style',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/style.css' )
+		);
+		wp_add_inline_style( 'iframed-inline-styles-style', '.wp-block-test-iframed-inline-styles{padding:20px}' );
+		register_block_type_from_metadata( __DIR__ . '/iframed-inline-styles' );
+	}
+);
+
+add_action(
+	'enqueue_block_editor_assets',
+	function() {
+		wp_enqueue_style(
+			'iframed-inline-styles-compat-style',
+			plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-inline-styles/compat-style.css' )
+		);
+		wp_add_inline_style( 'iframed-inline-styles-compat-style', '.wp-block-test-iframed-inline-styles{border-width:2px}' );
+	}
+);

packages/e2e-tests/plugins/iframed-inline-styles/block.json

@@ -0,0 +1,15 @@
+{
+	"apiVersion": 2,
+	"name": "test/iframed-inline-styles",
+	"title": "Iframed Inline Styles",
+	"category": "text",
+	"icon": "smiley",
+	"description": "",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "iframed-inline-styles",
+	"editorScript": "iframed-inline-styles-editor-script",
+	"editorStyle": "file:./editor.css",
+	"style": "iframed-inline-styles-style"
+}

packages/e2e-tests/plugins/iframed-inline-styles/compat-style.css

@@ -0,0 +1,4 @@
+/* Random rule with `wp-block` in the selector. */
+.wp-block-test-iframed-inline-styles {
+	display: block;
+}

packages/e2e-tests/plugins/iframed-inline-styles/editor.css

@@ -0,0 +1,6 @@
+/**
+ * The following styles get applied inside the editor only.
+ */
+.wp-block-test-iframed-inline-styles {
+	border: 1px dotted #f00;
+}

packages/e2e-tests/plugins/iframed-inline-styles/editor.js

@@ -0,0 +1,15 @@
+( ( { wp: { element, blocks, blockEditor } } ) => {
+	const { createElement: el } = element;
+	const { registerBlockType } = blocks;
+	const { useBlockProps } = blockEditor;
+
+	registerBlockType( 'test/iframed-inline-styles', {
+		apiVersion: 2,
+		edit: function Edit() {
+			return el( 'div', useBlockProps(), 'Edit' );
+		},
+		save: function Save() {
+			return el( 'div', useBlockProps.save(), 'Save' );
+		},
+	} );
+} )( window );

packages/e2e-tests/plugins/iframed-inline-styles/style.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+.wp-block-test-iframed-inline-styles {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

packages/e2e-tests/plugins/iframed-masonry-block/editor.js

@@ -28,7 +28,7 @@
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item' } ),
 		el( 'div', { className: 'grid-item grid-item--height2' } ),
-	]
+	];
 
 	registerBlockType( 'test/iframed-masonry-block', {
 		edit: function Edit() {

packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-inline-styles.test.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`iframed inline styles should load inline styles in iframe 1`] = `
+"<!-- wp:test/iframed-inline-styles -->
+<div class=\\"wp-block-test-iframed-inline-styles\\">Save</div>
+<!-- /wp:test/iframed-inline-styles -->"
+`;

packages/e2e-tests/specs/editor/plugins/__snapshots__/iframed-masonry-block.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`changing image size should load script and dependencies in iframe 1`] = `
+exports[`iframed masonry block should load script and dependencies in iframe 1`] = `
 "<!-- wp:test/iframed-masonry-block -->
 <div class=\\"wp-block-test-iframed-masonry-block\\"><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height3\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--width2 grid-item--height2\\"></div><div class=\\"grid-item grid-item--width2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height3\\"></div><div class=\\"grid-item grid-item--height2\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item\\"></div><div class=\\"grid-item grid-item--height2\\"></div></div>
 <!-- /wp:test/iframed-masonry-block -->"

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

@@ -0,0 +1,69 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	insertBlock,
+	getEditedPostContent,
+	openDocumentSettingsSidebar,
+	clickButton,
+	canvas,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, property ) {
+	return await context.evaluate( ( prop ) => {
+		const container = document.querySelector(
+			'.wp-block-test-iframed-inline-styles'
+		);
+		return window.getComputedStyle( container )[ prop ];
+	}, property );
+}
+
+describe( 'iframed inline styles', () => {
+	beforeEach( async () => {
+		await activatePlugin( 'gutenberg-test-iframed-inline-styles' );
+		await createNewPost( { postType: 'page' } );
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
+	} );
+
+	it( 'should load inline styles in iframe', async () => {
+		await insertBlock( 'Iframed Inline Styles' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+		expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' );
+		expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' );
+
+		await openDocumentSettingsSidebar();
+		await clickButton( 'Page' );
+		await clickButton( 'Template' );
+		await clickButton( 'New' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Tab' );
+		await page.keyboard.type( 'Iframed Test' );
+		await clickButton( 'Create' );
+		await page.waitForSelector( 'iframe[name="editor-canvas"]' );
+		await canvas().waitForSelector(
+			'.wp-block-test-iframed-inline-styles'
+		);
+
+		// Inline styles of properly enqueued stylesheet should load.
+		expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
+
+		// Inline styles of stylesheet loaded with the compatibility layer
+		// should load.
+		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
+			'2px'
+		);
+
+		expect( console ).toHaveErrored(
+			`Stylesheet iframed-inline-styles-compat-style-css was not properly added.
+For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
+For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles). <link rel="stylesheet" id="iframed-inline-styles-compat-style-css" href="http://localhost:8889/wp-content/plugins/gutenberg-test-plugins/iframed-inline-styles/compat-style.css?ver=1626189899" media="all">`
+		);
+	} );
+} );

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

@@ -26,7 +26,7 @@ async function didMasonryLoadCorrectly( context ) {
 	} );
 }
 
-describe( 'changing image size', () => {
+describe( 'iframed masonry block', () => {
 	beforeEach( async () => {
 		await activatePlugin( 'gutenberg-test-iframed-masonry-block' );
 		await createNewPost( { postType: 'page' } );