Iframe enqueuing: add editorStyle and warning (WordPress#50091)

docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md

@@ -197,6 +197,10 @@ Like scripts, you can enqueue your block's styles using the `block.json` file.
 
 Use the `editorStyle` property to a CSS file you want to load in the editor view, and use the `style` property for a CSS file you want to load on the frontend when the block is used.
 
+It is worth noting that, if the editor content is iframed, both of these will
+load in the iframe. `editorStyle` will also load outside the iframe, so it can
+be used for editor content as well as UI. 
+
 For example:
 
 ```json

lib/compat/wordpress-6.3/script-loader.php

@@ -27,7 +27,7 @@
  * }
  */
 function _gutenberg_get_iframed_editor_assets() {
-	global $wp_styles, $wp_scripts;
+	global $wp_styles, $wp_scripts, $pagenow;
 
 	// Keep track of the styles and scripts instance to restore later.
 	$current_wp_styles  = $wp_styles;
@@ -42,18 +42,39 @@ function _gutenberg_get_iframed_editor_assets() {
 	$wp_styles->registered  = $current_wp_styles->registered;
 	$wp_scripts->registered = $current_wp_scripts->registered;
 
-	wp_enqueue_style( 'wp-block-editor-content' );
-	// To do: investigate why this is not enqueued through enqueue_block_assets,
-	// as styles for non-core blocks are.
-	wp_enqueue_style( 'wp-block-library' );
+	// We do not need reset styles for the iframed editor.
+	$wp_styles->done = array( 'wp-reset-editor-styles' );
+
 	wp_enqueue_script( 'wp-polyfill' );
+	// Enqueue the `editorStyle` handles for all core block, and dependencies.
+	wp_enqueue_style( 'wp-edit-blocks' );
+
+	if ( 'site-editor.php' === $pagenow ) {
+		wp_enqueue_style( 'wp-edit-site' );
+	}
+
+	if ( current_theme_supports( 'wp-block-styles' ) ) {
+		wp_enqueue_style( 'wp-block-library-theme' );
+	}
 
-	// We don't want to load EDITOR scripts and styles in the iframe, only
-	// assets for the content.
+	// We don't want to load EDITOR scripts in the iframe, only enqueue
+	// front-end assets for the content.
 	add_filter( 'should_load_block_editor_scripts_and_styles', '__return_false' );
 	do_action( 'enqueue_block_assets' );
 	remove_filter( 'should_load_block_editor_scripts_and_styles', '__return_false' );
 
+	$block_registry = WP_Block_Type_Registry::get_instance();
+
+	// Additionally, do enqueue `editorStyle` assets for all blocks, which
+	// contains editor-only styling for blocks (editor content).
+	foreach ( $block_registry->get_all_registered() as $block_type ) {
+		if ( isset( $block_type->editor_style_handles ) && is_array( $block_type->editor_style_handles ) ) {
+			foreach ( $block_type->editor_style_handles as $style_handle ) {
+				wp_enqueue_style( $style_handle );
+			}
+		}
+	}
+
 	ob_start();
 	wp_print_styles();
 	wp_print_fonts( true );

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

@@ -164,6 +164,12 @@ function Iframe( {
 				contentDocument.head.appendChild(
 					compatStyle.cloneNode( true )
 				);
+
+				// eslint-disable-next-line no-console
+				console.warn(
+					`${ compatStyle.id } was added to the iframe incorrectly. Please use block.json or enqueue_block_assets to add styles to the iframe.`,
+					compatStyle
+				);
 			}
 
 			iFrameDocument.addEventListener(

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

@@ -48,5 +48,7 @@ describe( 'iframed inline styles', () => {
 		expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
 			'2px'
 		);
+
+		expect( console ).toHaveWarned();
 	} );
 } );