Changeset 59213

Timestamp:

10/10/2024 09:05:04 PM (6 months ago)

Author:

flixos90

Message:

Themes: Improve performance of applying background image styles in theme.json.

The cost of using WP_Theme_JSON::get_block_nodes() for this in its original shape was high enough to lead to a performance regression. Therefore this changeset introduces a new option on the method that allows to bypass all logic except for retrieving the node paths, which is much faster and everything that this functionality needs.

Follow up to [58936].

Props mukesh27, flixos90, ramonopoly, joemcgill, andrewserong, swissspidy.
Fixes #61858.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (5 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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

@@ -2691 +2691 @@
      * @since 6.3.0 Refactored and stabilized selectors API.
      * @since 6.6.0 Added optional selectors and options for generating block nodes.
+     * @since 6.7.0 Added $include_node_paths_only option.
      *
      * @param array $theme_json The theme.json converted to an array.
@@ -2697 +2698 @@
      *     Optional. An array of options for now used for internal purposes only (may change without notice).
      *
-     *     @type bool   $include_block_style_variations  Includes nodes for block style variations. Default false.
+     *     @type bool $include_block_style_variations Include nodes for block style variations. Default false.
+     *     @type bool $include_node_paths_only        Return only block nodes node paths. Default false.
      * }
      * @return array The block nodes in theme.json.
@@ -2713 +2715 @@
         }
 
+        $include_variations      = $options['include_block_style_variations'] ?? false;
+        $include_node_paths_only = $options['include_node_paths_only'] ?? false;
+
         foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
-            $selector = null;
-            if ( isset( $selectors[ $name ]['selector'] ) ) {
-                $selector = $selectors[ $name ]['selector'];
-            }
-
-            $duotone_selector = null;
-            if ( isset( $selectors[ $name ]['duotone'] ) ) {
-                $duotone_selector = $selectors[ $name ]['duotone'];
-            }
-
-            $feature_selectors = null;
-            if ( isset( $selectors[ $name ]['selectors'] ) ) {
-                $feature_selectors = $selectors[ $name ]['selectors'];
-            }
-
-            $variation_selectors = array();
-            $include_variations  = $options['include_block_style_variations'] ?? false;
-            if ( $include_variations && isset( $node['variations'] ) ) {
-                foreach ( $node['variations'] as $variation => $node ) {
-                    $variation_selectors[] = array(
-                        'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
-                        'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
-                    );
-                }
-            }
-
-            $nodes[] = array(
-                'name'       => $name,
-                'path'       => array( 'styles', 'blocks', $name ),
-                'selector'   => $selector,
-                'selectors'  => $feature_selectors,
-                'duotone'    => $duotone_selector,
-                'features'   => $feature_selectors,
-                'variations' => $variation_selectors,
-                'css'        => $selector,
-            );
+            $node_path = array( 'styles', 'blocks', $name );
+            if ( $include_node_paths_only ) {
+                $nodes[] = array(
+                    'path' => $node_path,
+                );
+            } else {
+                $selector = null;
+                if ( isset( $selectors[ $name ]['selector'] ) ) {
+                    $selector = $selectors[ $name ]['selector'];
+                }
+
+                $duotone_selector = null;
+                if ( isset( $selectors[ $name ]['duotone'] ) ) {
+                    $duotone_selector = $selectors[ $name ]['duotone'];
+                }
+
+                $feature_selectors = null;
+                if ( isset( $selectors[ $name ]['selectors'] ) ) {
+                    $feature_selectors = $selectors[ $name ]['selectors'];
+                }
+
+                $variation_selectors = array();
+                if ( $include_variations && isset( $node['variations'] ) ) {
+                    foreach ( $node['variations'] as $variation => $node ) {
+                        $variation_selectors[] = array(
+                            'path'     => array( 'styles', 'blocks', $name, 'variations', $variation ),
+                            'selector' => $selectors[ $name ]['styleVariations'][ $variation ],
+                        );
+                    }
+                }
+
+                $nodes[] = array(
+                    'name'       => $name,
+                    'path'       => $node_path,
+                    'selector'   => $selector,
+                    'selectors'  => $feature_selectors,
+                    'duotone'    => $duotone_selector,
+                    'features'   => $feature_selectors,
+                    'variations' => $variation_selectors,
+                    'css'        => $selector,
+                );
+            }
 
             if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
                 foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
+                    $node_path = array( 'styles', 'blocks', $name, 'elements', $element );
+                    if ( $include_node_paths_only ) {
+                        $nodes[] = array(
+                            'path' => $node_path,
+                        );
+                        continue;
+                    }
+
                     $nodes[] = array(
-                        'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+                        'path'     => $node_path,
                         'selector' => $selectors[ $name ]['elements'][ $element ],
                     );
@@ -2762 +2781 @@
                         foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
                             if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+                                $node_path = array( 'styles', 'blocks', $name, 'elements', $element );
+                                if ( $include_node_paths_only ) {
+                                    $nodes[] = array(
+                                        'path' => $node_path,
+                                    );
+                                    continue;
+                                }
+
                                 $nodes[] = array(
-                                    'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+                                    'path'     => $node_path,
                                     'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
                                 );
@@ -3237 +3264 @@
          * objects and represent unique definitions for the style.
          */
-        $style_nodes = static::get_styles_block_nodes();
+        $style_nodes = static::get_block_nodes(
+            $this->theme_json,
+            array(),
+            array( 'include_node_paths_only' => true )
+        );
         foreach ( $style_nodes as $style_node ) {
             $path = $style_node['path'];

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

@@ -2442 +2442 @@
 
         $this->assertEqualSetsWithIndex( $expected, $actual );
+    }
+
+    /**
+     * This test covers `get_block_nodes` with the `$include_node_paths_only` option.
+     * When `true`, `$include_node_paths_only` should return only the paths of the block nodes.
+     *
+     * @ticket 61858
+     */
+    public function test_return_block_node_paths() {
+        $theme_json = new ReflectionClass( 'WP_Theme_JSON' );
+
+        $func = $theme_json->getMethod( 'get_block_nodes' );
+        $func->setAccessible( true );
+
+        $theme_json = array(
+            'version' => WP_Theme_JSON::LATEST_SCHEMA,
+            'styles'  => array(
+                'typography' => array(
+                    'fontSize' => '16px',
+                ),
+                'blocks'     => array(
+                    'core/button' => array(
+                        'color' => array(
+                            'background' => 'red',
+                        ),
+                    ),
+                    'core/group'  => array(
+                        'elements' => array(
+                            'link' => array(
+                                'color' => array(
+                                    'background' => 'blue',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+        );
+
+        $block_nodes = $func->invoke( null, $theme_json, array(), array( 'include_node_paths_only' => true ) );
+
+        $expected = array(
+            array(
+                'path' => array( 'styles', 'blocks', 'core/button' ),
+            ),
+            array(
+                'path' => array( 'styles', 'blocks', 'core/group' ),
+            ),
+            array(
+                'path' => array( 'styles', 'blocks', 'core/group', 'elements', 'link' ),
+            ),
+        );
+
+        $this->assertEquals( $expected, $block_nodes );
     }