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.

Built from https://develop.svn.wordpress.org/trunk@56807


git-svn-id: http://core.svn.wordpress.org/trunk@56319 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/block-supports/elements.php

@@ -31,7 +31,7 @@ function wp_get_elements_class_name( $block ) {
  * @return string Filtered block content.
  */
 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;
 	}
 
@@ -41,42 +41,42 @@ function wp_render_elements_support( $block_content, $block ) {
 		'button'  => array(
 			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
 			'paths' => array(
-				'style.elements.button.color.text',
+				array( 'button', 'color', 'text' ),
-				'style.elements.button.color.background',
+				array( 'button', 'color', 'background' ),
-				'style.elements.button.color.gradient',
+				array( 'button', 'color', 'gradient' ),
 			),
 		),
 		'link'    => array(
 			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
 			'paths' => array(
-				'style.elements.link.color.text',
+				array( 'link', 'color', 'text' ),
-				'style.elements.link.:hover.color.text',
+				array( 'link', ':hover', 'color', 'text' ),
 			),
 		),
 		'heading' => array(
 			'skip'  => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
 			'paths' => array(
-				'style.elements.heading.color.text',
+				array( 'heading', 'color', 'text' ),
-				'style.elements.heading.color.background',
+				array( 'heading', 'color', 'background' ),
-				'style.elements.heading.color.gradient',
+				array( 'heading', 'color', 'gradient' ),
-				'style.elements.h1.color.text',
+				array( 'h1', 'color', 'text' ),
-				'style.elements.h1.color.background',
+				array( 'h1', 'color', 'background' ),
-				'style.elements.h1.color.gradient',
+				array( 'h1', 'color', 'gradient' ),
-				'style.elements.h2.color.text',
+				array( 'h2', 'color', 'text' ),
-				'style.elements.h2.color.background',
+				array( 'h2', 'color', 'background' ),
-				'style.elements.h2.color.gradient',
+				array( 'h2', 'color', 'gradient' ),
-				'style.elements.h3.color.text',
+				array( 'h3', 'color', 'text' ),
-				'style.elements.h3.color.background',
+				array( 'h3', 'color', 'background' ),
-				'style.elements.h3.color.gradient',
+				array( 'h3', 'color', 'gradient' ),
-				'style.elements.h4.color.text',
+				array( 'h4', 'color', 'text' ),
-				'style.elements.h4.color.background',
+				array( 'h4', 'color', 'background' ),
-				'style.elements.h4.color.gradient',
+				array( 'h4', 'color', 'gradient' ),
-				'style.elements.h5.color.text',
+				array( 'h5', 'color', 'text' ),
-				'style.elements.h5.color.background',
+				array( 'h5', 'color', 'background' ),
-				'style.elements.h5.color.gradient',
+				array( 'h5', 'color', 'gradient' ),
-				'style.elements.h6.color.text',
+				array( 'h6', 'color', 'text' ),
-				'style.elements.h6.color.background',
+				array( 'h6', 'color', 'background' ),
-				'style.elements.h6.color.gradient',
+				array( 'h6', 'color', 'gradient' ),
 			),
 		),
 	);
@@ -89,7 +89,7 @@ function wp_render_elements_support( $block_content, $block ) {
 		return $block_content;
 	}
 
-	$element_colors_set = 0;
+	$elements_style_attributes = $block['attrs']['style']['elements'];
 
 	foreach ( $element_color_properties as $element_config ) {
 		if ( $element_config['skip'] ) {
@@ -97,18 +97,16 @@ function wp_render_elements_support( $block_content, $block ) {
 		}
 
 		foreach ( $element_config['paths'] as $path ) {
-			if ( null !== _wp_array_get( $block['attrs'], explode( '.', $path ), null ) ) {
+			if ( null !== _wp_array_get( $elements_style_attributes, $path, null ) ) {
-				++$element_colors_set;
+				/*
-			}
+				 * 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.
-
+				 *
-	if ( ! $element_colors_set ) {
+				 * As is done with the layout hook, this code assumes that the block
-		return $block_content;
+				 * contains a single wrapper and that it's the first element in the
-	}
+				 * rendered output. That first element, if it exists, gets the class.
-
+				 */
-	// 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 ) );
@@ -116,6 +114,12 @@ function wp_render_elements_support( $block_content, $block ) {
 
 				return $tags->get_updated_html();
 			}
+		}
+	}
+
+	// If no custom attributes were found then there's nothing to modify.
+	return $block_content;
+}
 
 /**
  * Renders the elements stylesheet.

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.4-beta2-56806';
+$wp_version = '6.4-beta2-56807';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.