From ccc46f8ada28a63e3916100b633cecda7d45fbd0 Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Wed, 10 Jul 2024 06:19:17 +0000 Subject: [PATCH] Editor: enqueue block custom CSS only when block renders on the page. Updates the global styles custom CSS handling logic to be consistent with other global styles and take advantage of conditional enqueuing of block styles. Props isabel_brison, aaronrobertshaw, andrewserong. Fixes #61395. Built from https://develop.svn.wordpress.org/trunk@58703 git-svn-id: http://core.svn.wordpress.org/trunk@58105 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-editor.php | 2 +- wp-includes/class-wp-theme-json.php | 11 +++- wp-includes/default-filters.php | 3 - wp-includes/deprecated.php | 77 ++++++++++++++++++++++ wp-includes/global-styles-and-settings.php | 52 --------------- wp-includes/script-loader.php | 35 ++++------ wp-includes/version.php | 2 +- 7 files changed, 103 insertions(+), 79 deletions(-) diff --git a/wp-includes/block-editor.php b/wp-includes/block-editor.php index fdc4846f69..00633d4d7e 100644 --- a/wp-includes/block-editor.php +++ b/wp-includes/block-editor.php @@ -532,7 +532,7 @@ function get_block_editor_settings( array $custom_settings, $block_editor_contex * entered by users does not break other global styles. */ $global_styles[] = array( - 'css' => wp_get_global_styles_custom_css(), + 'css' => wp_get_global_stylesheet( array( 'custom-css' ) ), '__unstableType' => 'user', 'isGlobalStyles' => true, ); diff --git a/wp-includes/class-wp-theme-json.php b/wp-includes/class-wp-theme-json.php index 0cd90575a5..90de255c82 100644 --- a/wp-includes/class-wp-theme-json.php +++ b/wp-includes/class-wp-theme-json.php @@ -1423,6 +1423,12 @@ class WP_Theme_JSON { $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; } @@ -1467,10 +1473,12 @@ class WP_Theme_JSON { * 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. */ public function get_custom_css() { + _deprecated_function( __METHOD__, '6.7.0', 'get_stylesheet' ); // Add the global styles root CSS. $stylesheet = isset( $this->theme_json['styles']['css'] ) ? $this->theme_json['styles']['css'] : ''; @@ -2692,6 +2700,7 @@ class WP_Theme_JSON { 'duotone' => $duotone_selector, 'features' => $feature_selectors, 'variations' => $variation_selectors, + 'css' => $selector, ); if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) { @@ -2908,7 +2917,7 @@ class WP_Theme_JSON { } } - // 7. Generate and append any custom CSS rules pertaining to nested block style variations. + // 7. Generate and append any custom CSS rules. if ( isset( $node['css'] ) && ! $is_root_selector ) { $block_rules .= $this->process_blocks_custom_css( $node['css'], $selector ); } diff --git a/wp-includes/default-filters.php b/wp-includes/default-filters.php index 2c182747a5..6fba4441d5 100644 --- a/wp-includes/default-filters.php +++ b/wp-includes/default-filters.php @@ -600,9 +600,6 @@ add_filter( 'block_editor_settings_all', 'wp_add_editor_classic_theme_styles' ); add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' ); add_action( 'wp_footer', 'wp_enqueue_global_styles', 1 ); -// Global styles custom CSS. -add_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles_custom_css' ); - // 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 ); diff --git a/wp-includes/deprecated.php b/wp-includes/deprecated.php index 8084cdd96c..457b7fc136 100644 --- a/wp-includes/deprecated.php +++ b/wp-includes/deprecated.php @@ -6310,3 +6310,80 @@ function wp_interactivity_process_directives_of_interactive_blocks( array $parse _deprecated_function( __FUNCTION__, '6.6.0' ); return $parsed_block; } + +/** + * Gets the global styles custom CSS from theme.json. + * + * @since 6.2.0 + * @deprecated 6.7.0 Use {@see 'wp_get_global_stylesheet'} instead. + * + * @return string The global styles custom CSS. + */ +function wp_get_global_styles_custom_css() { + _deprecated_function( __FUNCTION__, '6.7.0', 'wp_get_global_stylesheet' ); + if ( ! wp_theme_has_theme_json() ) { + return ''; + } + /* + * Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme + * developer's workflow. + */ + $can_use_cached = ! wp_is_development_mode( 'theme' ); + + /* + * By using the 'theme_json' group, this data is marked to be non-persistent across requests. + * @see `wp_cache_add_non_persistent_groups()`. + * + * The rationale for this is to make sure derived data from theme.json + * 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 behavior: + * @see https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/ + * + * A different alternative considered was to invalidate the cache upon certain + * events such as options add/update/delete, user meta, etc. + * It was judged not enough, hence this approach. + * @see https://github.com/WordPress/gutenberg/pull/45372 + */ + $cache_key = 'wp_get_global_styles_custom_css'; + $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::get_merged_data(); + $stylesheet = $tree->get_custom_css(); + + if ( $can_use_cached ) { + wp_cache_set( $cache_key, $stylesheet, $cache_group ); + } + + return $stylesheet; +} + +/** + * Enqueues the global styles custom css defined via theme.json. + * + * @since 6.2.0 + * @deprecated 6.7.0 Use {@see 'wp_enqueue_global_styles'} instead. + */ +function wp_enqueue_global_styles_custom_css() { + _deprecated_function( __FUNCTION__, '6.7.0', 'wp_enqueue_global_styles' ); + if ( ! wp_is_block_theme() ) { + return; + } + + // Don't enqueue Customizer's custom CSS separately. + remove_action( 'wp_head', 'wp_custom_css_cb', 101 ); + + $custom_css = wp_get_custom_css(); + $custom_css .= wp_get_global_styles_custom_css(); + + if ( ! empty( $custom_css ) ) { + wp_add_inline_style( 'global-styles', $custom_css ); + } +} diff --git a/wp-includes/global-styles-and-settings.php b/wp-includes/global-styles-and-settings.php index b413273a64..efa68ce36b 100644 --- a/wp-includes/global-styles-and-settings.php +++ b/wp-includes/global-styles-and-settings.php @@ -243,58 +243,6 @@ function wp_get_global_stylesheet( $types = array() ) { return $stylesheet; } -/** - * Gets the global styles custom CSS from theme.json. - * - * @since 6.2.0 - * - * @return string The global styles custom CSS. - */ -function wp_get_global_styles_custom_css() { - if ( ! wp_theme_has_theme_json() ) { - return ''; - } - /* - * Ignore cache when the development mode is set to 'theme', so it doesn't interfere with the theme - * developer's workflow. - */ - $can_use_cached = ! wp_is_development_mode( 'theme' ); - - /* - * By using the 'theme_json' group, this data is marked to be non-persistent across requests. - * @see `wp_cache_add_non_persistent_groups()`. - * - * The rationale for this is to make sure derived data from theme.json - * 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 behavior: - * @see https://make.wordpress.org/core/2022/10/10/filters-for-theme-json-data/ - * - * A different alternative considered was to invalidate the cache upon certain - * events such as options add/update/delete, user meta, etc. - * It was judged not enough, hence this approach. - * @see https://github.com/WordPress/gutenberg/pull/45372 - */ - $cache_key = 'wp_get_global_styles_custom_css'; - $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::get_merged_data(); - $stylesheet = $tree->get_custom_css(); - - if ( $can_use_cached ) { - wp_cache_set( $cache_key, $stylesheet, $cache_group ); - } - - return $stylesheet; -} - /** * Adds global style rules to the inline style for each block. * diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php index 715477ad8e..b7da065ad1 100644 --- a/wp-includes/script-loader.php +++ b/wp-includes/script-loader.php @@ -2504,6 +2504,20 @@ function wp_enqueue_global_styles() { $stylesheet = wp_get_global_stylesheet(); + if ( $is_block_theme ) { + /* + * Dequeue the Customizer's custom CSS + * and add it before the global styles custom CSS. + */ + 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; + + // Add the global styles custom CSS at the end. + $stylesheet .= wp_get_global_stylesheet( array( 'custom-css' ) ); + } + if ( empty( $stylesheet ) ) { return; } @@ -2516,27 +2530,6 @@ function wp_enqueue_global_styles() { wp_add_global_styles_for_blocks(); } -/** - * Enqueues the global styles custom css defined via theme.json. - * - * @since 6.2.0 - */ -function wp_enqueue_global_styles_custom_css() { - if ( ! wp_is_block_theme() ) { - return; - } - - // Don't enqueue Customizer's custom CSS separately. - remove_action( 'wp_head', 'wp_custom_css_cb', 101 ); - - $custom_css = wp_get_custom_css(); - $custom_css .= wp_get_global_styles_custom_css(); - - if ( ! empty( $custom_css ) ) { - wp_add_inline_style( '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/wp-includes/version.php b/wp-includes/version.php index eb8deaade7..a06c5afd14 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.7-alpha-58702'; +$wp_version = '6.7-alpha-58703'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.