<!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>