diff --git a/lib/client-assets.php b/lib/client-assets.php index 88fbbfd4a1a768..473221960e4de0 100644 --- a/lib/client-assets.php +++ b/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' ); diff --git a/lib/compat/wordpress-6.3/script-loader.php b/lib/compat/wordpress-6.3/script-loader.php index 8a8e41ef2be919..c735f3b8a792a7 100644 --- a/lib/compat/wordpress-6.3/script-loader.php +++ b/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 +); diff --git a/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php b/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php new file mode 100644 index 00000000000000..c85c77fe11d0e9 --- /dev/null +++ b/packages/e2e-tests/plugins/iframed-enqueue-block-assets.php @@ -0,0 +1,21 @@ + + 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' + ); + } ); +} );