Changeset 58703

Timestamp:

07/10/2024 06:17:44 AM (10 months ago)

Author:

isabel_brison

Message:

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.

Location:

trunk

Files:

• src/wp-includes/block-editor.php (modified) (1 diff)
• src/wp-includes/class-wp-theme-json.php (modified) (4 diffs)
• src/wp-includes/default-filters.php (modified) (1 diff)
• src/wp-includes/deprecated.php (modified) (1 diff)
• src/wp-includes/global-styles-and-settings.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (2 diffs)

trunk/src/wp-includes/block-editor.php

@@ -533 +533 @@
          */
         $global_styles[] = array(
-            'css'            => wp_get_global_styles_custom_css(),
+            'css'            => wp_get_global_stylesheet( array( 'custom-css' ) ),
             '__unstableType' => 'user',
             'isGlobalStyles' => true,

trunk/src/wp-includes/class-wp-theme-json.php

@@ -1424 +1424 @@
         }
 
+        // 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;
     }
@@ -1468 +1474 @@
      *
      * @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'] : '';
@@ -2693 +2701 @@
                 'features'   => $feature_selectors,
                 'variations' => $variation_selectors,
+                'css'        => $selector,
             );
 
@@ -2909 +2918 @@
         }
 
-        // 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 );

trunk/src/wp-includes/default-filters.php

@@ -601 +601 @@
 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' );

trunk/src/wp-includes/deprecated.php

@@ -6311 +6311 @@
     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 );
+    }
+}

trunk/src/wp-includes/global-styles-and-settings.php

@@ -237 +237 @@
 
     $stylesheet = $styles_variables . $styles_rest;
-    if ( $can_use_cached ) {
-        wp_cache_set( $cache_key, $stylesheet, $cache_group );
-    }
-
-    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 );

trunk/src/wp-includes/script-loader.php

@@ -2505 +2505 @@
     $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;
@@ -2515 +2529 @@
     // Add each block as an inline css.
     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 );
-    }
 }
 

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -5036 +5036 @@
 
     /**
-     * @ticket 57536
-     * @ticket 61165
-     */
-    public function test_get_custom_css_handles_global_custom_css() {
+     * Tests that base custom CSS is generated correctly.
+     *
+     * @ticket 61395
+     */
+    public function test_get_stylesheet_handles_base_custom_css() {
         $theme_json = new WP_Theme_JSON(
             array(
                 'version' => WP_Theme_JSON::LATEST_SCHEMA,
                 'styles'  => array(
-                    'css'    => 'body {color:purple;}',
+                    '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.
+     *
+     * @ticket 61395
+     */
+    public function test_get_styles_for_block_handles_block_custom_css() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
                     'blocks' => array(
                         'core/paragraph' => array(
@@ -5054 +5073 @@
         );
 
-        $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 ) );
     }