From c7787b0b3026117230bbff1622419187f99c6303 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 25 Jan 2023 13:08:16 +1300 Subject: [PATCH 1/7] Move custom css to its on inline style at bottom of header --- lib/class-wp-theme-json-gutenberg.php | 6 +++++- lib/compat/wordpress-6.1/script-loader.php | 11 +++++++++++ .../wordpress-6.2/get-global-styles-and-settings.php | 10 ++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index e3b92aca2f9e5..6db0b7847704f 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1084,7 +1084,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' // 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' ) ); + //$stylesheet .= _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); // Add the global styles block CSS. if ( isset( $this->theme_json['styles']['blocks'] ) ) { @@ -1100,6 +1100,10 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' return $stylesheet; } + + public function get_custom_css() { + return _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + } /** * Returns the page templates of the active theme. * diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index 2bb9edd2a204d..244494a6844e1 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -73,6 +73,16 @@ function gutenberg_enqueue_global_styles() { gutenberg_add_global_styles_for_blocks(); } +function gutenberg_enqueue_global_styles_custom_css(){ + $custom_css = get_global_styles_custom_css(); + $is_block_theme = wp_is_block_theme(); + if ( $custom_css && $is_block_theme ) { + wp_register_style( 'global-styles-custom-css', false, array(), true, true ); + wp_add_inline_style( 'global-styles-custom-css', $custom_css ); + wp_enqueue_style( 'global-styles-custom-css' ); + } +} + remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 ); remove_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles_assets' ); @@ -81,6 +91,7 @@ function gutenberg_enqueue_global_styles() { // Enqueue global styles, and then block supports styles. add_action( 'wp_enqueue_scripts', 'gutenberg_enqueue_global_styles' ); add_action( 'wp_footer', 'gutenberg_enqueue_global_styles', 1 ); +add_action( 'wp_head', 'gutenberg_enqueue_global_styles_custom_css', 102 ); /** * Loads classic theme styles on classic themes in the frontend. diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index 86199807081ec..1f6262532bdfb 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -59,6 +59,16 @@ function wp_theme_has_theme_json_clean_cache() { } } +function get_global_styles_custom_css(){ + $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); + $supports_theme_json = wp_theme_has_theme_json(); + + if ( ! $supports_theme_json ) { + return; + } + + return $tree->get_custom_css(); +} /** * Returns the stylesheet resulting of merging core, theme, and user data. * From c2ecf7384d3d05070912ae6e39820a0f1c853738 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 25 Jan 2023 14:15:28 +1300 Subject: [PATCH 2/7] Fix linting issues --- lib/class-wp-theme-json-gutenberg.php | 9 ++++++++- lib/compat/wordpress-6.1/script-loader.php | 7 ++++++- .../wordpress-6.2/get-global-styles-and-settings.php | 8 +++++++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 6db0b7847704f..1cc5958c2170c 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1084,7 +1084,6 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' // 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' ) ); // Add the global styles block CSS. if ( isset( $this->theme_json['styles']['blocks'] ) ) { @@ -1101,9 +1100,17 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' return $stylesheet; } + /** + * Returns the global styles custom css. + * + * @since 6.2.0 + * + * @return string + */ public function get_custom_css() { return _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); } + /** * Returns the page templates of the active theme. * diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index 244494a6844e1..fd4312cc4bc91 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -73,7 +73,12 @@ function gutenberg_enqueue_global_styles() { gutenberg_add_global_styles_for_blocks(); } -function gutenberg_enqueue_global_styles_custom_css(){ +/** + * Enqueues the global styles custom css. + * + * @since 6.2.0 + */ +function gutenberg_enqueue_global_styles_custom_css() { $custom_css = get_global_styles_custom_css(); $is_block_theme = wp_is_block_theme(); if ( $custom_css && $is_block_theme ) { diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index 1f6262532bdfb..57eb67ecc9594 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -59,7 +59,12 @@ function wp_theme_has_theme_json_clean_cache() { } } -function get_global_styles_custom_css(){ +/** + * Gets the global styles custom css from theme.json. + * + * @return string + */ +function get_global_styles_custom_css() { $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); $supports_theme_json = wp_theme_has_theme_json(); @@ -69,6 +74,7 @@ function get_global_styles_custom_css(){ return $tree->get_custom_css(); } + /** * Returns the stylesheet resulting of merging core, theme, and user data. * From d8debd6b4007bbaf75f876b95903b3390f7c609d Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 26 Jan 2023 09:52:27 +1300 Subject: [PATCH 3/7] Also move block custom CSS to separate stylesheet --- lib/class-wp-theme-json-gutenberg.php | 32 ++++++++----------- .../wordpress-6.2/block-editor-settings.php | 2 +- .../get-global-styles-and-settings.php | 25 ++++++++++++--- 3 files changed, 36 insertions(+), 23 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 1cc5958c2170c..a67964ba34517 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -988,7 +988,6 @@ public function process_blocks_custom_css( $css, $selector ) { * - `variables`: only the CSS Custom Properties for presets & custom ones. * - `styles`: only the styles section in theme.json. * - `presets`: only the classes for the presets. - * - `custom-css`: only the css from global styles.css. * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS. * @param array $options An array of options for now used for internal purposes only (may change without notice). * The options currently supported are 'scope' that makes sure all style are scoped to a given selector, @@ -1081,22 +1080,6 @@ 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. - - // Add the global styles block CSS. - if ( isset( $this->theme_json['styles']['blocks'] ) ) { - foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) { - $custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) ); - if ( $custom_block_css ) { - $selector = static::$blocks_metadata[ $name ]['selector']; - $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); - } - } - } - } - return $stylesheet; } @@ -1108,7 +1091,20 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' * @return string */ public function get_custom_css() { - return _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + // Add the global styles root CSS. + $stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + + // Add the global styles block CSS. + if ( isset( $this->theme_json['styles']['blocks'] ) ) { + foreach ( $this->theme_json['styles']['blocks'] as $name => $node ) { + $custom_block_css = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $name, 'css' ) ); + if ( $custom_block_css ) { + $selector = static::$blocks_metadata[ $name ]['selector']; + $stylesheet .= $this->process_blocks_custom_css( $custom_block_css, $selector ); + } + } + } + return $stylesheet; } /** diff --git a/lib/compat/wordpress-6.2/block-editor-settings.php b/lib/compat/wordpress-6.2/block-editor-settings.php index 7323d34eb667c..b2eebb572e20f 100644 --- a/lib/compat/wordpress-6.2/block-editor-settings.php +++ b/lib/compat/wordpress-6.2/block-editor-settings.php @@ -16,7 +16,7 @@ function gutenberg_get_block_editor_settings_6_2( $settings ) { if ( wp_theme_has_theme_json() ) { // Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles. $settings['styles'][] = array( - 'css' => gutenberg_get_global_stylesheet( array( 'custom-css' ) ), + 'css' => get_global_styles_custom_css(), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index 57eb67ecc9594..74632d49a3257 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -65,6 +65,17 @@ function wp_theme_has_theme_json_clean_cache() { * @return string */ function get_global_styles_custom_css() { + // Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow. + $can_use_cached = empty( $types ) && ! WP_DEBUG; + $cache_key = 'gutenberg_get_global_custom_css_stylesheet'; + $cache_group = 'theme_json'; + if ( $can_use_cached ) { + $cached = wp_cache_get( $cache_key, $cache_group ); + if ( $cached ) { + return $cached; + } + } + $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); $supports_theme_json = wp_theme_has_theme_json(); @@ -72,17 +83,23 @@ function get_global_styles_custom_css() { return; } - return $tree->get_custom_css(); + $stylesheet = $tree->get_custom_css(); + + if ( $can_use_cached ) { + wp_cache_set( $cache_key, $stylesheet, $cache_group ); + } + + return $stylesheet; } /** * Returns the stylesheet resulting of merging core, theme, and user data. * * @param array $types Types of styles to load. Optional. - * It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles, and 'custom-css'. + * It accepts as values: 'variables', 'presets', 'styles', 'base-layout-styles. * If empty, it'll load the following: * - for themes without theme.json: 'variables', 'presets', 'base-layout-styles'. - * - for themes with theme.json: 'variables', 'presets', 'styles', 'custom-css'. + * - for themes with theme.json: 'variables', 'presets', 'styles'. * * @return string Stylesheet. */ @@ -102,7 +119,7 @@ function gutenberg_get_global_stylesheet( $types = array() ) { if ( empty( $types ) && ! $supports_theme_json ) { $types = array( 'variables', 'presets', 'base-layout-styles' ); } elseif ( empty( $types ) ) { - $types = array( 'variables', 'presets', 'styles', 'custom-css' ); + $types = array( 'variables', 'presets', 'styles' ); } /* From f0597dcd61e5ed32f77b6befc29987914d27c04b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 26 Jan 2023 10:40:24 +1300 Subject: [PATCH 4/7] Update test --- phpunit/class-wp-theme-json-test.php | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/phpunit/class-wp-theme-json-test.php b/phpunit/class-wp-theme-json-test.php index d3f745b1779e4..fc118f5bb34bf 100644 --- a/phpunit/class-wp-theme-json-test.php +++ b/phpunit/class-wp-theme-json-test.php @@ -1615,18 +1615,23 @@ public function test_update_separator_declarations() { } - public function test_get_stylesheet_handles_custom_css() { + public function test_get_custom_css_handles_global_custom_css() { $theme_json = new WP_Theme_JSON_Gutenberg( array( 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, 'styles' => array( - 'css' => 'body { color:purple; }', + 'css' => 'body {color:purple;}', + 'blocks' => array( + 'core/paragraph' => array( + 'css' => 'color:red;', + ), + ), ), ) ); - $custom_css = 'body { color:purple; }'; - $this->assertEquals( $custom_css, $theme_json->get_stylesheet( array( 'custom-css' ) ) ); + $custom_css = 'body {color:purple;}p{color:red;}'; + $this->assertEquals( $custom_css, $theme_json->get_custom_css() ); } /** From f67ba8c9b65f803a5b6acef3d99c6ab65ed55d1c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 26 Jan 2023 11:27:46 +1300 Subject: [PATCH 5/7] Switch from `wp_enqueue_style` to just outputting the style tags in order to get the output in the correct place after the customizer css --- lib/compat/wordpress-6.1/script-loader.php | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index fd4312cc4bc91..96617b0ec3a29 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -82,9 +82,11 @@ function gutenberg_enqueue_global_styles_custom_css() { $custom_css = get_global_styles_custom_css(); $is_block_theme = wp_is_block_theme(); if ( $custom_css && $is_block_theme ) { - wp_register_style( 'global-styles-custom-css', false, array(), true, true ); - wp_add_inline_style( 'global-styles-custom-css', $custom_css ); - wp_enqueue_style( 'global-styles-custom-css' ); + ?> + + Date: Fri, 27 Jan 2023 10:11:22 +1300 Subject: [PATCH 6/7] Move to 6.2 script-loader compat file --- lib/compat/wordpress-6.1/script-loader.php | 18 ------------------ lib/compat/wordpress-6.2/script-loader.php | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/lib/compat/wordpress-6.1/script-loader.php b/lib/compat/wordpress-6.1/script-loader.php index 96617b0ec3a29..2bb9edd2a204d 100644 --- a/lib/compat/wordpress-6.1/script-loader.php +++ b/lib/compat/wordpress-6.1/script-loader.php @@ -73,23 +73,6 @@ function gutenberg_enqueue_global_styles() { gutenberg_add_global_styles_for_blocks(); } -/** - * Enqueues the global styles custom css. - * - * @since 6.2.0 - */ -function gutenberg_enqueue_global_styles_custom_css() { - $custom_css = get_global_styles_custom_css(); - $is_block_theme = wp_is_block_theme(); - if ( $custom_css && $is_block_theme ) { - ?> - - + + Date: Tue, 31 Jan 2023 16:00:37 +0400 Subject: [PATCH 7/7] Global Styles: Alternative method for enqueueing custom CSS (#47554) * Update enqueuing method * Minor updates to get_global_styles_custom_css * Always return string --- lib/class-wp-theme-json-gutenberg.php | 2 +- .../wordpress-6.2/block-editor-settings.php | 2 +- .../get-global-styles-and-settings.php | 17 +++++++------- lib/compat/wordpress-6.2/script-loader.php | 23 +++++++++++-------- 4 files changed, 23 insertions(+), 21 deletions(-) diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index a67964ba34517..1ee24f86969ba 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -1092,7 +1092,7 @@ public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' */ public function get_custom_css() { // Add the global styles root CSS. - $stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ) ); + $stylesheet = _wp_array_get( $this->theme_json, array( 'styles', 'css' ), '' ); // Add the global styles block CSS. if ( isset( $this->theme_json['styles']['blocks'] ) ) { diff --git a/lib/compat/wordpress-6.2/block-editor-settings.php b/lib/compat/wordpress-6.2/block-editor-settings.php index b2eebb572e20f..2fd8dc1e2f6bb 100644 --- a/lib/compat/wordpress-6.2/block-editor-settings.php +++ b/lib/compat/wordpress-6.2/block-editor-settings.php @@ -16,7 +16,7 @@ function gutenberg_get_block_editor_settings_6_2( $settings ) { if ( wp_theme_has_theme_json() ) { // Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles. $settings['styles'][] = array( - 'css' => get_global_styles_custom_css(), + 'css' => gutenberg_get_global_styles_custom_css(), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php index 74632d49a3257..e02a0466a0b98 100644 --- a/lib/compat/wordpress-6.2/get-global-styles-and-settings.php +++ b/lib/compat/wordpress-6.2/get-global-styles-and-settings.php @@ -64,10 +64,10 @@ function wp_theme_has_theme_json_clean_cache() { * * @return string */ -function get_global_styles_custom_css() { +function gutenberg_get_global_styles_custom_css() { // Ignore cache when `WP_DEBUG` is enabled, so it doesn't interfere with the theme developers workflow. - $can_use_cached = empty( $types ) && ! WP_DEBUG; - $cache_key = 'gutenberg_get_global_custom_css_stylesheet'; + $can_use_cached = ! WP_DEBUG; + $cache_key = 'gutenberg_get_global_custom_css'; $cache_group = 'theme_json'; if ( $can_use_cached ) { $cached = wp_cache_get( $cache_key, $cache_group ); @@ -76,20 +76,18 @@ function get_global_styles_custom_css() { } } - $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); - $supports_theme_json = wp_theme_has_theme_json(); - - if ( ! $supports_theme_json ) { - return; + if ( ! wp_theme_has_theme_json() ) { + return ''; } + $tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data(); $stylesheet = $tree->get_custom_css(); if ( $can_use_cached ) { wp_cache_set( $cache_key, $stylesheet, $cache_group ); } - return $stylesheet; + return $stylesheet; } /** @@ -227,6 +225,7 @@ function _gutenberg_clean_theme_json_caches() { wp_cache_delete( 'gutenberg_get_global_stylesheet', 'theme_json' ); wp_cache_delete( 'gutenberg_get_global_settings_custom', 'theme_json' ); wp_cache_delete( 'gutenberg_get_global_settings_theme', 'theme_json' ); + wp_cache_delete( 'gutenberg_get_global_custom_css', 'theme_json' ); WP_Theme_JSON_Resolver_Gutenberg::clean_cached_data(); } diff --git a/lib/compat/wordpress-6.2/script-loader.php b/lib/compat/wordpress-6.2/script-loader.php index 5f72151bd7816..05c2019cbd4f6 100644 --- a/lib/compat/wordpress-6.2/script-loader.php +++ b/lib/compat/wordpress-6.2/script-loader.php @@ -174,15 +174,18 @@ function( $settings ) { * @since 6.2.0 */ function gutenberg_enqueue_global_styles_custom_css() { - $custom_css = get_global_styles_custom_css(); - $is_block_theme = wp_is_block_theme(); - if ( $custom_css && $is_block_theme ) { - ?> - -