diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index 9cb447181aefd..3b589790f1b84 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -596,9 +596,13 @@ add_filter( 'block_editor_settings_all', 'wp_add_editor_classic_theme_styles' ); // Global styles can be enqueued in both the header and the footer. See https://core.trac.wordpress.org/ticket/53494. -add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); +add_action( 'init', 'wp_enqueue_global_styles', 1 ); add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 ); +add_action( 'wp_enqueue_scripts', 'wp_add_global_styles_for_blocks' ); + +add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_global_styles' ); + // Global styles custom CSS. add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' ); diff --git a/src/wp-includes/global-styles-and-settings.php b/src/wp-includes/global-styles-and-settings.php index acca33be1e844..f3a5254f58b84 100644 --- a/src/wp-includes/global-styles-and-settings.php +++ b/src/wp-includes/global-styles-and-settings.php @@ -54,7 +54,7 @@ function wp_get_global_settings( $path = array(), $context = array() ) { * is always fresh from the potential modifications done via hooks * that can use dynamic data (modify the stylesheet depending on some option, * settings depending on user permissions, etc.). - * See some of the existing hooks to modify theme.json behaviour: + * See some of the existing hooks to modify theme.json behavior: * https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/ * * A different alternative considered was to invalidate the cache upon certain @@ -300,16 +300,15 @@ function wp_get_global_styles_custom_css() { * @since 6.1.0 */ function wp_add_global_styles_for_blocks() { + if ( ! wp_should_load_separate_core_block_assets() ) { + return; + } + $tree = WP_Theme_JSON_Resolver::get_merged_data(); $block_nodes = $tree->get_styles_block_nodes(); foreach ( $block_nodes as $metadata ) { $block_css = $tree->get_styles_for_block( $metadata ); - if ( ! wp_should_load_separate_core_block_assets() ) { - wp_add_inline_style( 'global-styles', $block_css ); - continue; - } - $stylesheet_handle = 'global-styles'; if ( isset( $metadata['name'] ) ) { /* diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 8886cb587b170..e7caf5188f5f7 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -2478,6 +2478,10 @@ static function ( $node ) { * @since 5.8.0 */ function wp_enqueue_global_styles() { + if ( is_admin() ) { + return; + } + $separate_assets = wp_should_load_separate_core_block_assets(); $is_block_theme = wp_is_block_theme(); $is_classic_theme = ! $is_block_theme; @@ -2496,13 +2500,6 @@ function wp_enqueue_global_styles() { return; } - /* - * If loading the CSS for each block separately, then load the theme.json CSS conditionally. - * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block. - * This filter must be registered before calling wp_get_global_stylesheet(); - */ - add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); - $stylesheet = wp_get_global_stylesheet(); if ( empty( $stylesheet ) ) { @@ -2512,9 +2509,29 @@ function wp_enqueue_global_styles() { wp_register_style( 'global-styles', false ); wp_add_inline_style( 'global-styles', $stylesheet ); wp_enqueue_style( 'global-styles' ); +} + +/** + * Enqueues block global styles when separate core block assets are disabled. + * + * @since 6.5.0 + */ +function wp_enqueue_block_global_styles() { + if ( wp_should_load_separate_core_block_assets() ) { + return; + } - // Add each block as an inline css. - wp_add_global_styles_for_blocks(); + $tree = WP_Theme_JSON_Resolver::get_merged_data(); + $block_nodes = $tree->get_styles_block_nodes(); + + wp_register_style( 'global-styles-blocks', false ); + + foreach ( $block_nodes as $metadata ) { + $block_css = $tree->get_styles_for_block( $metadata ); + wp_add_inline_style( 'global-styles-blocks', $block_css ); + } + + wp_enqueue_style( 'global-styles-blocks' ); } /** @@ -2538,6 +2555,7 @@ function wp_enqueue_global_styles_custom_css() { } } + /** * Checks if the editor scripts and styles for all registered block types * should be enqueued on the current screen. diff --git a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php index b009ac7233ceb..34f7d74f89911 100644 --- a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php @@ -21,6 +21,7 @@ class Tests_Theme_WpAddGlobalStylesForBlocks extends WP_Theme_UnitTestCase { public function set_up() { parent::set_up(); remove_action( 'wp_print_styles', 'print_emoji_styles' ); + add_filter( 'should_load_separate_core_block_assets', '__return_true' ); } public function tear_down() { @@ -32,6 +33,8 @@ public function tear_down() { $this->test_blocks = array(); } + remove_filter( 'should_load_separate_core_block_assets', '__return_true' ); + parent::tear_down(); } @@ -50,35 +53,11 @@ public function test_third_party_blocks_inline_styles_not_register_to_global_sty ); } - /** - * @ticket 56915 - */ - public function test_third_party_blocks_inline_styles_get_registered_to_global_styles() { - $this->set_up_third_party_block(); - - wp_register_style( 'global-styles', false, array(), true, true ); - - $this->assertNotContains( - '.wp-block-my-third-party-block{background-color: hotpink;}', - $this->get_global_styles(), - 'Third party block inline style should not be registered before running wp_add_global_styles_for_blocks()' - ); - - wp_add_global_styles_for_blocks(); - - $this->assertContains( - '.wp-block-my-third-party-block{background-color: hotpink;}', - $this->get_global_styles(), - 'Third party block inline style should be registered after running wp_add_global_styles_for_blocks()' - ); - } - /** * @ticket 56915 */ public function test_third_party_blocks_inline_styles_get_registered_to_global_styles_when_per_block() { $this->set_up_third_party_block(); - add_filter( 'should_load_separate_core_block_assets', '__return_true' ); wp_register_style( 'global-styles', false, array(), true, true ); @@ -102,7 +81,6 @@ public function test_third_party_blocks_inline_styles_get_registered_to_global_s */ public function test_third_party_blocks_inline_styles_get_rendered_when_per_block() { $this->set_up_third_party_block(); - add_filter( 'should_load_separate_core_block_assets', '__return_true' ); wp_register_style( 'global-styles', false, array(), true, true ); wp_enqueue_style( 'global-styles' ); @@ -122,34 +100,11 @@ public function test_third_party_blocks_inline_styles_get_rendered_when_per_bloc ); } - /** - * @ticket 56915 - */ - public function test_blocks_inline_styles_get_rendered() { - wp_register_style( 'global-styles', false, array(), true, true ); - wp_enqueue_style( 'global-styles' ); - wp_add_global_styles_for_blocks(); - - $actual = get_echo( 'wp_print_styles' ); - - $this->assertStringContainsString( - '.wp-block-my-third-party-block{background-color: hotpink;}', - $actual, - 'Third party block inline style should render' - ); - $this->assertStringContainsString( - '.wp-block-post-featured-image', - $actual, - 'Core block should render' - ); - } - /** * @ticket 57868 */ public function test_third_party_blocks_inline_styles_for_elements_get_rendered_when_per_block() { $this->set_up_third_party_block(); - add_filter( 'should_load_separate_core_block_assets', '__return_true' ); wp_register_style( 'global-styles', false, array(), true, true ); wp_enqueue_style( 'global-styles' ); @@ -163,22 +118,6 @@ public function test_third_party_blocks_inline_styles_for_elements_get_rendered_ ); } - /** - * @ticket 57868 - */ - public function test_third_party_blocks_inline_styles_for_elements_get_rendered() { - wp_register_style( 'global-styles', false, array(), true, true ); - wp_enqueue_style( 'global-styles' ); - wp_add_global_styles_for_blocks(); - - $actual = get_echo( 'wp_print_styles' ); - - $this->assertStringContainsString( - '.wp-block-my-third-party-block cite{color: white;}', - $actual - ); - } - /** * @ticket 57868 * diff --git a/tests/phpunit/tests/theme/wpEnqueueBlockGlobalStyles.php b/tests/phpunit/tests/theme/wpEnqueueBlockGlobalStyles.php new file mode 100644 index 0000000000000..3d05ef721a2e2 --- /dev/null +++ b/tests/phpunit/tests/theme/wpEnqueueBlockGlobalStyles.php @@ -0,0 +1,116 @@ +test_blocks ) ) { + foreach ( $this->test_blocks as $test_block ) { + unregister_block_type( $test_block ); + } + $this->test_blocks = array(); + } + + parent::tear_down(); + } + + /** + * @ticket 56915 + * @ticket 60280 + */ + public function test_third_party_blocks_inline_styles_get_registered_to_global_styles() { + $this->set_up_third_party_block(); + + $this->assertNotContains( + '.wp-block-my-third-party-block{background-color: hotpink;}', + $this->get_global_styles_blocks(), + 'Third party block inline style should not be registered before running wp_enqueue_block_global_styles()' + ); + + wp_enqueue_block_global_styles(); + + $this->assertContains( + '.wp-block-my-third-party-block{background-color: hotpink;}', + $this->get_global_styles_blocks(), + 'Third party block inline style should be registered after running wp_enqueue_block_global_styles()' + ); + } + + /** + * @ticket 56915 + * @ticket 60280 + */ + public function test_blocks_inline_styles_get_rendered() { + wp_enqueue_block_global_styles(); + + $actual = get_echo( 'wp_print_styles' ); + + $this->assertStringContainsString( + '.wp-block-my-third-party-block{background-color: hotpink;}', + $actual, + 'Third party block inline style should render' + ); + $this->assertStringContainsString( + '.wp-block-post-featured-image', + $actual, + 'Core block should render' + ); + } + + /** + * @ticket 57868 + * @ticket 60280 + */ + public function test_third_party_blocks_inline_styles_for_elements_get_rendered() { + wp_enqueue_block_global_styles(); + + $actual = get_echo( 'wp_print_styles' ); + + $this->assertStringContainsString( + '.wp-block-my-third-party-block cite{color: white;}', + $actual + ); + } + + + private function set_up_third_party_block() { + switch_theme( 'block-theme' ); + + $name = 'my/third-party-block'; + $settings = array( + 'icon' => 'text', + 'category' => 'common', + 'render_callback' => 'foo', + ); + register_block_type( $name, $settings ); + + $this->test_blocks[] = $name; + } + + private function get_global_styles_blocks() { + $actual = wp_styles()->get_data( 'global-styles-blocks', 'after' ); + return is_array( $actual ) ? $actual : array(); + } +}