<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[58466] trunk: Section styles: improve performance and conceptual consistency.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/58466">58466</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/58466","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>oandregal</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-06-24 08:49:52 +0000 (Mon, 24 Jun 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Section styles: improve performance and conceptual consistency.
These changes involve:
- Move shared variation definitions from styles.blocks.variations to styles.variations
- Remove blockTypes from styles.variations.
- Do not register shared variations from theme style variation or primary theme.json files.
- Move the merging of theme.json data into the WP_Theme_JSON_Resolver and WP_Theme_JSON classes.
These changes improve performance and are more future-proof API wise.
See conversation at https://github.com/WordPress/gutenberg/issues/62686
Props aaronrobertshaw, oandregal, andrewserong, joemcgill, talldanwp, andrewserong, ramonopoly, richtabor, youknowriad.
See <a href="https://core.trac.wordpress.org/ticket/61312">#61312</a>, <a href="https://core.trac.wordpress.org/ticket/61451">#61451</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportsblockstylevariationsphp">trunk/src/wp-includes/block-supports/block-style-variations.php</a></li>
<li><a href="#trunksrcwpincludesclasswpthemejsonresolverphp">trunk/src/wp-includes/class-wp-theme-json-resolver.php</a></li>
<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>
<li><a href="#trunksrcwpincludesrestapiendpointsclasswprestglobalstylescontrollerphp">trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php</a></li>
<li><a href="#trunksrcwpincludesthemei18njson">trunk/src/wp-includes/theme-i18n.json</a></li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsthemejson">trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json</a></li>
<li><a href="#trunktestsphpunittestsblocksupportsblockstylevariationsphp">trunk/tests/phpunit/tests/block-supports/block-style-variations.php</a></li>
<li><a href="#trunktestsphpunittestsrestapirestglobalstylescontrollerphp">trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonResolverphp">trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblocksupportsblockstylevariationsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-supports/block-style-variations.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-supports/block-style-variations.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/src/wp-includes/block-supports/block-style-variations.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,176 +213,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Collects block style variation data for merging with theme.json data.
- *
- * @since 6.6.0
- * @access private
- *
- * @param array $variations Shared block style variations.
- *
- * @return array Block variations data to be merged under `styles.blocks`.
- */
-function wp_resolve_block_style_variations( $variations ) {
- $variations_data = array();
-
- if ( empty( $variations ) ) {
- return $variations_data;
- }
-
- $have_named_variations = ! wp_is_numeric_array( $variations );
-
- foreach ( $variations as $key => $variation ) {
- $supported_blocks = $variation['blockTypes'] ?? array();
-
- /*
- * Standalone theme.json partial files for block style variations
- * will have their styles under a top-level property by the same name.
- * Variations defined within an existing theme.json or theme style
- * variation will themselves already be the required styles data.
- */
- $variation_data = $variation['styles'] ?? $variation;
-
- if ( empty( $variation_data ) ) {
- continue;
- }
-
- /*
- * Block style variations read in via standalone theme.json partials
- * need to have their name set to the kebab case version of their title.
- */
- $variation_name = $have_named_variations ? $key : ( $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] ) );
-
- foreach ( $supported_blocks as $block_type ) {
- // Add block style variation data under current block type.
- $path = array( $block_type, 'variations', $variation_name );
- _wp_array_set( $variations_data, $path, $variation_data );
- }
- }
-
- return $variations_data;
-}
-
-/**
- * Merges variations data with existing theme.json data ensuring that the
- * current theme.json data values take precedence.
- *
- * @since 6.6.0
- * @access private
- *
- * @param array $variations_data Block style variations data keyed by block type.
- * @param WP_Theme_JSON_Data $theme_json Current theme.json data.
- * @param string $origin Origin for the theme.json data.
- *
- * @return WP_Theme_JSON The merged theme.json data.
- */
-function wp_merge_block_style_variations_data( $variations_data, $theme_json, $origin = 'theme' ) {
- if ( empty( $variations_data ) ) {
- return $theme_json;
- }
-
- $variations_theme_json_data = array(
- 'version' => WP_Theme_JSON::LATEST_SCHEMA,
- 'styles' => array( 'blocks' => $variations_data ),
- );
-
- $variations_theme_json = new WP_Theme_JSON_Data( $variations_theme_json_data, $origin );
-
- /*
- * Merge the current theme.json data over shared variation data so that
- * any explicit per block variation values take precedence.
- */
- return $variations_theme_json->update_with( $theme_json->get_data() );
-}
-
-/**
- * Merges any shared block style variation definitions from a theme style
- * variation into their appropriate block type within theme json styles. Any
- * custom user selections already made will take precedence over the shared
- * style variation value.
- *
- * @since 6.6.0
- * @access private
- *
- * @param WP_Theme_JSON_Data $theme_json Current theme.json data.
- *
- * @return WP_Theme_JSON_Data
- */
-function wp_resolve_block_style_variations_from_theme_style_variation( $theme_json ) {
- $theme_json_data = $theme_json->get_data();
- $shared_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
- $variations_data = wp_resolve_block_style_variations( $shared_variations );
-
- return wp_merge_block_style_variations_data( $variations_data, $theme_json, 'user' );
-}
-
-/**
- * Merges block style variation data sourced from standalone partial
- * theme.json files.
- *
- * @since 6.6.0
- * @access private
- *
- * @param WP_Theme_JSON_Data $theme_json Current theme.json data.
- *
- * @return WP_Theme_JSON_Data
- */
-function wp_resolve_block_style_variations_from_theme_json_partials( $theme_json ) {
- $block_style_variations = WP_Theme_JSON_Resolver::get_style_variations( 'block' );
- $variations_data = wp_resolve_block_style_variations( $block_style_variations );
-
- return wp_merge_block_style_variations_data( $variations_data, $theme_json );
-}
-
-/**
- * Merges shared block style variations registered within the
- * `styles.blocks.variations` property of the primary theme.json file.
- *
- * @since 6.6.0
- * @access private
- *
- * @param WP_Theme_JSON_Data $theme_json Current theme.json data.
- *
- * @return WP_Theme_JSON_Data
- */
-function wp_resolve_block_style_variations_from_primary_theme_json( $theme_json ) {
- $theme_json_data = $theme_json->get_data();
- $block_style_variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
- $variations_data = wp_resolve_block_style_variations( $block_style_variations );
-
- return wp_merge_block_style_variations_data( $variations_data, $theme_json );
-}
-
-/**
- * Merges block style variations registered via the block styles registry with a
- * style object, under their appropriate block types within theme.json styles.
- * Any variation values defined within the theme.json specific to a block type
- * will take precedence over these shared definitions.
- *
- * @since 6.6.0
- * @access private
- *
- * @param WP_Theme_JSON_Data $theme_json Current theme.json data.
- *
- * @return WP_Theme_JSON_Data
- */
-function wp_resolve_block_style_variations_from_styles_registry( $theme_json ) {
- $registry = WP_Block_Styles_Registry::get_instance();
- $styles = $registry->get_all_registered();
- $variations_data = array();
-
- foreach ( $styles as $block_type => $variations ) {
- foreach ( $variations as $variation_name => $variation ) {
- if ( ! empty( $variation['style_data'] ) ) {
- $path = array( $block_type, 'variations', $variation_name );
- _wp_array_set( $variations_data, $path, $variation['style_data'] );
- }
- }
- }
-
- return wp_merge_block_style_variations_data( $variations_data, $theme_json );
-}
-
-/**
</del><span class="cx" style="display: block; padding: 0 10px"> * Enqueues styles for block style variations.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.6.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -399,16 +229,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'render_block', 'wp_render_block_style_variation_class_name', 10, 2 );
</span><span class="cx" style="display: block; padding: 0 10px"> add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles', 1 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-// Resolve block style variations from all their potential sources. The order here is deliberate.
-add_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_primary_theme_json', 10, 1 );
-add_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_theme_json_partials', 10, 1 );
-add_filter( 'wp_theme_json_data_theme', 'wp_resolve_block_style_variations_from_styles_registry', 10, 1 );
-
-add_filter( 'wp_theme_json_data_user', 'wp_resolve_block_style_variations_from_theme_style_variation', 10, 1 );
-
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Registers any block style variations contained within the provided
- * theme.json data.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Registers block style variations read in from theme.json partials.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.6.0
</span><span class="cx" style="display: block; padding: 0 10px"> * @access private
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -415,37 +237,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $variations Shared block style variations.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function wp_register_block_style_variations_from_theme_json_data( $variations ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function wp_register_block_style_variations_from_theme_json_partials( $variations ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( empty( $variations ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return $variations;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $registry = WP_Block_Styles_Registry::get_instance();
- $have_named_variations = ! wp_is_numeric_array( $variations );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $registry = WP_Block_Styles_Registry::get_instance();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- foreach ( $variations as $key => $variation ) {
- $supported_blocks = $variation['blockTypes'] ?? array();
-
- /*
- * Standalone theme.json partial files for block style variations
- * will have their styles under a top-level property by the same name.
- * Variations defined within an existing theme.json or theme style
- * variation will themselves already be the required styles data.
- */
- $variation_data = $variation['styles'] ?? $variation;
-
- if ( empty( $variation_data ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ foreach ( $variations as $variation ) {
+ if ( empty( $variation['blockTypes'] ) || empty( $variation['styles'] ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> continue;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /*
- * Block style variations read in via standalone theme.json partials
- * need to have their name set to the kebab case version of their title.
- */
- $variation_name = $have_named_variations ? $key : ( $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $variation_name = $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] );
</ins><span class="cx" style="display: block; padding: 0 10px"> $variation_label = $variation['title'] ?? $variation_name;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- foreach ( $supported_blocks as $block_type ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ foreach ( $variation['blockTypes'] as $block_type ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> $registered_styles = $registry->get_registered_styles_for_block( $block_type );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Register block style variation if it hasn't already been registered.
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpthemejsonresolverphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json-resolver.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json-resolver.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/src/wp-includes/class-wp-theme-json-resolver.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -231,7 +231,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.9.0 Theme supports have been inlined and the `$theme_support_data` argument removed.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.0.0 Added an `$options` parameter to allow the theme data to be returned without theme supports.
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.6.0 Add support for 'default-font-sizes' and 'default-spacing-sizes' theme supports.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Register the block style variations coming from the partials and the theme.json.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Added registration and merging of block style variations from partial theme.json files and the block styles registry.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $deprecated Deprecated. Not used.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $options {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -258,14 +258,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $theme_json_data = array( 'version' => WP_Theme_JSON::LATEST_SCHEMA );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Register variations defined by the theme.
- $variations = $theme_json_data['styles']['blocks']['variations'] ?? array();
- wp_register_block_style_variations_from_theme_json_data( $variations );
-
- // Register variations defined by theme partials (theme.json files in the styles directory).
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Register variations defined by theme partials (theme.json files in the styles directory).
+ * This is required so the variations pass sanitization of theme.json data.
+ */
</ins><span class="cx" style="display: block; padding: 0 10px"> $variations = static::get_style_variations( 'block' );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_register_block_style_variations_from_theme_json_data( $variations );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp_register_block_style_variations_from_theme_json_partials( $variations );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * Source variations from the block registry and block style variation files. Then, merge them into the existing theme.json data.
+ *
+ * In case the same style properties are defined in several sources, this is how we should resolve the values,
+ * from higher to lower priority:
+ *
+ * - styles.blocks.blockType.variations from theme.json
+ * - styles.variations from theme.json
+ * - variations from block style variation files
+ * - variations from block styles registry
+ *
+ * See test_add_registered_block_styles_to_theme_data and test_unwraps_block_style_variations.
+ *
+ */
+ $theme_json_data = static::inject_variations_from_block_style_variation_files( $theme_json_data, $variations );
+ $theme_json_data = static::inject_variations_from_block_styles_registry( $theme_json_data );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Filters the data provided by the theme for global styles and settings.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -579,10 +595,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> unset( $decoded_data['isGlobalStylesUserThemeJSON'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $config = $decoded_data;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // Register variations defined by the user.
- $variations = $config['styles']['blocks']['variations'] ?? array();
- wp_register_block_style_variations_from_theme_json_data( $variations );
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /** This filter is documented in wp-includes/class-wp-theme-json-resolver.php */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -885,7 +897,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 6.6.0
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @param WP_Theme_JSON $theme_json A theme json instance.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @param WP_Theme_JSON $theme_json A theme json instance.
</ins><span class="cx" style="display: block; padding: 0 10px"> * @return WP_Theme_JSON Theme merged with resolved paths, if any found.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public static function resolve_theme_file_uris( $theme_json ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -907,4 +919,84 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return $theme_json;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * Adds variations sourced from block style variations files to the supplied theme.json data.
+ *
+ * @since 6.6.0
+ *
+ * @param array $data Array following the theme.json specification.
+ * @param array $variations Shared block style variations.
+ * @return array Theme json data including shared block style variation definitions.
+ */
+ private static function inject_variations_from_block_style_variation_files( $data, $variations ) {
+ if ( empty( $variations ) ) {
+ return $data;
+ }
+
+ foreach ( $variations as $variation ) {
+ if ( empty( $variation['styles'] ) || empty( $variation['blockTypes'] ) ) {
+ continue;
+ }
+
+ $variation_name = $variation['slug'] ?? _wp_to_kebab_case( $variation['title'] );
+
+ foreach ( $variation['blockTypes'] as $block_type ) {
+ // First, override partial styles with any top-level styles.
+ $top_level_data = $data['styles']['variations'][ $variation_name ] ?? array();
+ if ( ! empty( $top_level_data ) ) {
+ $variation['styles'] = array_replace_recursive( $variation['styles'], $top_level_data );
+ }
+
+ // Then, override styles so far with any block-level styles.
+ $block_level_data = $data['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+ if ( ! empty( $block_level_data ) ) {
+ $variation['styles'] = array_replace_recursive( $variation['styles'], $block_level_data );
+ }
+
+ $path = array( 'styles', 'blocks', $block_type, 'variations', $variation_name );
+ _wp_array_set( $data, $path, $variation['styles'] );
+ }
+ }
+
+ return $data;
+ }
+
+ /**
+ * Adds variations sourced from the block styles registry to the supplied theme.json data.
+ *
+ * @since 6.6.0
+ *
+ * @param array $data Array following the theme.json specification.
+ * @return array Theme json data including shared block style variation definitions.
+ */
+ private static function inject_variations_from_block_styles_registry( $data ) {
+ $registry = WP_Block_Styles_Registry::get_instance();
+ $styles = $registry->get_all_registered();
+
+ foreach ( $styles as $block_type => $variations ) {
+ foreach ( $variations as $variation_name => $variation ) {
+ if ( empty( $variation['style_data'] ) ) {
+ continue;
+ }
+
+ // First, override registry styles with any top-level styles.
+ $top_level_data = $data['styles']['variations'][ $variation_name ] ?? array();
+ if ( ! empty( $top_level_data ) ) {
+ $variation['style_data'] = array_replace_recursive( $variation['style_data'], $top_level_data );
+ }
+
+ // Then, override styles so far with any block-level styles.
+ $block_level_data = $data['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+ if ( ! empty( $block_level_data ) ) {
+ $variation['style_data'] = array_replace_recursive( $variation['style_data'], $block_level_data );
+ }
+
+ $path = array( 'styles', 'blocks', $block_type, 'variations', $variation_name );
+ _wp_array_set( $data, $path, $variation['style_data'] );
+ }
+ }
+
+ return $data;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpthemejsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/src/wp-includes/class-wp-theme-json.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -743,8 +743,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * Constructor.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.8.0
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @since 6.6.0 Key spacingScale by origin, and Pre-generate the
- * spacingSizes from spacingScale.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.6.0 Key spacingScale by origin, and Pre-generate the spacingSizes from spacingScale.
+ * Added unwrapping of shared block style variations into block type variations if registered.
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $theme_json A structure that follows the theme.json schema.
</span><span class="cx" style="display: block; padding: 0 10px"> * @param string $origin Optional. What source of data this object represents.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -759,6 +759,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $valid_block_names = array_keys( static::get_blocks_metadata() );
</span><span class="cx" style="display: block; padding: 0 10px"> $valid_element_names = array_keys( static::ELEMENTS );
</span><span class="cx" style="display: block; padding: 0 10px"> $valid_variations = static::get_valid_block_style_variations();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->theme_json = static::unwrap_shared_block_style_variations( $this->theme_json, $valid_variations );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names, $valid_variations );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->theme_json = static::maybe_opt_in_into_settings( $this->theme_json );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -803,6 +804,73 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Unwraps shared block style variations.
+ *
+ * It takes the shared variations (styles.variations.variationName) and
+ * applies them to all the blocks that have the given variation registered
+ * (styles.blocks.blockType.variations.variationName).
+ *
+ * For example, given the `core/paragraph` and `core/group` blocks have
+ * registered the `section-a` style variation, and given the following input:
+ *
+ * {
+ * "styles": {
+ * "variations": {
+ * "section-a": { "color": { "background": "backgroundColor" } }
+ * }
+ * }
+ * }
+ *
+ * It returns the following output:
+ *
+ * {
+ * "styles": {
+ * "blocks": {
+ * "core/paragraph": {
+ * "variations": {
+ * "section-a": { "color": { "background": "backgroundColor" } }
+ * },
+ * },
+ * "core/group": {
+ * "variations": {
+ * "section-a": { "color": { "background": "backgroundColor" } }
+ * }
+ * }
+ * }
+ * }
+ * }
+ *
+ * @since 6.6.0
+ *
+ * @param array $theme_json A structure that follows the theme.json schema.
+ * @param array $valid_variations Valid block style variations.
+ * @return array Theme json data with shared variation definitions unwrapped under appropriate block types.
+ */
+ private static function unwrap_shared_block_style_variations( $theme_json, $valid_variations ) {
+ if ( empty( $theme_json['styles']['variations'] ) || empty( $valid_variations ) ) {
+ return $theme_json;
+ }
+
+ $new_theme_json = $theme_json;
+ $variations = $new_theme_json['styles']['variations'];
+
+ foreach ( $valid_variations as $block_type => $registered_variations ) {
+ foreach ( $registered_variations as $variation_name ) {
+ $block_level_data = $new_theme_json['styles']['blocks'][ $block_type ]['variations'][ $variation_name ] ?? array();
+ $top_level_data = $variations[ $variation_name ] ?? array();
+ $merged_data = array_replace_recursive( $top_level_data, $block_level_data );
+ if ( ! empty( $merged_data ) ) {
+ _wp_array_set( $new_theme_json, array( 'styles', 'blocks', $block_type, 'variations', $variation_name ), $merged_data );
+ }
+ }
+ }
+
+ unset( $new_theme_json['styles']['variations'] );
+
+ return $new_theme_json;
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Enables some opt-in settings if theme declared support.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 5.9.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -967,12 +1035,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $schema['settings']['blocks'] = $schema_settings_blocks;
</span><span class="cx" style="display: block; padding: 0 10px"> $schema['settings']['typography']['fontFamilies'] = static::schema_in_root_and_per_origin( static::FONT_FAMILY_SCHEMA );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /*
- * Shared block style variations can be registered from the theme.json data so we can't
- * validate them against pre-registered block style variations.
- */
- $schema['styles']['blocks']['variations'] = null;
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Remove anything that's not present in the schema.
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( array( 'styles', 'settings' ) as $subtree ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! isset( $input[ $subtree ] ) ) {
</span></span></pre></div>
<a id="trunksrcwpincludesrestapiendpointsclasswprestglobalstylescontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-global-styles-controller.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -265,14 +265,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $config['styles'] = $existing_config['styles'];
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Register theme-defined variations.
- WP_Theme_JSON_Resolver::get_theme_data();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Register theme-defined variations e.g. from block style variation partials under `/styles`.
+ $variations = WP_Theme_JSON_Resolver::get_style_variations( 'block' );
+ wp_register_block_style_variations_from_theme_json_partials( $variations );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Register user-defined variations.
- if ( ! empty( $config['styles']['blocks']['variations'] ) ) {
- wp_register_block_style_variations_from_theme_json_data( $config['styles']['blocks']['variations'] );
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $request['settings'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $config['settings'] = $request['settings'];
</span><span class="cx" style="display: block; padding: 0 10px"> } elseif ( isset( $existing_config['settings'] ) ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -635,8 +631,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $response = array();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ // Register theme-defined variations e.g. from block style variation partials under `/styles`.
+ $partials = WP_Theme_JSON_Resolver::get_style_variations( 'block' );
+ wp_register_block_style_variations_from_theme_json_partials( $partials );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $variations = WP_Theme_JSON_Resolver::get_style_variations();
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
</del><span class="cx" style="display: block; padding: 0 10px"> foreach ( $variations as $variation ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $variation_theme_json = new WP_Theme_JSON( $variation );
</span><span class="cx" style="display: block; padding: 0 10px"> $resolved_theme_uris = WP_Theme_JSON_Resolver::get_resolved_theme_uris( $variation_theme_json );
</span></span></pre></div>
<a id="trunksrcwpincludesthemei18njson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/theme-i18n.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/theme-i18n.json 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/src/wp-includes/theme-i18n.json 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -80,15 +80,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> },
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "styles": {
- "blocks": {
- "variations": {
- "*": {
- "title": "Style variation name"
- }
- }
- }
- },
</del><span class="cx" style="display: block; padding: 0 10px"> "customTemplates": [
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> "title": "Custom template name"
</span></span></pre></div>
<a id="trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsthemejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,4 +1,55 @@
</span><span class="cx" style="display: block; padding: 0 10px"> {
</span><span class="cx" style="display: block; padding: 0 10px"> "$schema": "https://schemas.wp.org/trunk/theme.json",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "version": 3
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "version": 3,
+ "styles": {
+ "variations": {
+ "outline": {
+ "color": {
+ "background": "green",
+ "text": "white"
+ }
+ },
+ "block-style-variation-a": {
+ "color": {
+ "background": "darkseagreen"
+ },
+ "typography": {
+ "fontSize": "2em",
+ "lineHeight": "1.4em"
+ }
+ }
+ },
+ "blocks": {
+ "core/button": {
+ "variations": {
+ "outline": {
+ "color": {
+ "background": "red"
+ }
+ }
+ }
+ },
+ "core/media-text": {
+ "variations": {
+ "block-style-variation-a": {
+ "color": {
+ "background": "blue"
+ },
+ "typography": {
+ "fontSize": "1.5em"
+ }
+ }
+ }
+ },
+ "core/heading": {
+ "variations": {
+ "block-style-variation-b": {
+ "typography": {
+ "fontSize": "3em"
+ }
+ }
+ }
+ }
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsphpunittestsblocksupportsblockstylevariationsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/block-supports/block-style-variations.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/block-supports/block-style-variations.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/tests/phpunit/tests/block-supports/block-style-variations.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -62,15 +62,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 61312
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 61440
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 61451
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_add_registered_block_styles_to_theme_data() {
</span><span class="cx" style="display: block; padding: 0 10px"> switch_theme( 'block-theme' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Register theme-defined variations.
- WP_Theme_JSON_Resolver::get_theme_data();
- // Register user-defined variations.
- WP_Theme_JSON_Resolver::get_user_data();
-
</del><span class="cx" style="display: block; padding: 0 10px"> $variation_styles_data = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'background' => 'darkslateblue',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -125,14 +121,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $group_styles = $theme_json['styles']['blocks']['core/group'] ?? array();
</span><span class="cx" style="display: block; padding: 0 10px"> $expected = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'variations' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // @ticket 61440
- 'WithSlug' => array(
- 'color' => array(
- 'background' => 'aliceblue',
- 'text' => 'midnightblue',
- ),
- ),
- 'my-variation' => $variation_styles_data,
</del><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * The following block style variations are registered
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -151,6 +139,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'text' => 'lightblue',
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /*
+ * Manually registered variations.
+ * @ticket 61440
+ */
+ 'WithSlug' => array(
+ 'color' => array(
+ 'background' => 'aliceblue',
+ 'text' => 'midnightblue',
+ ),
+ ),
+ 'my-variation' => $variation_styles_data,
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -157,6 +157,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> unregister_block_style( 'core/group', 'my-variation' );
</span><span class="cx" style="display: block; padding: 0 10px"> unregister_block_style( 'core/group', 'WithSlug' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertSameSetsWithIndex( $expected, $group_styles );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertSameSetsWithIndex( $expected, $group_styles, 'Variation data does not match' );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunktestsphpunittestsrestapirestglobalstylescontrollerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/tests/phpunit/tests/rest-api/rest-global-styles-controller.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -609,6 +609,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @covers WP_REST_Global_Styles_Controller_Gutenberg::update_item
</span><span class="cx" style="display: block; padding: 0 10px"> * @ticket 61312
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 61451
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> public function test_update_item_with_custom_block_style_variations() {
</span><span class="cx" style="display: block; padding: 0 10px"> wp_set_current_user( self::$admin_id );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -616,6 +617,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> grant_super_admin( self::$admin_id );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /*
+ * For variations to be resolved they have to have been registered
+ * via either a theme.json partial or through the WP_Block_Styles_Registry.
+ */
+ register_block_style(
+ 'core/group',
+ array(
+ 'name' => 'fromThemeStyleVariation',
+ 'label' => 'From Theme Style Variation',
+ )
+ );
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $group_variations = array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'fromThemeStyleVariation' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'color' => array(
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -629,16 +642,16 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $request->set_body_params(
</span><span class="cx" style="display: block; padding: 0 10px"> array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'styles' => array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'blocks' => array(
- 'variations' => array(
- 'fromThemeStyleVariation' => array(
- 'blockTypes' => array( 'core/group', 'core/columns' ),
- 'color' => array(
- 'background' => '#000000',
- 'text' => '#ffffff',
- ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'variations' => array(
+ 'fromThemeStyleVariation' => array(
+ 'blockTypes' => array( 'core/group', 'core/columns' ),
+ 'color' => array(
+ 'background' => '#000000',
+ 'text' => '#ffffff',
</ins><span class="cx" style="display: block; padding: 0 10px"> ),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ ),
+ 'blocks' => array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'core/group' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'variations' => $group_variations,
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJson.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJson.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3931,6 +3931,92 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @ticket 61451
+ */
+ public function test_unwraps_block_style_variations() {
+ register_block_style(
+ array( 'core/paragraph', 'core/group' ),
+ array(
+ 'name' => 'myVariation',
+ 'label' => 'My variation',
+ )
+ );
+
+ $input = new WP_Theme_JSON(
+ array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'variations' => array(
+ 'myVariation' => array(
+ 'color' => array(
+ 'background' => 'topLevel',
+ 'gradient' => 'topLevel',
+ ),
+ 'typography' => array(
+ 'fontFamily' => 'topLevel',
+ ),
+ ),
+ ),
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'variations' => array(
+ 'myVariation' => array(
+ 'color' => array(
+ 'background' => 'blockLevel',
+ 'text' => 'blockLevel',
+ ),
+ 'outline' => array(
+ 'offset' => 'blockLevel',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ )
+ );
+
+ $expected = array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ 'styles' => array(
+ 'blocks' => array(
+ 'core/paragraph' => array(
+ 'variations' => array(
+ 'myVariation' => array(
+ 'color' => array(
+ 'background' => 'blockLevel',
+ 'gradient' => 'topLevel',
+ 'text' => 'blockLevel',
+ ),
+ 'typography' => array(
+ 'fontFamily' => 'topLevel',
+ ),
+ 'outline' => array(
+ 'offset' => 'blockLevel',
+ ),
+ ),
+ ),
+ ),
+ 'core/group' => array(
+ 'variations' => array(
+ 'myVariation' => array(
+ 'color' => array(
+ 'background' => 'topLevel',
+ 'gradient' => 'topLevel',
+ ),
+ 'typography' => array(
+ 'fontFamily' => 'topLevel',
+ ),
+ ),
+ ),
+ ),
+ ),
+ ),
+ );
+ $this->assertSameSetsWithIndex( $expected, $input->get_raw_data(), 'Unwrapped block style variations do not match' );
+ }
+
+ /**
</ins><span class="cx" style="display: block; padding: 0 10px"> * @ticket 57583
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @dataProvider data_sanitize_for_block_with_style_variations
</span></span></pre></div>
<a id="trunktestsphpunitteststhemewpThemeJsonResolverphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php 2024-06-23 14:50:17 UTC (rev 58465)
+++ trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php 2024-06-24 08:49:52 UTC (rev 58466)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1321,4 +1321,95 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertSame( $expected_data, $actual );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ /**
+ * Tests that block style variations data gets merged in the following
+ * priority order, from highest priority to lowest.
+ *
+ * - `styles.blocks.blockType.variations` from theme.json
+ * - `styles.variations` from theme.json
+ * - variations from block style variation files under `/styles`
+ * - variations from `WP_Block_Styles_Registry`
+ *
+ * @ticket 61451
+ */
+ public function test_block_style_variation_merge_order() {
+ switch_theme( 'block-theme-child-with-block-style-variations' );
+
+ /*
+ * Register style for a block that isn't included in the block style variation's partial
+ * theme.json's blockTypes. The name must match though so we can ensure the partial's
+ * styles do not get applied to this block.
+ */
+ register_block_style(
+ 'core/heading',
+ array(
+ 'name' => 'block-style-variation-b',
+ 'label' => 'Heading only variation',
+ )
+ );
+
+ // Register variation for a block that will be partially overridden at all levels.
+ register_block_style(
+ 'core/media-text',
+ array(
+ 'name' => 'block-style-variation-a',
+ 'label' => 'Block Style Variation A',
+ 'style_data' => array(
+ 'color' => array(
+ 'background' => 'pink',
+ 'gradient' => 'var(--custom)',
+ ),
+ ),
+ )
+ );
+
+ $data = WP_Theme_JSON_Resolver::get_theme_data()->get_raw_data();
+ $block_styles = $data['styles']['blocks'] ?? array();
+ $actual = array_intersect_key(
+ $block_styles,
+ array_flip( array( 'core/button', 'core/media-text', 'core/heading' ) )
+ );
+ $expected = array(
+ 'core/button' => array(
+ 'variations' => array(
+ 'outline' => array(
+ 'color' => array(
+ 'background' => 'red',
+ 'text' => 'white',
+ ),
+ ),
+ ),
+ ),
+ 'core/media-text' => array(
+ 'variations' => array(
+ 'block-style-variation-a' => array(
+ 'color' => array(
+ 'background' => 'blue',
+ 'gradient' => 'var(--custom)',
+ 'text' => 'aliceblue',
+ ),
+ 'typography' => array(
+ 'fontSize' => '1.5em',
+ 'lineHeight' => '1.4em',
+ ),
+ ),
+ ),
+ ),
+ 'core/heading' => array(
+ 'variations' => array(
+ 'block-style-variation-b' => array(
+ 'typography' => array(
+ 'fontSize' => '3em',
+ ),
+ ),
+ ),
+ ),
+ );
+
+ unregister_block_style( 'core/heading', 'block-style-variation-b' );
+ unregister_block_style( 'core/media-text', 'block-style-variation-a' );
+
+ $this->assertSameSetsWithIndex( $expected, $actual, 'Merged variation styles do not match.' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre>
</div>
</div>
</body>
</html>