Skip to content

Commit

Permalink
Themes: Improve performance of applying background image styles in `t…
Browse files Browse the repository at this point in the history 
…heme.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.


git-svn-id: https://develop.svn.wordpress.org/trunk@59213 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@felixarntz
felixarntz committed Oct 10, 2024
1 parent 31ce381 commit 655125a
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 35 deletions.
101 changes: 66 additions & 35 deletions src/wp-includes/class-wp-theme-json.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2690,13 +2690,15 @@ private static function update_separator_declarations( $declarations ) {
* @since 6.1.0
* @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.
* @param array $selectors Optional list of selectors per block.
* @param array $options {
* 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.
*/
Expand All @@ -2712,57 +2714,82 @@ private static function get_block_nodes( $theme_json, $selectors = array(), $opt
return $nodes;
}

$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'];
}
$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'];
}
$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'];
}
$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 ],
);
$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' => array( 'styles', 'blocks', $name ),
'selector' => $selector,
'selectors' => $feature_selectors,
'duotone' => $duotone_selector,
'features' => $feature_selectors,
'variations' => $variation_selectors,
'css' => $selector,
);
$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 ],
);

// Handle any pseudo selectors for the element.
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] ) ) {
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 ),
);
}
Expand Down Expand Up @@ -3236,7 +3263,11 @@ public function merge( $incoming ) {
* some values provide exceptions, namely style values that are
* 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'];
/*
Expand Down
54 changes: 54 additions & 0 deletions tests/phpunit/tests/theme/wpThemeJson.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2443,6 +2443,60 @@ public function test_merge_incoming_background_styles() {
$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 );
}

/**
* @ticket 54336
*/
Expand Down

0 comments on commit 655125a

Please sign in to comment.