<!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>[58264] trunk: Block Themes: Add section styling via extended block style variations</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/58264">58264</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/58264","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>noisysocks</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-05-31 05:47:23 +0000 (Fri, 31 May 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'>Block Themes: Add section styling via extended block style variations

Provide users with the ability to style entire sections of a page without
having to tediously reapply the same sets of styles.

This is done by extending block style variations to apply to nested blocks.

See https://github.com/WordPress/gutenberg/pull/57908.

Fixes <a href="https://core.trac.wordpress.org/ticket/61312">#61312</a>.
Props aaronrobertshaw, talldanwp, ramonopoly, isabel_brison, andrewserong.</pre>

<h3>Modified Paths</h3>
<ul>
<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="#trunksrcwpsettingsphp">trunk/src/wp-settings.php</a></li>
<li><a href="#trunktestsphpunitteststhemethemeDirphp">trunk/tests/phpunit/tests/theme/themeDir.php</a></li>
<li><a href="#trunktestsphpunitteststhemewpThemeJsonResolverphp">trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludesblocksupportsblockstylevariationsphp">trunk/src/wp-includes/block-supports/block-style-variations.php</a></li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemestylesblockstylevariationajson">trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json</a></li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemestylesblockstylevariationbjson">trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json</a></li>
<li>trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/</li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsstylecss">trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css</a></li>
<li>trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/</li>
<li><a href="#trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsstylesblockstylevariationajson">trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.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="#trunktestsphpunittestsblocksupportswpCreateBlockStyleVariationInstanceNamephp">trunk/tests/phpunit/tests/block-supports/wpCreateBlockStyleVariationInstanceName.php</a></li>
<li><a href="#trunktestsphpunittestsblocksupportswpGetBlockStyleVariationNameFromClassphp">trunk/tests/phpunit/tests/block-supports/wpGetBlockStyleVariationNameFromClass.php</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludesblocksupportsblockstylevariationsphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: 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                           (rev 0)
+++ trunk/src/wp-includes/block-supports/block-style-variations.php     2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,424 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Block support to enable per-section styling of block types via
+ * block style variations.
+ *
+ * @package WordPress
+ * @since 6.6.0
+ */
+
+/**
+ * Generate block style variation instance name.
+ *
+ * @since 6.6.0
+ * @access private
+ *
+ * @param array  $block     Block object.
+ * @param string $variation Slug for the block style variation.
+ *
+ * @return string The unique variation name.
+ */
+function wp_create_block_style_variation_instance_name( $block, $variation ) {
+       return $variation . '--' . md5( serialize( $block ) );
+}
+
+/**
+ * Determines the block style variation names within a CSS class string.
+ *
+ * @since 6.6.0
+ *
+ * @param string $class_string CSS class string to look for a variation in.
+ *
+ * @return array|null The block style variation name if found.
+ */
+function wp_get_block_style_variation_name_from_class( $class_string ) {
+       if ( ! is_string( $class_string ) ) {
+               return null;
+       }
+
+       preg_match_all( '/\bis-style-(?!default)(\S+)\b/', $class_string, $matches );
+       return $matches[1] ?? null;
+}
+
+/**
+ * Render the block style variation's styles.
+ *
+ * In the case of nested blocks with variations applied, we want the parent
+ * variation's styles to be rendered before their descendants. This solves the
+ * issue of a block type being styled in both the parent and descendant: we want
+ * the descendant style to take priority, and this is done by loading it after,
+ * in the DOM order. This is why the variation stylesheet generation is in a
+ * different filter.
+ *
+ * @since 6.6.0
+ * @access private
+ *
+ * @param array $parsed_block The parsed block.
+ *
+ * @return array The parsed block with block style variation classname added.
+ */
+function wp_render_block_style_variation_support_styles( $parsed_block ) {
+       $classes    = $parsed_block['attrs']['className'] ?? null;
+       $variations = wp_get_block_style_variation_name_from_class( $classes );
+
+       if ( ! $variations ) {
+               return $parsed_block;
+       }
+
+       $tree       = WP_Theme_JSON_Resolver::get_merged_data();
+       $theme_json = $tree->get_raw_data();
+
+       // Only the first block style variation with data is supported.
+       $variation_data = array();
+       foreach ( $variations as $variation ) {
+               $variation_data = $theme_json['styles']['blocks'][ $parsed_block['blockName'] ]['variations'][ $variation ] ?? array();
+
+               if ( ! empty( $variation_data ) ) {
+                       break;
+               }
+       }
+
+       if ( empty( $variation_data ) ) {
+               return $parsed_block;
+       }
+
+       $variation_instance = wp_create_block_style_variation_instance_name( $parsed_block, $variation );
+       $class_name         = "is-style-$variation_instance";
+       $updated_class_name = $parsed_block['attrs']['className'] . " $class_name";
+
+       /*
+        * Even though block style variations are effectively theme.json partials,
+        * they can't be processed completely as though they are.
+        *
+        * Block styles support custom selectors to direct specific types of styles
+        * to inner elements. For example, borders on Image block's get applied to
+        * the inner `img` element rather than the wrapping `figure`.
+        *
+        * The following relocates the "root" block style variation styles to
+        * under an appropriate blocks property to leverage the preexisting style
+        * generation for simple block style variations. This way they get the
+        * custom selectors they need.
+        *
+        * The inner elements and block styles for the variation itself are
+        * still included at the top level but scoped by the variation's selector
+        * when the stylesheet is generated.
+        */
+       $elements_data = $variation_data['elements'] ?? array();
+       $blocks_data   = $variation_data['blocks'] ?? array();
+       unset( $variation_data['elements'] );
+       unset( $variation_data['blocks'] );
+
+       _wp_array_set(
+               $blocks_data,
+               array( $parsed_block['blockName'], 'variations', $variation_instance ),
+               $variation_data
+       );
+
+       $config = array(
+               'version' => WP_Theme_JSON::LATEST_SCHEMA,
+               'styles'  => array(
+                       'elements' => $elements_data,
+                       'blocks'   => $blocks_data,
+               ),
+       );
+
+       // Turn off filter that excludes block nodes. They are needed here for the variation's inner block types.
+       if ( ! is_admin() ) {
+               remove_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+       }
+
+       // Temporarily prevent variation instance from being sanitized while processing theme.json.
+       $styles_registry = WP_Block_Styles_Registry::get_instance();
+       $styles_registry->register( $parsed_block['blockName'], array( 'name' => $variation_instance ) );
+
+       $variation_theme_json = new WP_Theme_JSON( $config, 'blocks' );
+       $variation_styles     = $variation_theme_json->get_stylesheet(
+               array( 'styles' ),
+               array( 'custom' ),
+               array(
+                       'skip_root_layout_styles' => true,
+                       'scope'                   => ".$class_name",
+               )
+       );
+
+       // Clean up temporary block style now instance styles have been processed.
+       $styles_registry->unregister( $parsed_block['blockName'], $variation_instance );
+
+       // Restore filter that excludes block nodes.
+       if ( ! is_admin() ) {
+               add_filter( 'wp_theme_json_get_style_nodes', 'wp_filter_out_block_nodes' );
+       }
+
+       if ( empty( $variation_styles ) ) {
+               return $parsed_block;
+       }
+
+       wp_register_style( 'block-style-variation-styles', false, array( 'global-styles', 'wp-block-library' ) );
+       wp_add_inline_style( 'block-style-variation-styles', $variation_styles );
+
+       /*
+        * Add variation instance class name to block's className string so it can
+        * be enforced in the block markup via render_block filter.
+        */
+       _wp_array_set( $parsed_block, array( 'attrs', 'className' ), $updated_class_name );
+
+       return $parsed_block;
+}
+
+/**
+ * Ensure the variation block support class name generated and added to
+ * block attributes in the `render_block_data` filter gets applied to the
+ * block's markup.
+ *
+ * @see wp_render_block_style_variation_support_styles
+ *
+ * @since 6.6.0
+ * @access private
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ *
+ * @return string                Filtered block content.
+ */
+function wp_render_block_style_variation_class_name( $block_content, $block ) {
+       if ( ! $block_content || empty( $block['attrs']['className'] ) ) {
+               return $block_content;
+       }
+
+       /*
+        * Matches a class prefixed by `is-style`, followed by the
+        * variation slug, then `--`, and finally a hash.
+        *
+        * See `wp_create_block_style_variation_instance_name` for class generation.
+        */
+       preg_match( '/\bis-style-(\S+?--\w+)\b/', $block['attrs']['className'], $matches );
+
+       if ( empty( $matches ) ) {
+               return $block_content;
+       }
+
+       $tags = new WP_HTML_Tag_Processor( $block_content );
+
+       if ( $tags->next_tag() ) {
+               /*
+                * Ensure the variation instance class name set in the
+                * `render_block_data` filter is applied in markup.
+                * See `wp_render_block_style_variation_support_styles`.
+                */
+               $tags->add_class( $matches[0] );
+       }
+
+       return $tags->get_updated_html();
+}
+
+/**
+ * Collects block style variation data for merging with theme.json data.
+ * As each block style variation is processed it is registered if it hasn't
+ * been already. This registration is required for later sanitization of
+ * 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_and_register_block_style_variations( $variations ) {
+       $variations_data = array();
+
+       if ( empty( $variations ) ) {
+               return $variations_data;
+       }
+
+       $registry              = WP_Block_Styles_Registry::get_instance();
+       $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 : _wp_to_kebab_case( $variation['title'] );
+               $variation_label = $variation['title'] ?? $variation_name;
+
+               foreach ( $supported_blocks as $block_type ) {
+                       $registered_styles = $registry->get_registered_styles_for_block( $block_type );
+
+                       // Register block style variation if it hasn't already been registered.
+                       if ( ! array_key_exists( $variation_name, $registered_styles ) ) {
+                               register_block_style(
+                                       $block_type,
+                                       array(
+                                               'name'  => $variation_name,
+                                               'label' => $variation_label,
+                                       )
+                               );
+                       }
+
+                       // 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_and_register_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_and_register_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_and_register_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 );
+}
+
+/**
+ * Enqueues styles for block style variations.
+ *
+ * @since 6.6.0
+ * @access private
+ */
+function wp_enqueue_block_style_variation_styles() {
+       wp_enqueue_style( 'block-style-variation-styles' );
+}
+
+// Register the block support.
+WP_Block_Supports::get_instance()->register( 'block-style-variation', array() );
+
+add_filter( 'render_block_data', 'wp_render_block_style_variation_support_styles', 10, 2 );
+add_filter( 'render_block', 'wp_render_block_style_variation_class_name', 10, 2 );
+add_action( 'wp_enqueue_scripts', 'wp_enqueue_block_style_variation_styles', 1 );
+
+// 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 );
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/src/wp-includes/block-supports/block-style-variations.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><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-05-31 03:46:59 UTC (rev 58263)
+++ trunk/src/wp-includes/class-wp-theme-json-resolver.php      2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -701,16 +701,46 @@
</span><span class="cx" style="display: block; padding: 0 10px">                return $nested_json_files;
</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">+        /**
+        * Determines if a supplied style variation matches the provided scope.
+        *
+        * For backwards compatibility, if a variation does not define any scope
+        * related property, e.g. `blockTypes`, it is assumed to be a theme style
+        * variation.
+        *
+        * @since 6.6.0
+        *
+        * @param array  $variation Theme.json shaped style variation object.
+        * @param string $scope     Scope to check e.g. theme, block etc.
+        *
+        * @return boolean
+        */
+       private static function style_variation_has_scope( $variation, $scope ) {
+               if ( 'block' === $scope ) {
+                       return isset( $variation['blockTypes'] );
+               }
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                if ( 'theme' === $scope ) {
+                       return ! isset( $variation['blockTypes'] );
+               }
+
+               return false;
+       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">         /**
</span><span class="cx" style="display: block; padding: 0 10px">         * Returns the style variations defined by the theme.
</span><span class="cx" style="display: block; padding: 0 10px">         *
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.0.0
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.2.0 Returns parent theme variations if theme is a child.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Added configurable scope parameter to allow filtering
+        *              theme.json partial files by the scope to which they
+        *              can be applied e.g. theme vs block etc.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @param string $scope The scope or type of style variation to retrieve e.g. theme, block etc.
+        *
</ins><span class="cx" style="display: block; padding: 0 10px">          * @return array
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        public static function get_style_variations() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public static function get_style_variations( $scope = 'theme' ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                 $variation_files    = array();
</span><span class="cx" style="display: block; padding: 0 10px">                $variations         = array();
</span><span class="cx" style="display: block; padding: 0 10px">                $base_directory     = get_stylesheet_directory() . '/styles';
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -733,7 +763,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                ksort( $variation_files );
</span><span class="cx" style="display: block; padding: 0 10px">                foreach ( $variation_files as $path => $file ) {
</span><span class="cx" style="display: block; padding: 0 10px">                        $decoded_file = wp_json_file_decode( $path, array( 'associative' => true ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( is_array( $decoded_file ) ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( is_array( $decoded_file ) && static::style_variation_has_scope( $decoded_file, $scope ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                 $translated = static::translate( $decoded_file, wp_get_theme()->get( 'TextDomain' ) );
</span><span class="cx" style="display: block; padding: 0 10px">                                $variation  = ( new WP_Theme_JSON( $translated ) )->get_raw_data();
</span><span class="cx" style="display: block; padding: 0 10px">                                if ( empty( $variation['title'] ) ) {
</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-05-31 03:46:59 UTC (rev 58263)
+++ trunk/src/wp-includes/class-wp-theme-json.php       2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -346,9 +346,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`,
</span><span class="cx" style="display: block; padding: 0 10px">         *              added the `customTemplates` and `templateParts` values.
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.3.0 Added the `description` value.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Added `blockTypes` to support block style variation theme.json partials.
</ins><span class="cx" style="display: block; padding: 0 10px">          * @var string[]
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        const VALID_TOP_LEVEL_KEYS = array(
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                'blockTypes',
</ins><span class="cx" style="display: block; padding: 0 10px">                 'customTemplates',
</span><span class="cx" style="display: block; padding: 0 10px">                'description',
</span><span class="cx" style="display: block; padding: 0 10px">                'patterns',
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -823,6 +825,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.8.0
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.3.0 Added the `$valid_variations` parameter.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Updated schema to allow extended block style variations.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @param array $input               Structure to sanitize.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param array $valid_block_names   List of valid block names.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -881,7 +884,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                $schema_styles_blocks   = array();
</span><span class="cx" style="display: block; padding: 0 10px">                $schema_settings_blocks = array();
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+               /*
+                * Generate a schema for blocks.
+                * - Block styles can contain `elements` & `variations` definitions.
+                * - Variations definitions cannot be nested.
+                * - Variations can contain styles for inner `blocks`.
+                * - Variation inner `blocks` styles can contain `elements`.
+                *
+                * As each variation needs a `blocks` schema but further nested
+                * inner `blocks`, the overall schema will be generated in multiple passes.
+                */
</ins><span class="cx" style="display: block; padding: 0 10px">                 foreach ( $valid_block_names as $block ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        $schema_settings_blocks[ $block ]           = static::VALID_SETTINGS;
+                       $schema_styles_blocks[ $block ]             = $styles_non_top_level;
+                       $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
+               }
+
+               $block_style_variation_styles             = static::VALID_STYLES;
+               $block_style_variation_styles['blocks']   = $schema_styles_blocks;
+               $block_style_variation_styles['elements'] = $schema_styles_elements;
+
+               foreach ( $valid_block_names as $block ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                         // Build the schema for each block style variation.
</span><span class="cx" style="display: block; padding: 0 10px">                        $style_variation_names = array();
</span><span class="cx" style="display: block; padding: 0 10px">                        if (
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -897,12 +921,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                        $schema_styles_variations = array();
</span><span class="cx" style="display: block; padding: 0 10px">                        if ( ! empty( $style_variation_names ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $schema_styles_variations = array_fill_keys( $style_variation_names, $styles_non_top_level );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         $schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles );
</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">-                        $schema_settings_blocks[ $block ]             = static::VALID_SETTINGS;
-                       $schema_styles_blocks[ $block ]               = $styles_non_top_level;
-                       $schema_styles_blocks[ $block ]['elements']   = $schema_styles_elements;
</del><span class="cx" style="display: block; padding: 0 10px">                         $schema_styles_blocks[ $block ]['variations'] = $schema_styles_variations;
</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">@@ -913,6 +934,12 @@
</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><ins style="background-color: #dfd; 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;
+
</ins><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 class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1016,16 +1043,36 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.9.0 Added `duotone` key with CSS selector.
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.1.0 Added `features` key with block support feature level selectors.
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.3.0 Refactored and stabilized selectors API.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Updated to include block style variations from the block styles registry.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @return array Block metadata.
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        protected static function get_blocks_metadata() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $registry = WP_Block_Type_Registry::get_instance();
-               $blocks   = $registry->get_all_registered();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $registry       = WP_Block_Type_Registry::get_instance();
+               $blocks         = $registry->get_all_registered();
+               $style_registry = WP_Block_Styles_Registry::get_instance();
</ins><span class="cx" style="display: block; padding: 0 10px"> 
</span><span class="cx" style="display: block; padding: 0 10px">                // Is there metadata for all currently registered blocks?
</span><span class="cx" style="display: block; padding: 0 10px">                $blocks = array_diff_key( $blocks, static::$blocks_metadata );
</span><span class="cx" style="display: block; padding: 0 10px">                if ( empty( $blocks ) ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        /*
+                        * New block styles may have been registered within WP_Block_Styles_Registry.
+                        * Update block metadata for any new block style variations.
+                        */
+                       $registered_styles = $style_registry->get_all_registered();
+                       foreach ( static::$blocks_metadata as $block_name => $block_metadata ) {
+                               if ( ! empty( $registered_styles[ $block_name ] ) ) {
+                                       $style_selectors = $block_metadata['styleVariations'] ?? array();
+
+                                       foreach ( $registered_styles[ $block_name ] as $block_style ) {
+                                               if ( ! isset( $style_selectors[ $block_style['name'] ] ) ) {
+                                                       $style_selectors[ $block_style['name'] ] = static::get_block_style_variation_selector( $block_style['name'], $block_metadata['selector'] );
+                                               }
+                                       }
+
+                                       static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+                               }
+                       }
</ins><span class="cx" style="display: block; padding: 0 10px">                         return static::$blocks_metadata;
</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">@@ -1060,11 +1107,20 @@
</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">                        // If the block has style variations, append their selectors to the block metadata.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        $style_selectors = array();
</ins><span class="cx" style="display: block; padding: 0 10px">                         if ( ! empty( $block_type->styles ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                $style_selectors = array();
</del><span class="cx" style="display: block; padding: 0 10px">                                 foreach ( $block_type->styles as $style ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                        $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
</span><span class="cx" style="display: block; padding: 0 10px">                                }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        }
+
+                       // Block style variations can be registered through the WP_Block_Styles_Registry as well as block.json.
+                       $registered_styles = $style_registry->get_registered_styles_for_block( $block_name );
+                       foreach ( $registered_styles as $style ) {
+                               $style_selectors[ $style['name'] ] = static::get_block_style_variation_selector( $style['name'], static::$blocks_metadata[ $block_name ]['selector'] );
+                       }
+
+                       if ( ! empty( $style_selectors ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                 static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
</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">@@ -1158,6 +1214,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.8.0
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 5.9.0 Removed the `$type` parameter, added the `$types` and `$origins` parameters.
</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.3.0 Add fallback layout styles for Post Template when block gap support isn't available.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Added `skip_root_layout_styles` option to omit layout styles if desired.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @param string[] $types   Types of styles to load. Will load all by default. It accepts:
</span><span class="cx" style="display: block; padding: 0 10px">         *                          - `variables`: only the CSS Custom Properties for presets & custom ones.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1165,9 +1222,10 @@
</span><span class="cx" style="display: block; padding: 0 10px">         *                          - `presets`: only the classes for the presets.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param string[] $origins A list of origins to include. By default it includes VALID_ORIGINS.
</span><span class="cx" style="display: block; padding: 0 10px">         * @param array    $options An array of options for now used for internal purposes only (may change without notice).
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *                          The options currently supported are 'scope' that makes sure all style are scoped to a
-        *                          given selector, and root_selector which overwrites and forces a given selector to be
-        *                          used on the root node.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  *                       The options currently supported are:
+        *                       - 'scope' that makes sure all style are scoped to a given selector
+        *                       - `root_selector` which overwrites and forces a given selector to be used on the root node
+        *                       - `skip_root_layout_styles` which omits root layout styles from the generated stylesheet.
</ins><span class="cx" style="display: block; padding: 0 10px">          * @return string The resulting stylesheet.
</span><span class="cx" style="display: block; padding: 0 10px">         */
</span><span class="cx" style="display: block; padding: 0 10px">        public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null, $options = array() ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1220,7 +1278,7 @@
</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">                if ( in_array( 'styles', $types, true ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( false !== $root_style_key ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( false !== $root_style_key && empty( $options['skip_root_layout_styles'] ) ) {
</ins><span class="cx" style="display: block; padding: 0 10px">                                 $stylesheet .= $this->get_root_layout_rules( $style_nodes[ $root_style_key ]['selector'], $style_nodes[ $root_style_key ] );
</span><span class="cx" style="display: block; padding: 0 10px">                        }
</span><span class="cx" style="display: block; padding: 0 10px">                        $stylesheet .= $this->get_block_classes( $style_nodes );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3114,6 +3172,7 @@
</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="cx" style="display: block; padding: 0 10px">         * @since 6.3.2 Preserves global styles block variations when securing styles.
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @since 6.6.0 Updated to allow variation element styles.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @param array $theme_json Structure to sanitize.
</span><span class="cx" style="display: block; padding: 0 10px">         * @return array Sanitized structure.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3175,6 +3234,29 @@
</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">                                        $variation_output = static::remove_insecure_styles( $variation_input );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+                                       // Process a variation's elements and element pseudo selector styles.
+                                       if ( isset( $variation_input['elements'] ) ) {
+                                               foreach ( $valid_element_names as $element_name ) {
+                                                       $element_input = $variation_input['elements'][ $element_name ] ?? null;
+                                                       if ( $element_input ) {
+                                                               $element_output = static::remove_insecure_styles( $element_input );
+
+                                                               if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
+                                                                       foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
+                                                                               if ( isset( $element_input[ $pseudo_selector ] ) ) {
+                                                                                       $element_output[ $pseudo_selector ] = static::remove_insecure_styles( $element_input[ $pseudo_selector ] );
+                                                                               }
+                                                                       }
+                                                               }
+
+                                                               if ( ! empty( $element_output ) ) {
+                                                                       _wp_array_set( $variation_output, array( 'elements', $element_name ), $element_output );
+                                                               }
+                                                       }
+                                               }
+                                       }
+
</ins><span class="cx" style="display: block; padding: 0 10px">                                         if ( ! empty( $variation_output ) ) {
</span><span class="cx" style="display: block; padding: 0 10px">                                                _wp_array_set( $sanitized, $variation['path'], $variation_output );
</span><span class="cx" style="display: block; padding: 0 10px">                                        }
</span></span></pre></div>
<a id="trunksrcwpsettingsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-settings.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-settings.php 2024-05-31 03:46:59 UTC (rev 58263)
+++ trunk/src/wp-settings.php   2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -366,6 +366,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/utils.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/align.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/background.php';
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+require ABSPATH . WPINC . '/block-supports/block-style-variations.php';
</ins><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/border.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/colors.php';
</span><span class="cx" style="display: block; padding: 0 10px"> require ABSPATH . WPINC . '/block-supports/custom-classname.php';
</span></span></pre></div>
<a id="trunktestsphpunitdatathemedir1blockthemestylesblockstylevariationajson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json                                (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json  2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,10 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+       "version": 3,
+       "blockTypes": [ "core/group", "core/columns" ],
+       "styles": {
+               "color": {
+                       "background": "indigo",
+                       "text": "plum"
+               }
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-a.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemestylesblockstylevariationbjson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json                                (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json  2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,10 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+       "version": 3,
+       "blockTypes": [ "core/group", "core/columns" ],
+       "styles": {
+               "color": {
+                       "background": "midnightblue",
+                       "text": "lightblue"
+               }
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme/styles/block-style-variation-b.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsstylecss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css</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/style.css                                (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css  2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,8 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*
+Theme Name: Block Theme Child With Block Style Variations Theme
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-block-style-variations
+*/
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/style.css
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsstylesblockstylevariationajson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.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/styles/block-style-variation-a.json                              (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json        2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,10 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+       "version": 3,
+       "blockTypes": [ "core/group", "core/columns", "core/media-text" ],
+       "styles": {
+               "color": {
+                       "background": "darkcyan",
+                       "text": "aliceblue"
+               }
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/styles/block-style-variation-a.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitdatathemedir1blockthemechildwithblockstylevariationsthemejson"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: 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                               (rev 0)
+++ trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json 2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,4 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+{
+       "$schema": "https://schemas.wp.org/trunk/theme.json",
+       "version": 3
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/data/themedir1/block-theme-child-with-block-style-variations/theme.json
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunittestsblocksupportsblockstylevariationsphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: 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                               (rev 0)
+++ trunk/tests/phpunit/tests/block-supports/block-style-variations.php 2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,132 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Test the block style variations block support.
+ *
+ * @package WordPress
+ * @subpackage Block Supports
+ * @since 6.6.0
+ *
+ * @group block-supports
+ */
+class WP_Block_Supports_Block_Style_Variations_Test extends WP_UnitTestCase {
+       /**
+        * Theme root directory.
+        *
+        * @var string|null
+        */
+       private $theme_root;
+
+       /**
+        * Original theme directory.
+        *
+        * @var array|null
+        */
+       private $orig_theme_dir;
+
+       public function set_up() {
+               parent::set_up();
+               $this->theme_root = realpath( DIR_TESTDATA . '/themedir1' );
+
+               $this->orig_theme_dir = $GLOBALS['wp_theme_directories'];
+
+               // /themes is necessary as theme.php functions assume /themes is the root if there is only one root.
+               $GLOBALS['wp_theme_directories'] = array( WP_CONTENT_DIR . '/themes', $this->theme_root );
+
+               add_filter( 'theme_root', array( $this, 'filter_set_theme_root' ) );
+               add_filter( 'stylesheet_root', array( $this, 'filter_set_theme_root' ) );
+               add_filter( 'template_root', array( $this, 'filter_set_theme_root' ) );
+
+               // Clear caches.
+               wp_clean_themes_cache();
+               unset( $GLOBALS['wp_themes'] );
+       }
+
+       public function tear_down() {
+               $GLOBALS['wp_theme_directories'] = $this->orig_theme_dir;
+               wp_clean_themes_cache();
+               unset( $GLOBALS['wp_themes'] );
+
+               // Reset data between tests.
+               wp_clean_theme_json_cache();
+               parent::tear_down();
+       }
+
+       public function filter_set_theme_root() {
+               return $this->theme_root;
+       }
+
+       /**
+        * Tests that block style variations registered via either
+        * `register_block_style` with a style object, or a standalone block style
+        * variation file within `/styles`, are added to the theme data.
+        *
+        * @ticket 61312
+        */
+       public function test_add_registered_block_styles_to_theme_data() {
+               switch_theme( 'block-theme' );
+
+               $variation_styles_data = array(
+                       'color'    => array(
+                               'background' => 'darkslateblue',
+                               'text'       => 'lavender',
+                       ),
+                       'blocks'   => array(
+                               'core/heading' => array(
+                                       'color' => array(
+                                               'text' => 'violet',
+                                       ),
+                               ),
+                       ),
+                       'elements' => array(
+                               'link' => array(
+                                       'color'  => array(
+                                               'text' => 'fuchsia',
+                                       ),
+                                       ':hover' => array(
+                                               'color' => array(
+                                                       'text' => 'deeppink',
+                                               ),
+                                       ),
+                               ),
+                       ),
+               );
+
+               register_block_style(
+                       'core/group',
+                       array(
+                               'name'       => 'my-variation',
+                               'style_data' => $variation_styles_data,
+                       )
+               );
+
+               $theme_json   = WP_Theme_JSON_Resolver::get_theme_data()->get_raw_data();
+               $group_styles = $theme_json['styles']['blocks']['core/group'] ?? array();
+               $expected     = array(
+                       'variations' => array(
+                               'my-variation'            => $variation_styles_data,
+
+                               /*
+                                * The following block style variations are registered
+                                * automatically from their respective JSON files within the
+                                * theme's `/styles` directory.
+                                */
+                               'block-style-variation-a' => array(
+                                       'color' => array(
+                                               'background' => 'indigo',
+                                               'text'       => 'plum',
+                                       ),
+                               ),
+                               'block-style-variation-b' => array(
+                                       'color' => array(
+                                               'background' => 'midnightblue',
+                                               'text'       => 'lightblue',
+                                       ),
+                               ),
+                       ),
+               );
+
+               unregister_block_style( 'core/group', 'my-variation' );
+
+               $this->assertSameSetsWithIndex( $group_styles, $expected );
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/tests/block-supports/block-style-variations.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunittestsblocksupportswpCreateBlockStyleVariationInstanceNamephp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/tests/block-supports/wpCreateBlockStyleVariationInstanceName.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/block-supports/wpCreateBlockStyleVariationInstanceName.php                              (rev 0)
+++ trunk/tests/phpunit/tests/block-supports/wpCreateBlockStyleVariationInstanceName.php        2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,24 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+
+/**
+ * @group block-supports
+ *
+ * @covers ::wp_create_block_style_variation_instance_name
+ */
+class Tests_Block_Supports_WpCreateBlockStyleVariationInstanceName extends WP_UnitTestCase {
+       /**
+        * Tests that the block style variations block support creates
+        * the correct variation instance name.
+        *
+        * @ticket 61312
+        *
+        * @covers ::wp_create_block_style_variation_instance_name
+        */
+       public function test_block_style_variation_instance_name_generation() {
+               $block    = array( 'name' => 'test/block' );
+               $actual   = wp_create_block_style_variation_instance_name( $block, 'my-variation' );
+               $expected = 'my-variation--' . md5( serialize( $block ) );
+
+               $this->assertSame( $expected, $actual, 'Block style variation instance name should be correct' );
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/tests/block-supports/wpCreateBlockStyleVariationInstanceName.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunittestsblocksupportswpGetBlockStyleVariationNameFromClassphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/phpunit/tests/block-supports/wpGetBlockStyleVariationNameFromClass.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/block-supports/wpGetBlockStyleVariationNameFromClass.php                                (rev 0)
+++ trunk/tests/phpunit/tests/block-supports/wpGetBlockStyleVariationNameFromClass.php  2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,65 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+
+/**
+ * @group block-supports
+ *
+ * @covers ::wp_get_block_style_variation_name_from_class
+ */
+class Tests_Block_Supports_WpGetBlockStyleVariationNameFromClass extends WP_UnitTestCase {
+       /**
+        * Tests variation names are extracted correctly from a CSS class string.
+        *
+        * @ticket 61312
+        *
+        * @covers ::wp_get_block_style_variation_name_from_class
+        *
+        * @dataProvider data_block_style_variation_name_extraction
+        *
+        * @param string     $class_string CSS class string.
+        * @param array|null $expected     Expected variation names.
+        */
+       public function test_block_style_variation_name_extraction( $class_string, $expected ) {
+               $actual = wp_get_block_style_variation_name_from_class( $class_string );
+
+               $this->assertSame(
+                       $expected,
+                       $actual,
+                       'Block style variation names extracted from CSS class string should match'
+               );
+       }
+
+       /**
+        * Data provider.
+        *
+        * @return array
+        */
+       public function data_block_style_variation_name_extraction() {
+               return array(
+                       // @ticket 61312
+                       'missing class string' => array(
+                               'class_string' => null,
+                               'expected'     => null,
+                       ),
+                       // @ticket 61312
+                       'empty class string'   => array(
+                               'class_string' => '',
+                               'expected'     => array(),
+                       ),
+                       // @ticket 61312
+                       'no variation'         => array(
+                               'class_string' => 'is-style no-variation',
+                               'expected'     => array(),
+                       ),
+                       // @ticket 61312
+                       'single variation'     => array(
+                               'class_string' => 'custom-class is-style-outline',
+                               'expected'     => array( 'outline' ),
+                       ),
+                       // @ticket 61312
+                       'multiple variations'  => array(
+                               'class_string' => 'is-style-light custom-class is-style-outline',
+                               'expected'     => array( 'light', 'outline' ),
+                       ),
+               );
+       }
+}
</ins><span class="cx" style="display: block; padding: 0 10px">Property changes on: trunk/tests/phpunit/tests/block-supports/wpGetBlockStyleVariationNameFromClass.php
</span><span class="cx" style="display: block; padding: 0 10px">___________________________________________________________________
</span></span></pre></div>
<a id="svneolstyle"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: svn:eol-style</h4></div>
<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+native
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of property
</span><a id="trunktestsphpunitteststhemethemeDirphp"></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/themeDir.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/themeDir.php      2024-05-31 03:46:59 UTC (rev 58263)
+++ trunk/tests/phpunit/tests/theme/themeDir.php        2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -177,6 +177,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">                        'Block Theme',
</span><span class="cx" style="display: block; padding: 0 10px">                        'Block Theme Child Theme',
</span><span class="cx" style="display: block; padding: 0 10px">                        'Block Theme Child Deprecated Path',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                        'Block Theme Child With Block Style Variations Theme',
</ins><span class="cx" style="display: block; padding: 0 10px">                         'Block Theme Child with no theme.json',
</span><span class="cx" style="display: block; padding: 0 10px">                        'Block Theme Child Theme With Fluid Layout',
</span><span class="cx" style="display: block; padding: 0 10px">                        'Block Theme Child Theme With Fluid Typography',
</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-05-31 03:46:59 UTC (rev 58263)
+++ trunk/tests/phpunit/tests/theme/wpThemeJsonResolver.php     2024-05-31 05:47:23 UTC (rev 58264)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1023,33 +1023,62 @@
</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">-         * Tests that get_style_variations returns all variations, including parent theme variations if the theme is a child,
-        * and that the child variation overwrites the parent variation of the same name.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * Tests that `get_style_variations` returns all the appropriate variations,
+        * including parent variations if the theme is a child, and that the child
+        * variation overwrites the parent variation of the same name.
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * Note: This covers both theme and block style variations.
+        *
</ins><span class="cx" style="display: block; padding: 0 10px">          * @ticket 57545
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 61312
</ins><span class="cx" style="display: block; padding: 0 10px">          *
</span><span class="cx" style="display: block; padding: 0 10px">         * @covers WP_Theme_JSON_Resolver::get_style_variations
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         *
+        * @dataProvider data_get_style_variations
+        *
+        * @param string $theme               Name of the theme to use.
+        * @param string $scope               Scope to filter variations by e.g. theme vs block.
+        * @param array  $expected_variations Collection of expected 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">-        public function test_get_style_variations_returns_all_variations() {
-               // Switch to a child theme.
-               switch_theme( 'block-theme-child' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_style_variations( $theme, $scope, $expected_variations ) {
+               switch_theme( $theme );
</ins><span class="cx" style="display: block; padding: 0 10px">                 wp_set_current_user( self::$administrator_id );
</span><span class="cx" style="display: block; padding: 0 10px"> 
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $actual_settings   = WP_Theme_JSON_Resolver::get_style_variations();
-               $expected_settings = array(
-                       array(
-                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
-                               'title'    => 'variation-a',
-                               'settings' => array(
-                                       'blocks' => array(
-                                               'core/paragraph' => array(
-                                                       'color' => array(
-                                                               'palette' => array(
-                                                                       'theme' => array(
-                                                                               array(
-                                                                                       'slug'  => 'dark',
-                                                                                       'name'  => 'Dark',
-                                                                                       'color' => '#010101',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $actual_variations = WP_Theme_JSON_Resolver::get_style_variations( $scope );
+
+               wp_recursive_ksort( $actual_variations );
+               wp_recursive_ksort( $expected_variations );
+
+               $this->assertSame( $expected_variations, $actual_variations );
+       }
+
+       /**
+        * Data provider for test_get_style_variations
+        *
+        * @return array
+        */
+       public function data_get_style_variations() {
+               return array(
+                       // @ticket 57545
+                       'theme_style_variations' => array(
+                               'theme'               => 'block-theme-child',
+                               'scope'               => 'theme',
+                               'expected_variations' => array(
+                                       array(
+                                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                                               'title'    => 'variation-a',
+                                               'settings' => array(
+                                                       'blocks' => array(
+                                                               'core/paragraph' => array(
+                                                                       'color' => array(
+                                                                               'palette' => array(
+                                                                                       'theme' => array(
+                                                                                               array(
+                                                                                                       'slug' => 'dark',
+                                                                                                       'name' => 'Dark',
+                                                                                                       'color' => '#010101',
+                                                                                               ),
+                                                                                       ),
</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">@@ -1056,50 +1085,78 @@
</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">-                                ),
-                       ),
-                       array(
-                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
-                               'title'    => 'variation-b',
-                               'settings' => array(
-                                       'blocks' => array(
-                                               'core/post-title' => array(
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 array(
+                                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                                               'title'    => 'variation-b',
+                                               'settings' => array(
+                                                       'blocks' => array(
+                                                               'core/post-title' => array(
+                                                                       'color' => array(
+                                                                               'palette' => array(
+                                                                                       'theme' => array(
+                                                                                               array(
+                                                                                                       'slug' => 'dark',
+                                                                                                       'name' => 'Dark',
+                                                                                                       'color' => '#010101',
+                                                                                               ),
+                                                                                       ),
+                                                                               ),
+                                                                       ),
+                                                               ),
+                                                       ),
+                                               ),
+                                       ),
+                                       array(
+                                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                                               'title'    => 'Block theme variation',
+                                               'settings' => array(
</ins><span class="cx" style="display: block; padding: 0 10px">                                                         'color' => array(
</span><span class="cx" style="display: block; padding: 0 10px">                                                                'palette' => array(
</span><span class="cx" style="display: block; padding: 0 10px">                                                                        'theme' => array(
</span><span class="cx" style="display: block; padding: 0 10px">                                                                                array(
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                                                                        'slug'  => 'dark',
-                                                                                       'name'  => 'Dark',
-                                                                                       'color' => '#010101',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                                                                 'slug'  => 'foreground',
+                                                                                       'name'  => 'Foreground',
+                                                                                       'color' => '#3F67C6',
</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="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">+                                                'styles'   => array(
+                                                       'blocks' => array(
+                                                               'core/post-title' => array(
+                                                                       'typography' => array(
+                                                                               'fontWeight' => '700',
+                                                                       ),
+                                                               ),
+                                                       ),
+                                               ),
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        array(
-                               'version'  => WP_Theme_JSON::LATEST_SCHEMA,
-                               'title'    => 'Block theme variation',
-                               'settings' => array(
-                                       'color' => array(
-                                               'palette' => array(
-                                                       'theme' => array(
-                                                               array(
-                                                                       'slug'  => 'foreground',
-                                                                       'name'  => 'Foreground',
-                                                                       'color' => '#3F67C6',
-                                                               ),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'block_style_variations' => array(
+                               'theme'               => 'block-theme-child-with-block-style-variations',
+                               'scope'               => 'block',
+                               'expected_variations' => array(
+                                       array(
+                                               'blockTypes' => array( 'core/group', 'core/columns', 'core/media-text' ),
+                                               'version'    => 3,
+                                               'title'      => 'block-style-variation-a',
+                                               'styles'     => array(
+                                                       'color' => array(
+                                                               'background' => 'darkcyan',
+                                                               'text'       => 'aliceblue',
</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                ),
-                               'styles'   => array(
-                                       'blocks' => array(
-                                               'core/post-title' => array(
-                                                       'typography' => array(
-                                                               'fontWeight' => '700',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                                 array(
+                                               'blockTypes' => array( 'core/group', 'core/columns' ),
+                                               'version'    => 3,
+                                               'title'      => 'block-style-variation-b',
+                                               'styles'     => array(
+                                                       'color' => array(
+                                                               'background' => 'midnightblue',
+                                                               'text'       => 'lightblue',
</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">@@ -1106,14 +1163,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">-
-               wp_recursive_ksort( $actual_settings );
-               wp_recursive_ksort( $expected_settings );
-
-               $this->assertSame(
-                       $expected_settings,
-                       $actual_settings
-               );
</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">        /**
</span></span></pre>
</div>
</div>

</body>
</html>