Block editor: iframe: add enqueue_block_assets (#49655)

lib/client-assets.php

@@ -255,7 +255,7 @@ function gutenberg_register_packages_styles( $styles ) {
 		$styles,
 		'wp-block-editor-content',
 		gutenberg_url( 'build/block-editor/content.css' ),
-		array(),
+		array( 'wp-components' ),
 		$version
 	);
 	$styles->add_data( 'wp-block-editor-content', 'rtl', 'replace' );

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

@@ -13,3 +13,73 @@
 remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
 remove_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' );
 
+/**
+ * Collect the block editor assets that need to be loaded into the editor's iframe.
+ *
+ * @since 6.0.0
+ * @access private
+ *
+ * @return array {
+ *     The block editor assets.
+ *
+ *     @type string|false $styles  String containing the HTML for styles.
+ *     @type string|false $scripts String containing the HTML for scripts.
+ * }
+ */
+function _gutenberg_get_iframed_editor_assets() {
+	global $wp_styles, $wp_scripts;
+
+	// Keep track of the styles and scripts instance to restore later.
+	$current_wp_styles  = $wp_styles;
+	$current_wp_scripts = $wp_scripts;
+
+	// Create new instances to collect the assets.
+	$wp_styles  = new WP_Styles();
+	$wp_scripts = new WP_Scripts();
+
+	// Register all currently registered styles and scripts. The actions that
+	// follow enqueue assets, but don't necessarily register them.
+	$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' );
+	wp_enqueue_script( 'wp-polyfill' );
+
+	// We don't want to load EDITOR scripts and styles in the iframe, only
+	// 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' );
+
+	ob_start();
+	wp_print_styles();
+	wp_print_fonts();
+	$styles = ob_get_clean();
+
+	ob_start();
+	wp_print_head_scripts();
+	wp_print_footer_scripts();
+	$scripts = ob_get_clean();
+
+	// Restore the original instances.
+	$wp_styles  = $current_wp_styles;
+	$wp_scripts = $current_wp_scripts;
+
+	return array(
+		'styles'  => $styles,
+		'scripts' => $scripts,
+	);
+}
+
+add_filter(
+	'block_editor_settings_all',
+	function( $settings ) {
+		// We must override what core is passing now.
+		$settings['__unstableResolvedAssets'] = _gutenberg_get_iframed_editor_assets();
+		return $settings;
+	},
+	100
+);

packages/e2e-tests/plugins/iframed-enqueue-block-assets.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Plugin Name: Gutenberg Test Iframed enqueue_block_assets
+ * Plugin URI: https://github.com/WordPress/gutenberg
+ * Author: Gutenberg Team
+ *
+ * @package gutenberg-test-iframed-iframed-enqueue-block-assets
+ */
+
+add_action(
+	'enqueue_block_assets',
+	function() {
+		wp_enqueue_style(
+			'iframed-enqueue-block-assets',
+			plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/style.css',
+			array(),
+			filemtime( plugin_dir_path( __FILE__ ) . 'iframed-enqueue-block-assets/style.css' )
+		);
+		wp_add_inline_style( 'iframed-enqueue-block-assets', 'body{padding:20px!important}' );
+	}
+);

packages/e2e-tests/plugins/iframed-enqueue-block-assets/style.css

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied both on the front of your site and in the
+ * editor.
+ */
+body {
+	background-color: rgb(33, 117, 155) !important;
+	color: #fff !important;
+	padding: 2px !important;
+}

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activatePlugin,
+	createNewPost,
+	deactivatePlugin,
+	canvas,
+	activateTheme,
+} from '@wordpress/e2e-test-utils';
+
+async function getComputedStyle( context, selector, property ) {
+	return await context.evaluate(
+		( sel, prop ) =>
+			window.getComputedStyle( document.querySelector( sel ) )[ prop ],
+		selector,
+		property
+	);
+}
+
+describe( 'iframed inline styles', () => {
+	beforeEach( async () => {
+		// Activate the empty theme (block based theme), which is iframed.
+		await activateTheme( 'emptytheme' );
+		await activatePlugin( 'gutenberg-test-iframed-enqueue_block_assets' );
+		await createNewPost();
+	} );
+
+	afterEach( async () => {
+		await deactivatePlugin( 'gutenberg-test-iframed-enqueue_block_assets' );
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	it( 'should load styles added through enqueue_block_assets', async () => {
+		// Check stylesheet.
+		expect(
+			await getComputedStyle( canvas(), 'body', 'background-color' )
+		).toBe( 'rgb(33, 117, 155)' );
+		// Check inline style.
+		expect( await getComputedStyle( canvas(), 'body', 'padding' ) ).toBe(
+			'20px'
+		);
+	} );
+} );