From 453c9e6dc1c88a193b68f01bcf4ab71dd3f4b00f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 6 Jun 2024 18:22:39 +1000 Subject: [PATCH 1/5] Update custom CSS handling to be consistent with block global styles. --- lib/block-editor-settings.php | 2 +- lib/class-wp-theme-json-gutenberg.php | 12 ++++++++ lib/script-loader.php | 42 +++++++++------------------ 3 files changed, 26 insertions(+), 30 deletions(-) diff --git a/lib/block-editor-settings.php b/lib/block-editor-settings.php index 53668e114e04cb..defd7cd391b16b 100644 --- a/lib/block-editor-settings.php +++ b/lib/block-editor-settings.php @@ -58,7 +58,7 @@ function gutenberg_get_block_editor_settings( $settings ) { * entered by users does not break other global styles. */ $global_styles[] = array( - 'css' => gutenberg_get_global_styles_custom_css(), + 'css' => gutenberg_get_global_stylesheet( array( 'custom-css' ) ), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a1e79a56a683bf..bc9641a1a8625b 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1355,6 +1355,12 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins ); } + // Load the custom CSS last so it has the highest specificity. + if ( in_array( 'custom-css', $types, true ) ) { + // Add the global styles root CSS. + $stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + } + return $stylesheet; } @@ -2646,6 +2652,7 @@ private static function get_block_nodes( $theme_json, $selectors = array() ) { 'selectors' => $feature_selectors, 'duotone' => $duotone_selector, 'variations' => $variation_selectors, + 'css' => $selector, ); if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) { @@ -2855,6 +2862,11 @@ static function ( $pseudo_selector ) use ( $selector ) { $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations ); } + // 7. Generate and append any custom CSS rules. + if ( isset( $node['css'] ) ) { + $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); + } + return $block_rules; } diff --git a/lib/script-loader.php b/lib/script-loader.php index 01008a0da8967e..59df13556e9cfc 100644 --- a/lib/script-loader.php +++ b/lib/script-loader.php @@ -43,45 +43,29 @@ function gutenberg_enqueue_global_styles() { add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' ); $stylesheet = gutenberg_get_global_stylesheet(); - if ( empty( $stylesheet ) ) { - return; - } - - wp_register_style( 'global-styles', false ); - wp_add_inline_style( 'global-styles', $stylesheet ); - wp_enqueue_style( 'global-styles' ); - - // Add each block as an inline css. - gutenberg_add_global_styles_for_blocks(); /* - * Add the custom CSS for the global styles. - * Before that, dequeue the Customizer's custom CSS + * Dequeue the Customizer's custom CSS * and add it before the global styles custom CSS. - * Don't enqueue Customizer's custom CSS separately. */ remove_action( 'wp_head', 'wp_custom_css_cb', 101 ); + // Get the custom CSS from the Customizer and add it to the global stylesheet. + $custom_css = wp_get_custom_css(); + $stylesheet .= $custom_css; - $custom_css = wp_get_custom_css(); + // Add the global styles custom CSS at the end. + $stylesheet .= gutenberg_get_global_stylesheet( array( 'custom-css' ) ); - if ( ! wp_should_load_separate_core_block_assets() ) { - /* - * If loading all block assets together, add both - * the base and block custom CSS at once. Else load - * the base custom CSS only, and the block custom CSS - * will be added to the inline CSS for each block in - * gutenberg_add_global_styles_block_custom_css(). - */ - $custom_css .= gutenberg_get_global_styles_custom_css(); - } else { - $custom_css .= gutenberg_get_global_styles_base_custom_css(); + if ( empty( $stylesheet ) ) { + return; } - if ( ! empty( $custom_css ) ) { - wp_add_inline_style( 'global-styles', $custom_css ); - } + wp_register_style( 'global-styles', false ); + wp_add_inline_style( 'global-styles', $stylesheet ); + wp_enqueue_style( 'global-styles' ); - gutenberg_add_global_styles_block_custom_css(); + // Add each block as an inline css. + gutenberg_add_global_styles_for_blocks(); } add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' ); add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 ); From 6db7830ef2aa2a0b84743d93cb02d935b58a02c6 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Jun 2024 11:34:50 +1000 Subject: [PATCH 2/5] Deprecate functions and update tests. --- lib/class-wp-theme-json-gutenberg.php | 4 +++ lib/global-styles-and-settings.php | 3 +++ phpunit/class-wp-theme-json-test.php | 36 ++++++++++++++++++++++++--- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index bc9641a1a8625b..e39fdec8e6e440 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1409,6 +1409,7 @@ protected function process_blocks_custom_css( $css, $selector ) { * @return string The global styles custom CSS. */ public function get_custom_css() { + _deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' ); $block_custom_css = ''; $block_nodes = $this->get_block_custom_css_nodes(); foreach ( $block_nodes as $node ) { @@ -1427,6 +1428,7 @@ public function get_custom_css() { * @return string The global styles base custom CSS. */ public function get_base_custom_css() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_stylesheet' ); return isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : ''; } @@ -1438,6 +1440,7 @@ public function get_base_custom_css() { * @return array The block nodes. */ public function get_block_custom_css_nodes() { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_block_nodes' ); $block_nodes = array(); // Add the global styles block CSS. @@ -1470,6 +1473,7 @@ public function get_block_custom_css_nodes() { * @return string The global styles custom CSS for the block. */ public function get_block_custom_css( $css, $selector ) { + _deprecated_function( __METHOD__, 'Gutenberg 18.6.0', 'get_styles_for_block' ); return $this->process_blocks_custom_css( $css, $selector ); } diff --git a/lib/global-styles-and-settings.php b/lib/global-styles-and-settings.php index 4ceade6c7125b1..79c7028e32543e 100644 --- a/lib/global-styles-and-settings.php +++ b/lib/global-styles-and-settings.php @@ -144,6 +144,7 @@ function gutenberg_get_global_settings( $path = array(), $context = array() ) { * @return string */ function gutenberg_get_global_styles_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' ); // Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow. $can_use_cached = ! WP_DEBUG; $cache_key = 'gutenberg_get_global_custom_css'; @@ -177,6 +178,7 @@ function gutenberg_get_global_styles_custom_css() { * @return string The global base custom CSS. */ function gutenberg_get_global_styles_base_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_get_global_stylesheet' ); if ( ! wp_theme_has_theme_json() ) { return ''; } @@ -211,6 +213,7 @@ function gutenberg_get_global_styles_base_custom_css() { * @global WP_Styles $wp_styles */ function gutenberg_add_global_styles_block_custom_css() { + _deprecated_function( __FUNCTION__, 'Gutenberg 18.6.0', 'gutenberg_add_global_styles_for_blocks' ); global $wp_styles; if ( ! wp_theme_has_theme_json() || ! wp_should_load_separate_core_block_assets() ) { diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index bcf0d238400a08..59dcf07c040b52 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -4850,12 +4850,31 @@ public function test_get_top_level_background_image_styles() { $this->assertSame( $expected_styles, $theme_json->get_stylesheet(), 'Styles returned from "::get_stylesheet()" with top-level background image as string type does not match expectations' ); } - public function test_get_custom_css_handles_global_custom_css() { + /** + * Tests that base custom CSS is generated correctly. + */ + public function test_get_stylesheet_handles_base_custom_css() { + $theme_json = new WP_Theme_JSON_Gutenberg( + array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'styles' => array( + 'css' => 'body {color:purple;}', + ), + ) + ); + + $custom_css = 'body {color:purple;}'; + $this->assertSame( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) ); + } + + /** + * Tests that block custom CSS is generated correctly. + */ + public function test_get_styles_for_block_handles_block_custom_css() { $theme_json = new WP_Theme_JSON_Gutenberg( array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'styles' => array( - 'css' => 'body {color:purple;}', 'blocks' => array( 'core/paragraph' => array( 'css' => 'color:red;', @@ -4865,8 +4884,17 @@ public function test_get_custom_css_handles_global_custom_css() { ) ); - $custom_css = 'body {color:purple;}:root :where(p){color:red;}'; - $this->assertSame( $custom_css, $theme_json->get_custom_css() ); + $paragraph_node = array( + 'name' => 'core/paragraph', + 'path' => array( 'styles', 'blocks', 'core/paragraph' ), + 'selector' => 'p', + 'selectors' => array( + 'root' => 'p', + ), + ); + + $custom_css = ':root :where(p){color:red;}'; + $this->assertSame( $custom_css, $theme_json->get_styles_for_block( $paragraph_node ) ); } /** From 000d1c6864342fefac9fc296564596f4ae31c2f5 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 7 Jun 2024 11:57:47 +1000 Subject: [PATCH 3/5] Add backport ref --- backport-changelog/6.7/6750.md | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 backport-changelog/6.7/6750.md diff --git a/backport-changelog/6.7/6750.md b/backport-changelog/6.7/6750.md new file mode 100644 index 00000000000000..257ebe3a5aa698 --- /dev/null +++ b/backport-changelog/6.7/6750.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/6750 + +* https://github.com/WordPress/gutenberg/pull/62357 \ No newline at end of file From 01a0e429483e85245112219bb66f12a65063014b Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 12 Jun 2024 09:48:40 +1000 Subject: [PATCH 4/5] Don't output root custom CSS in `get_styles_for_block` --- lib/class-wp-theme-json-gutenberg.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index e39fdec8e6e440..f1e109741f7854 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -2867,7 +2867,7 @@ static function ( $pseudo_selector ) use ( $selector ) { } // 7. Generate and append any custom CSS rules. - if ( isset( $node['css'] ) ) { + if ( isset( $node['css'] ) && ! $is_root_selector ) { $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); } From 2dbc8aaafaf6195ab605dc68c58a726eb7312d57 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 13 Jun 2024 13:33:19 +1000 Subject: [PATCH 5/5] Update deprecated function docblocks. --- lib/class-wp-theme-json-gutenberg.php | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index f1e109741f7854..b00767dbf9abdb 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1405,6 +1405,7 @@ protected function process_blocks_custom_css( $css, $selector ) { * Returns the global styles custom css. * * @since 6.2.0 + * @deprecated 6.7.0 Use {@see 'get_stylesheet'} instead. * * @return string The global styles custom CSS. */ @@ -1422,8 +1423,7 @@ public function get_custom_css() { /** * Returns the global styles base custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return string The global styles base custom CSS. */ @@ -1434,8 +1434,7 @@ public function get_base_custom_css() { /** * Returns the block nodes with custom CSS. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @return array The block nodes. */ @@ -1464,8 +1463,7 @@ public function get_block_custom_css_nodes() { /** * Returns the global styles custom CSS for a single block. - * - * @since 6.6.0 + * This function is deprecated; please do not sync to core. * * @param array $css The block css node. * @param string $selector The block selector.