Changeset 56807 for trunk/src/wp-includes/block-supports/elements.php

Timestamp:

10/09/2023 05:05:31 PM (14 months ago)

Author:

flixos90

Message:

Editor: Improve performance of wp_render_elements_support().

By skipping iterations in block supports when not necessary, this changeset improves performance of the function notably.

The performance enhancement leads to even a notable improvement for overall page load time: For example, the Twenty Twenty-Four home page loads ~2% faster with this changeset.

Props dmsnell, spacedmonkey, costdev, hellofromTonya, aaronrobertshaw.
Fixes #59544.

File:

• trunk/src/wp-includes/block-supports/elements.php (modified) (6 diffs)

trunk/src/wp-includes/block-supports/elements.php

@@ -32 +32 @@
  */
 function wp_render_elements_support( $block_content, $block ) {
-    if ( ! $block_content || empty( $block['attrs'] ) ) {
+    if ( ! $block_content || ! isset( $block['attrs']['style']['elements'] ) ) {
         return $block_content;
     }
@@ -42 +42 @@
             'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
             'paths' => array(
-                'style.elements.button.color.text',
-                'style.elements.button.color.background',
-                'style.elements.button.color.gradient',
+                array( 'button', 'color', 'text' ),
+                array( 'button', 'color', 'background' ),
+                array( 'button', 'color', 'gradient' ),
             ),
         ),
@@ -50 +50 @@
             'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
             'paths' => array(
-                'style.elements.link.color.text',
-                'style.elements.link.:hover.color.text',
+                array( 'link', 'color', 'text' ),
+                array( 'link', ':hover', 'color', 'text' ),
             ),
         ),
@@ -57 +57 @@
             'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
             'paths' => array(
-                'style.elements.heading.color.text',
-                'style.elements.heading.color.background',
-                'style.elements.heading.color.gradient',
-                'style.elements.h1.color.text',
-                'style.elements.h1.color.background',
-                'style.elements.h1.color.gradient',
-                'style.elements.h2.color.text',
-                'style.elements.h2.color.background',
-                'style.elements.h2.color.gradient',
-                'style.elements.h3.color.text',
-                'style.elements.h3.color.background',
-                'style.elements.h3.color.gradient',
-                'style.elements.h4.color.text',
-                'style.elements.h4.color.background',
-                'style.elements.h4.color.gradient',
-                'style.elements.h5.color.text',
-                'style.elements.h5.color.background',
-                'style.elements.h5.color.gradient',
-                'style.elements.h6.color.text',
-                'style.elements.h6.color.background',
-                'style.elements.h6.color.gradient',
+                array( 'heading', 'color', 'text' ),
+                array( 'heading', 'color', 'background' ),
+                array( 'heading', 'color', 'gradient' ),
+                array( 'h1', 'color', 'text' ),
+                array( 'h1', 'color', 'background' ),
+                array( 'h1', 'color', 'gradient' ),
+                array( 'h2', 'color', 'text' ),
+                array( 'h2', 'color', 'background' ),
+                array( 'h2', 'color', 'gradient' ),
+                array( 'h3', 'color', 'text' ),
+                array( 'h3', 'color', 'background' ),
+                array( 'h3', 'color', 'gradient' ),
+                array( 'h4', 'color', 'text' ),
+                array( 'h4', 'color', 'background' ),
+                array( 'h4', 'color', 'gradient' ),
+                array( 'h5', 'color', 'text' ),
+                array( 'h5', 'color', 'background' ),
+                array( 'h5', 'color', 'gradient' ),
+                array( 'h6', 'color', 'text' ),
+                array( 'h6', 'color', 'background' ),
+                array( 'h6', 'color', 'gradient' ),
             ),
         ),
@@ -90 +90 @@
     }
 
-    $element_colors_set = 0;
+    $elements_style_attributes = $block['attrs']['style']['elements'];
 
     foreach ( $element_color_properties as $element_config ) {
@@ -98 +98 @@
 
         foreach ( $element_config['paths'] as $path ) {
-            if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
-                ++$element_colors_set;
+            if ( null !== _wp_array_get( $elements_style_attributes, $path, null ) ) {
+                /*
+                 * It only takes a single custom attribute to require that the custom
+                 * class name be added to the block, so once one is found there's no
+                 * need to continue looking for others.
+                 *
+                 * As is done with the layout hook, this code assumes that the block
+                 * contains a single wrapper and that it's the first element in the
+                 * rendered output. That first element, if it exists, gets the class.
+                 */
+                $tags = new WP_HTML_Tag_Processor( $block_content );
+                if ( $tags->next_tag() ) {
+                    $tags->add_class( wp_get_elements_class_name( $block ) );
+                }
+
+                return $tags->get_updated_html();
             }
         }
     }
 
-    if ( ! $element_colors_set ) {
-        return $block_content;
-    }
-
-    // Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
-    // Add the class name to the first element, presuming it's the wrapper, if it exists.
-    $tags = new WP_HTML_Tag_Processor( $block_content );
-    if ( $tags->next_tag() ) {
-        $tags->add_class( wp_get_elements_class_name( $block ) );
-    }
-
-    return $tags->get_updated_html();
+    // If no custom attributes were found then there's nothing to modify.
+    return $block_content;
 }