From db90f69837a970111f032ca70949a99b5c5ca6bc Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 9 Sep 2022 13:14:49 +1000 Subject: [PATCH 1/6] Initial commit. Backporting block supports filter callback and registrations --- src/wp-includes/default-filters.php | 4 ++ src/wp-includes/script-loader.php | 58 +++++++++++++++++++++++++++ tests/phpunit/tests/script-loader.php | 8 ++++ 3 files changed, 70 insertions(+) create mode 100644 tests/phpunit/tests/script-loader.php diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index bf76a5d5e1f67..f85ac884a4957 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -575,6 +575,10 @@ add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 ); +// Block supports, and other styles parsed and stored in the Style Engine. +add_action( 'wp_enqueue_scripts', 'wp_enqueue_stored_styles' ); +add_action( 'wp_footer', 'wp_enqueue_stored_styles', 1 ); + // SVG filters like duotone have to be loaded at the beginning of the body in both admin and the front-end. add_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); add_action( 'in_admin_header', 'wp_global_styles_render_svg_filters' ); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 129375a098030..66a7bef5a5801 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -2959,6 +2959,64 @@ static function () use ( $style ) { ); } +/** + * Fetches, processes and compiles stored core styles, then combines and renders them to the page. + * Styles are stored via the Style Engine API. + * See: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-style-engine/ + * + * @since 6.1.0 + */ +function wp_enqueue_stored_styles() { + $is_block_theme = wp_is_block_theme(); + $is_classic_theme = ! $is_block_theme; + + /* + * For block themes, this function prints stored styles in the header. + * For classic themes, in the footer. + */ + if ( + ( $is_block_theme && doing_action( 'wp_footer' ) ) || + ( $is_classic_theme && doing_action( 'wp_enqueue_scripts' ) ) + ) { + return; + } + + $core_styles_keys = array( 'block-supports' ); + $compiled_core_stylesheet = ''; + $style_tag_id = 'core'; + foreach ( $core_styles_keys as $style_key ) { + // Adds comment to identify core styles sections in debugging. + if ( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) { + $compiled_core_stylesheet .= "/**\n * Core styles: $style_key\n */\n"; + } + // Chains core store ids to signify what the styles contain. + $style_tag_id .= '-' . $style_key; + $compiled_core_stylesheet .= wp_style_engine_get_stylesheet_from_context( $style_key ); + } + + // Combines Core styles. + if ( ! empty( $compiled_core_stylesheet ) ) { + wp_register_style( $style_tag_id, false, array(), true, true ); + wp_add_inline_style( $style_tag_id, $compiled_core_stylesheet ); + wp_enqueue_style( $style_tag_id ); + } + + // If there are any other stores registered by themes etc, print them out. + $additional_stores = WP_Style_Engine_CSS_Rules_Store::get_stores(); + foreach ( array_keys( $additional_stores ) as $store_name ) { + if ( in_array( $store_name, $core_styles_keys, true ) ) { + continue; + } + $styles = wp_style_engine_get_stylesheet_from_context( $store_name ); + if ( ! empty( $styles ) ) { + $key = "wp-style-engine-$store_name"; + wp_register_style( $key, false, array(), true, true ); + wp_add_inline_style( $key, $styles ); + wp_enqueue_style( $key ); + } + } +} + /** * Enqueues a stylesheet for a specific block. * diff --git a/tests/phpunit/tests/script-loader.php b/tests/phpunit/tests/script-loader.php new file mode 100644 index 0000000000000..29bc7fbab5cff --- /dev/null +++ b/tests/phpunit/tests/script-loader.php @@ -0,0 +1,8 @@ + Date: Fri, 9 Sep 2022 13:31:01 +1000 Subject: [PATCH 2/6] Added test --- tests/phpunit/tests/script-loader.php | 75 ++++++++++++++++++++++++++- 1 file changed, 74 insertions(+), 1 deletion(-) diff --git a/tests/phpunit/tests/script-loader.php b/tests/phpunit/tests/script-loader.php index 29bc7fbab5cff..06b3f519d401d 100644 --- a/tests/phpunit/tests/script-loader.php +++ b/tests/phpunit/tests/script-loader.php @@ -5,4 +5,77 @@ * * @group script-loader */ -class Tests_Script_Loader extends WP_UnitTestCase {} +class Tests_Script_Loader extends WP_UnitTestCase { + /** + * Clean up global scope. + * + * @global WP_Scripts $wp_scripts + * @global WP_Styles $wp_styles + */ + public function clean_up_global_scope() { + global $wp_styles; + parent::clean_up_global_scope(); + $wp_styles = null; + } + /** + * Tests that stored CSS is enqueued. + * + * @ticket 56467 + * @covers ::wp_enqueue_stored_styles + */ + public function test_should_enqueue_stored_styles() { + global $wp_styles; + + $core_styles_to_enqueue = array( + array( + 'selector' => '.saruman', + 'declarations' => array( + 'color' => 'white', + 'height' => '100px', + 'border-style' => 'solid', + ), + ), + ); + + // Enqueue a block supports (core styles). + wp_style_engine_get_stylesheet_from_css_rules( + $core_styles_to_enqueue, + array( + 'context' => 'block-supports', + ) + ); + + $my_styles_to_enqueue = array( + array( + 'selector' => '.gandalf', + 'declarations' => array( + 'color' => 'grey', + 'height' => '90px', + 'border-style' => 'dotted', + ), + ), + ); + + // Enqueue some other styles. + wp_style_engine_get_stylesheet_from_css_rules( + $my_styles_to_enqueue, + array( + 'context' => 'my-styles', + ) + ); + + wp_enqueue_stored_styles(); + + $this->assertEquals( + array( '.saruman{color:white;height:100px;border-style:solid;}' ), + wp_styles()->registered['core-block-supports']->extra['after'], + 'Registered styles with handle of "core-block-supports" do not match expected value from Style Engine store.' + ); + + $this->assertEquals( + array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ), + wp_styles()->registered['wp-style-engine-my-styles']->extra['after'], + 'Registered styles with handle of "wp-style-engine-my-styles" do not match expected value from the Style Engine store.' + ); + } +} From 311df00bf091a291407b735ad1d8e41b474156fd Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 9 Sep 2022 21:21:28 +1000 Subject: [PATCH 3/6] Remove unused global from test --- tests/phpunit/tests/script-loader.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/tests/phpunit/tests/script-loader.php b/tests/phpunit/tests/script-loader.php index 06b3f519d401d..956da313964fe 100644 --- a/tests/phpunit/tests/script-loader.php +++ b/tests/phpunit/tests/script-loader.php @@ -24,8 +24,6 @@ public function clean_up_global_scope() { * @covers ::wp_enqueue_stored_styles */ public function test_should_enqueue_stored_styles() { - global $wp_styles; - $core_styles_to_enqueue = array( array( 'selector' => '.saruman', From 3c3a71020170fa81119b0d2298961a022412910b Mon Sep 17 00:00:00 2001 From: ramonjd Date: Fri, 9 Sep 2022 21:23:11 +1000 Subject: [PATCH 4/6] Formatting --- tests/phpunit/tests/script-loader.php | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/phpunit/tests/script-loader.php b/tests/phpunit/tests/script-loader.php index 956da313964fe..1e807065ee977 100644 --- a/tests/phpunit/tests/script-loader.php +++ b/tests/phpunit/tests/script-loader.php @@ -1,13 +1,13 @@ Date: Thu, 15 Sep 2022 14:19:15 +0200 Subject: [PATCH 5/6] Move test --- tests/phpunit/tests/script-loader.php | 80 ------------------- .../tests/theme/wpGetGlobalStylesheet.php | 72 +++++++++++++++++ 2 files changed, 72 insertions(+), 80 deletions(-) delete mode 100644 tests/phpunit/tests/script-loader.php diff --git a/tests/phpunit/tests/script-loader.php b/tests/phpunit/tests/script-loader.php deleted file mode 100644 index 1e807065ee977..0000000000000 --- a/tests/phpunit/tests/script-loader.php +++ /dev/null @@ -1,80 +0,0 @@ - '.saruman', - 'declarations' => array( - 'color' => 'white', - 'height' => '100px', - 'border-style' => 'solid', - ), - ), - ); - - // Enqueues a block supports (core styles). - wp_style_engine_get_stylesheet_from_css_rules( - $core_styles_to_enqueue, - array( - 'context' => 'block-supports', - ) - ); - - $my_styles_to_enqueue = array( - array( - 'selector' => '.gandalf', - 'declarations' => array( - 'color' => 'grey', - 'height' => '90px', - 'border-style' => 'dotted', - ), - ), - ); - - // Enqueue some other styles. - wp_style_engine_get_stylesheet_from_css_rules( - $my_styles_to_enqueue, - array( - 'context' => 'my-styles', - ) - ); - - wp_enqueue_stored_styles(); - - $this->assertEquals( - array( '.saruman{color:white;height:100px;border-style:solid;}' ), - wp_styles()->registered['core-block-supports']->extra['after'], - 'Registered styles with handle of "core-block-supports" do not match expected value from Style Engine store.' - ); - - $this->assertEquals( - array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ), - wp_styles()->registered['wp-style-engine-my-styles']->extra['after'], - 'Registered styles with handle of "wp-style-engine-my-styles" do not match expected value from the Style Engine store.' - ); - } -} diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php b/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php index 57d3140ea88a4..b58e0b2ec4e49 100644 --- a/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php @@ -54,6 +54,18 @@ public function tear_down() { parent::tear_down(); } + /** + * Cleans up global scope. + * + * @global WP_Scripts $wp_scripts + * @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; } @@ -199,4 +211,64 @@ public function test_variables_in_classic_theme_with_presets_using_defaults() { remove_theme_support( 'editor-font-sizes' ); } + /** + * Tests that stored CSS is enqueued. + * + * @ticket 56467 + * + * @covers ::wp_enqueue_stored_styles + */ + public function test_should_enqueue_stored_styles() { + $core_styles_to_enqueue = array( + array( + 'selector' => '.saruman', + 'declarations' => array( + 'color' => 'white', + 'height' => '100px', + 'border-style' => 'solid', + ), + ), + ); + + // Enqueues a block supports (core styles). + wp_style_engine_get_stylesheet_from_css_rules( + $core_styles_to_enqueue, + array( + 'context' => 'block-supports', + ) + ); + + $my_styles_to_enqueue = array( + array( + 'selector' => '.gandalf', + 'declarations' => array( + 'color' => 'grey', + 'height' => '90px', + 'border-style' => 'dotted', + ), + ), + ); + + // Enqueue some other styles. + wp_style_engine_get_stylesheet_from_css_rules( + $my_styles_to_enqueue, + array( + 'context' => 'my-styles', + ) + ); + + wp_enqueue_stored_styles(); + + $this->assertEquals( + array( '.saruman{color:white;height:100px;border-style:solid;}' ), + wp_styles()->registered['core-block-supports']->extra['after'], + 'Registered styles with handle of "core-block-supports" do not match expected value from Style Engine store.' + ); + + $this->assertEquals( + array( '.gandalf{color:grey;height:90px;border-style:dotted;}' ), + wp_styles()->registered['wp-style-engine-my-styles']->extra['after'], + 'Registered styles with handle of "wp-style-engine-my-styles" do not match expected value from the Style Engine store.' + ); + } } From ca40bbbfe489675c07ae36519b5f2a19ad188db9 Mon Sep 17 00:00:00 2001 From: Bernie Reiter Date: Thu, 15 Sep 2022 14:32:24 +0200 Subject: [PATCH 6/6] Remove obsolete PHPDoc --- tests/phpunit/tests/theme/wpGetGlobalStylesheet.php | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php b/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php index b58e0b2ec4e49..d887dea32bbb1 100644 --- a/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php +++ b/tests/phpunit/tests/theme/wpGetGlobalStylesheet.php @@ -57,7 +57,6 @@ public function tear_down() { /** * Cleans up global scope. * - * @global WP_Scripts $wp_scripts * @global WP_Styles $wp_styles */ public function clean_up_global_scope() {