From ed91f221f9aa7dcb8f23ccc84f1983adfc38c624 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Thu, 1 Jun 2023 00:18:46 +0300
Subject: [PATCH] Iframe enqueuing: add editorStyle and warning (#50091)

---
 .../applying-styles-with-stylesheets.md       |  4 +++
 lib/compat/wordpress-6.3/script-loader.php    | 35 +++++++++++++++----
 .../src/components/iframe/index.js            |  6 ++++
 .../plugins/iframed-inline-styles.test.js     |  2 ++
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md b/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
index e32054c167ca55..19598965bb7dcf 100644
--- a/docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md
+++ b/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
diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php
index c3035bb0da37d2..9b7ace36802cca 100644
--- a/lib/compat/wordpress-6.3/script-loader.php
+++ b/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 );
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index f68ba0cb60ad1a..9d150a61cfefeb 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/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(
diff --git a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js b/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
index 2a9af38c49209c..3dff32c0843c45 100644
--- a/packages/e2e-tests/specs/editor/plugins/iframed-inline-styles.test.js
+++ b/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();
 	} );
 } );