From 1885efc00b11f7c374658a54f50d6a590021c90a Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Wed, 26 Oct 2022 15:09:30 +0200 Subject: [PATCH 1/8] Global Styles: Fix for third-party blocks --- src/wp-includes/global-styles-and-settings.php | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/wp-includes/global-styles-and-settings.php b/src/wp-includes/global-styles-and-settings.php index ca3d8fabaa9df..b6c8c91b464c0 100644 --- a/src/wp-includes/global-styles-and-settings.php +++ b/src/wp-includes/global-styles-and-settings.php @@ -218,14 +218,18 @@ function wp_add_global_styles_for_blocks() { continue; } + $stylesheet_handle = 'global-styles'; if ( isset( $metadata['name'] ) ) { - $block_name = str_replace( 'core/', '', $metadata['name'] ); /* * These block styles are added on block_render. * This hooks inline CSS to them so that they are loaded conditionally * based on whether or not the block is used on the page. */ - wp_add_inline_style( 'wp-block-' . $block_name, $block_css ); + if ( str_starts_with( $metadata['name'], 'core/' ) ) { + $block_name = str_replace( 'core/', '', $metadata['name'] ); + $stylesheet_handle = 'wp-block-' . $block_name; + } + wp_add_inline_style( $stylesheet_handle, $block_css ); } // The likes of block element styles from theme.json do not have $metadata['name'] set. @@ -242,8 +246,11 @@ function ( $item ) { ) ); if ( isset( $result[0] ) ) { - $block_name = str_replace( 'core/', '', $result[0] ); - wp_add_inline_style( 'wp-block-' . $block_name, $block_css ); + if ( str_starts_with( $result[0], 'core/' ) ) { + $block_name = str_replace( 'core/', '', $result[0] ); + $stylesheet_handle = 'wp-block-' . $block_name; + } + wp_add_inline_style( $stylesheet_handle, $block_css ); } } } From 55212745fc4f074097553ab63a384d770ad9c91c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 27 Oct 2022 10:18:15 +0200 Subject: [PATCH 2/8] Add test for global styles coming from 3rd party blocks --- .../data/themedir1/block-theme/theme.json | 5 ++ .../theme/wpGetGlobalStylesForBlocks.php | 90 +++++++++++++++++++ 2 files changed, 95 insertions(+) create mode 100644 tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php diff --git a/tests/phpunit/data/themedir1/block-theme/theme.json b/tests/phpunit/data/themedir1/block-theme/theme.json index 02fcb395dd393..d023faec53125 100644 --- a/tests/phpunit/data/themedir1/block-theme/theme.json +++ b/tests/phpunit/data/themedir1/block-theme/theme.json @@ -69,6 +69,11 @@ "filter": { "duotone": "var(--wp--preset--duotone--custom-duotone)" } + }, + "my/third-party-block": { + "color": { + "background": "hotpink" + } } }, "elements": { diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php new file mode 100644 index 0000000000000..ca7e822641588 --- /dev/null +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php @@ -0,0 +1,90 @@ +orig_theme_dir = $GLOBALS['wp_theme_directories']; + $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); + + // /themes is necessary as theme.php functions assume /themes is the root if there is only one root. + $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); + + // Set up the new root. + add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); + add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); + add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + + // Clear caches. + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); + } + + public function tear_down() { + $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; + + // Clear up the filters to modify the theme root. + remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); + remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); + remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); + + parent::tear_down(); + } + + /** + * Cleans up global scope. + * + * @global WP_Styles $wp_styles + */ + public function clean_up_global_scope() { + global $wp_styles; + parent::clean_up_global_scope(); + $wp_styles = null; + } + + public function filter_set_theme_root() { + return $this->theme_root; + } + + public function test_styles_for_blocks() { + switch_theme( 'block-theme' ); + + $name = 'my/third-party-block'; + $settings = array( + 'icon' => 'text', + 'category' => 'common', + 'render_callback' => 'foo', + ); + register_block_type( $name, $settings ); + wp_enqueue_global_styles(); + unregister_block_type( $name ); + + $this->assertStringContainsString( '.wp-block-my-third-party-block{background-color: hotpink;}', get_echo( 'wp_print_styles' ), '3rd party block styles are included' ); + + switch_theme( WP_DEFAULT_THEME ); + } + +} From 1099bce4b1ee13395181a78f67acf5e47c9495e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 27 Oct 2022 10:40:40 +0200 Subject: [PATCH 3/8] Make block styles be loaded in a separate stylesheet --- tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php index ca7e822641588..627c4fc82d090 100644 --- a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php @@ -72,6 +72,10 @@ public function filter_set_theme_root() { public function test_styles_for_blocks() { switch_theme( 'block-theme' ); + // The 3rd party block styles are only missing + // if the assets are loaded per block. + add_filter( 'should_load_separate_core_block_assets', '__return_true' ); + $name = 'my/third-party-block'; $settings = array( 'icon' => 'text', From 53fbe347e95d2d91e2ab5a46ba3945188beb785e Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 27 Oct 2022 13:50:56 +0200 Subject: [PATCH 4/8] Change test name --- tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php index 627c4fc82d090..e9060bd02aab9 100644 --- a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php @@ -69,7 +69,7 @@ public function filter_set_theme_root() { return $this->theme_root; } - public function test_styles_for_blocks() { + public function test_styles_for_third_party_blocks() { switch_theme( 'block-theme' ); // The 3rd party block styles are only missing From cb00498d3d0c8589fdbc9bf6a4418f78fc1feac0 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 27 Oct 2022 13:51:44 +0200 Subject: [PATCH 5/8] Update tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php --- tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php index e9060bd02aab9..c3286f813e010 100644 --- a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php @@ -5,7 +5,7 @@ * * @group themes */ -class Tests_Theme_wpGetGlobalStylesForBlocks extends WP_UnitTestCase { +class Tests_Theme_wpAddGlobalStylesForBlocks extends WP_UnitTestCase { /** * Theme root directory. From f1ca6f54baad66f2b4eebe716ba86c9775d69e25 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 27 Oct 2022 13:52:11 +0200 Subject: [PATCH 6/8] Change test file name --- ...etGlobalStylesForBlocks.php => wpAddGlobalStylesForBlocks.php} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename tests/phpunit/tests/theme/{wpGetGlobalStylesForBlocks.php => wpAddGlobalStylesForBlocks.php} (100%) diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php similarity index 100% rename from tests/phpunit/tests/theme/wpGetGlobalStylesForBlocks.php rename to tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php From 19f62712f1bc0287127560cc119c7ff025bede46 Mon Sep 17 00:00:00 2001 From: hellofromtonya Date: Thu, 27 Oct 2022 08:40:30 -0500 Subject: [PATCH 7/8] Add unit and integration tests. --- phpcs.xml.dist | 1 + tests/phpunit/tests/theme/base.php | 66 +++++++++ .../theme/wpAddGlobalStylesForBlocks.php | 136 +++++++++++------- 3 files changed, 153 insertions(+), 50 deletions(-) create mode 100644 tests/phpunit/tests/theme/base.php diff --git a/phpcs.xml.dist b/phpcs.xml.dist index 32c6acc06d8b1..453ef5c794745 100644 --- a/phpcs.xml.dist +++ b/phpcs.xml.dist @@ -244,6 +244,7 @@ + diff --git a/tests/phpunit/tests/theme/base.php b/tests/phpunit/tests/theme/base.php new file mode 100644 index 0000000000000..182efa5df81e4 --- /dev/null +++ b/tests/phpunit/tests/theme/base.php @@ -0,0 +1,66 @@ +orig_theme_dir = $GLOBALS['wp_theme_directories']; + $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); + + // /themes is necessary as theme.php functions assume /themes is the root if there is only one root. + $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); + + // Set up the new root. + add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); + add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); + add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + + // Clear caches. + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); + } + + public function tear_down() { + $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; + + // Clear up the filters to modify the theme root. + remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); + remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); + remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + + wp_clean_themes_cache(); + unset( $GLOBALS['wp_themes'] ); + + parent::tear_down(); + } + + /** + * Cleans up global scope. + * + * @global WP_Styles $wp_styles + */ + public function clean_up_global_scope() { + global $wp_styles; + parent::clean_up_global_scope(); + $wp_styles = null; + } + + public function filter_set_theme_root() { + return $this->theme_root; + } +} diff --git a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php index c3286f813e010..33bf1d52c836f 100644 --- a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php @@ -1,81 +1,117 @@ test_blocks ) ) { + foreach ( $this->test_blocks as $test_block ) { + unregister_block_type( $test_block ); + } + $this->test_blocks = array(); + } + + parent::tear_down(); + } /** - * Original theme directory. - * - * @var string + * @ticket 56915 */ - private $orig_theme_dir; + public function test_third_party_blocks_inline_styles_not_register_to_global_styles() { + switch_theme( 'block-theme' ); - public function set_up() { - parent::set_up(); + wp_register_style( 'global-styles', false, array(), true, true ); + wp_add_global_styles_for_blocks(); - $this->orig_theme_dir = $GLOBALS['wp_theme_directories']; - $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' ); + $this->assertNotContains( + '.wp-block-my-third-party-block{background-color: hotpink;}', + $this->get_global_styles() + ); + } + + /** + * @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 ); - // /themes is necessary as theme.php functions assume /themes is the root if there is only one root. - $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root ); + $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()' + ); - // Set up the new root. - add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); - add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); - add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + wp_add_global_styles_for_blocks(); - // Clear caches. - wp_clean_themes_cache(); - unset( $GLOBALS['wp_themes'] ); + $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()' + ); } - public function tear_down() { - $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir; + /** + * @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' ); - // Clear up the filters to modify the theme root. - remove_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) ); - remove_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) ); - remove_filter( 'template_root', array( $this, 'filter_set_theme_root' ) ); + wp_register_style( 'global-styles', false, array(), true, true ); - wp_clean_themes_cache(); - unset( $GLOBALS['wp_themes'] ); + $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()' + ); - parent::tear_down(); + 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()' + ); } /** - * Cleans up global scope. - * - * @global WP_Styles $wp_styles + * @ticket 56915 */ - public function clean_up_global_scope() { - global $wp_styles; - parent::clean_up_global_scope(); - $wp_styles = null; - } + public function test_third_party_blocks_inline_styles_get_rendered() { + $this->set_up_third_party_block(); + add_filter( 'should_load_separate_core_block_assets', '__return_true' ); - public function filter_set_theme_root() { - return $this->theme_root; + wp_register_style( 'global-styles', false, array(), true, true ); + wp_enqueue_style( 'global-styles' ); + wp_add_global_styles_for_blocks(); + + $this->assertStringContainsString( + '.wp-block-my-third-party-block{background-color: hotpink;}', + get_echo( 'wp_print_styles' ) + ); } - public function test_styles_for_third_party_blocks() { + private function set_up_third_party_block() { switch_theme( 'block-theme' ); - // The 3rd party block styles are only missing - // if the assets are loaded per block. - add_filter( 'should_load_separate_core_block_assets', '__return_true' ); - $name = 'my/third-party-block'; $settings = array( 'icon' => 'text', @@ -83,12 +119,12 @@ public function test_styles_for_third_party_blocks() { 'render_callback' => 'foo', ); register_block_type( $name, $settings ); - wp_enqueue_global_styles(); - unregister_block_type( $name ); - $this->assertStringContainsString( '.wp-block-my-third-party-block{background-color: hotpink;}', get_echo( 'wp_print_styles' ), '3rd party block styles are included' ); - - switch_theme( WP_DEFAULT_THEME ); + $this->test_blocks[] = $name; } + private function get_global_styles() { + $actual = wp_styles()->get_data( 'global-styles', 'after' ); + return is_array( $actual ) ? $actual : array(); + } } From 25eaf26a810c648398520da280b4fc7c9e302819 Mon Sep 17 00:00:00 2001 From: hellofromtonya Date: Thu, 27 Oct 2022 09:23:54 -0500 Subject: [PATCH 8/8] Add core block tests. --- .../theme/wpAddGlobalStylesForBlocks.php | 34 +++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php index 33bf1d52c836f..6d55f24ec9988 100644 --- a/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php +++ b/tests/phpunit/tests/theme/wpAddGlobalStylesForBlocks.php @@ -95,7 +95,7 @@ public function test_third_party_blocks_inline_styles_get_registered_to_global_s /** * @ticket 56915 */ - public function test_third_party_blocks_inline_styles_get_rendered() { + 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' ); @@ -103,9 +103,39 @@ public function test_third_party_blocks_inline_styles_get_rendered() { 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;}', - get_echo( 'wp_print_styles' ) + $actual, + 'Third party block inline style should render' + ); + $this->assertStringNotContainsString( + '.wp-block-post-featured-image', + $actual, + 'Core block should not render' + ); + } + + /** + * @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' ); }