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
This commit is contained in:
Felix Arntz 2023-10-09 17:07:22 +00:00
parent 5ba13b5683
commit d783a65dd9
2 changed files with 47 additions and 43 deletions

View File

@ -31,7 +31,7 @@ function wp_get_elements_class_name( $block ) {
* @return string Filtered block content. * @return string Filtered block content.
*/ */
function wp_render_elements_support( $block_content, $block ) { 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; return $block_content;
} }
@ -41,42 +41,42 @@ function wp_render_elements_support( $block_content, $block ) {
'button' => array( 'button' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ), 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'button' ),
'paths' => array( '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( 'link' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ), 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' ),
'paths' => array( 'paths' => array(
'style.elements.link.color.text', array( 'link', 'color', 'text' ),
'style.elements.link.:hover.color.text', array( 'link', ':hover', 'color', 'text' ),
), ),
), ),
'heading' => array( 'heading' => array(
'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ), 'skip' => wp_should_skip_block_supports_serialization( $block_type, 'color', 'heading' ),
'paths' => array( '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; return $block_content;
} }
$element_colors_set = 0; $elements_style_attributes = $block['attrs']['style']['elements'];
foreach ( $element_color_properties as $element_config ) { foreach ( $element_color_properties as $element_config ) {
if ( $element_config['skip'] ) { if ( $element_config['skip'] ) {
@ -97,24 +97,28 @@ function wp_render_elements_support( $block_content, $block ) {
} }
foreach ( $element_config['paths'] as $path ) { 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.
*
* 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 ) { // If no custom attributes were found then there's nothing to modify.
return $block_content; 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();
} }
/** /**

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @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. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.