<!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>[56055] trunk: Editor: stabilise layout and refactor definitions.</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/56055">56055</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/56055","name":"Review Commit"}}</script></dd>

<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>isabel_brison</dd>

<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2023-06-27 07:23:04 +0000 (Tue, 27 Jun 2023)</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'>Editor: stabilise layout and refactor definitions.

Marks the layout support stable and moves layout definitions from `theme.json` into `wp-includes/block-supports/layout.php`.

Props andrewserong, poena, ramonopoly, peterwilsoncc.

Fixes <a href="https://core.trac.wordpress.org/ticket/58550">#58550</a>.</pre>

<h3>Modified Paths</h3>

<ul>

<li><a href="#trunksrcwpincludesblocksupportslayoutphp">trunk/src/wp-includes/block-supports/layout.php</a></li>

<li><a href="#trunksrcwpincludesclasswpthemejsonphp">trunk/src/wp-includes/class-wp-theme-json.php</a></li>

<li><a href="#trunksrcwpincludesthemejson">trunk/src/wp-includes/theme.json</a></li>

<li><a href="#trunktestsphpunitteststhemewpThemeJsonphp">trunk/tests/phpunit/tests/theme/wpThemeJson.php</a></li>

</ul>

</div>

<div id="patch">

<h3>Diff</h3>

<a id="trunksrcwpincludesblocksupportslayoutphp"></a>

<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/block-supports/layout.php</h4>

<pre class="diff"><span>

<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/block-supports/layout.php   2023-06-27 06:36:02 UTC (rev 56054)

+++ trunk/src/wp-includes/block-supports/layout.php     2023-06-27 07:23:04 UTC (rev 56055)

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,15 +7,202 @@

</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"> /**

<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Returns layout definitions, keyed by layout type.

+ *

+ * Provides a common definition of slugs, classnames, base styles, and spacing styles for each layout type.

+ * When making changes or additions to layout definitions, the corresponding JavaScript definitions should

+ * also be updated.

+ *

+ * @since 6.3.0

+ * @access private

+ *

+ * @return array[] Layout definitions.

+ */

+function wp_get_layout_definitions() {

+       $layout_definitions = array(

+               'default'     => array(

+                       'name'          => 'default',

+                       'slug'          => 'flow',

+                       'className'     => 'is-layout-flow',

+                       'baseStyles'    => array(

+                               array(

+                                       'selector' => ' > .alignleft',

+                                       'rules'    => array(

+                                               'float'               => 'left',

+                                               'margin-inline-start' => '0',

+                                               'margin-inline-end'   => '2em',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > .alignright',

+                                       'rules'    => array(

+                                               'float'               => 'right',

+                                               'margin-inline-start' => '2em',

+                                               'margin-inline-end'   => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > .aligncenter',

+                                       'rules'    => array(

+                                               'margin-left'  => 'auto !important',

+                                               'margin-right' => 'auto !important',

+                                       ),

+                               ),

+                       ),

+                       'spacingStyles' => array(

+                               array(

+                                       'selector' => ' > :first-child:first-child',

+                                       'rules'    => array(

+                                               'margin-block-start' => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > :last-child:last-child',

+                                       'rules'    => array(

+                                               'margin-block-end' => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > *',

+                                       'rules'    => array(

+                                               'margin-block-start' => null,

+                                               'margin-block-end'   => '0',

+                                       ),

+                               ),

+                       ),

+               ),

+               'constrained' => array(

+                       'name'          => 'constrained',

+                       'slug'          => 'constrained',

+                       'className'     => 'is-layout-constrained',

+                       'baseStyles'    => array(

+                               array(

+                                       'selector' => ' > .alignleft',

+                                       'rules'    => array(

+                                               'float'               => 'left',

+                                               'margin-inline-start' => '0',

+                                               'margin-inline-end'   => '2em',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > .alignright',

+                                       'rules'    => array(

+                                               'float'               => 'right',

+                                               'margin-inline-start' => '2em',

+                                               'margin-inline-end'   => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > .aligncenter',

+                                       'rules'    => array(

+                                               'margin-left'  => 'auto !important',

+                                               'margin-right' => 'auto !important',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > :where(:not(.alignleft):not(.alignright):not(.alignfull))',

+                                       'rules'    => array(

+                                               'max-width'    => 'var(--wp--style--global--content-size)',

+                                               'margin-left'  => 'auto !important',

+                                               'margin-right' => 'auto !important',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > .alignwide',

+                                       'rules'    => array(

+                                               'max-width' => 'var(--wp--style--global--wide-size)',

+                                       ),

+                               ),

+                       ),

+                       'spacingStyles' => array(

+                               array(

+                                       'selector' => ' > :first-child:first-child',

+                                       'rules'    => array(

+                                               'margin-block-start' => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > :last-child:last-child',

+                                       'rules'    => array(

+                                               'margin-block-end' => '0',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > *',

+                                       'rules'    => array(

+                                               'margin-block-start' => null,

+                                               'margin-block-end'   => '0',

+                                       ),

+                               ),

+                       ),

+               ),

+               'flex'        => array(

+                       'name'          => 'flex',

+                       'slug'          => 'flex',

+                       'className'     => 'is-layout-flex',

+                       'displayMode'   => 'flex',

+                       'baseStyles'    => array(

+                               array(

+                                       'selector' => '',

+                                       'rules'    => array(

+                                               'flex-wrap'   => 'wrap',

+                                               'align-items' => 'center',

+                                       ),

+                               ),

+                               array(

+                                       'selector' => ' > *',

+                                       'rules'    => array(

+                                               'margin' => '0',

+                                       ),

+                               ),

+                       ),

+                       'spacingStyles' => array(

+                               array(

+                                       'selector' => '',

+                                       'rules'    => array(

+                                               'gap' => null,

+                                       ),

+                               ),

+                       ),

+               ),

+               'grid'        => array(

+                       'name'          => 'grid',

+                       'slug'          => 'grid',

+                       'className'     => 'is-layout-grid',

+                       'displayMode'   => 'grid',

+                       'baseStyles'    => array(

+                               array(

+                                       'selector' => ' > *',

+                                       'rules'    => array(

+                                               'margin' => '0',

+                                       ),

+                               ),

+                       ),

+                       'spacingStyles' => array(

+                               array(

+                                       'selector' => '',

+                                       'rules'    => array(

+                                               'gap' => null,

+                                       ),

+                               ),

+                       ),

+               ),

+       );

+

+       return $layout_definitions;

+}

+

+/**

</ins><span class="cx" style="display: block; padding: 0 10px">  * Registers the layout block attribute for block types that support it.

</span><span class="cx" style="display: block; padding: 0 10px">  *

</span><span class="cx" style="display: block; padding: 0 10px">  * @since 5.8.0

<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.

</ins><span class="cx" style="display: block; padding: 0 10px">  * @access private

</span><span class="cx" style="display: block; padding: 0 10px">  *

<span class="cx" style="display: block; padding: 0 10px">  * @param WP_Block_Type $block_type Block Type.

</span><span class="cx" style="display: block; padding: 0 10px">  */

</span><span class="cx" style="display: block; padding: 0 10px"> function wp_register_layout_support( $block_type ) {

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $support_layout = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );

</ins><span class="cx" style="display: block; padding: 0 10px">         if ( $support_layout ) {

</span><span class="cx" style="display: block; padding: 0 10px">                if ( ! $block_type->attributes ) {

</span><span class="cx" style="display: block; padding: 0 10px">                        $block_type->attributes = array();

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -352,6 +539,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">  *

</span><span class="cx" style="display: block; padding: 0 10px">  * @since 5.8.0

<span class="cx" style="display: block; padding: 0 10px">  * @since 6.3.0 Adds compound class to layout wrapper for global spacing styles.

<ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @since 6.3.0 Check for layout support via the `layout` key with fallback to `__experimentalLayout`.

</ins><span class="cx" style="display: block; padding: 0 10px">  * @access private

</span><span class="cx" style="display: block; padding: 0 10px">  *

<span class="cx" style="display: block; padding: 0 10px">  * @param string $block_content Rendered block content.

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -360,7 +548,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">  */

</span><span class="cx" style="display: block; padding: 0 10px"> function wp_render_layout_support_flag( $block_content, $block ) {

</span><span class="cx" style="display: block; padding: 0 10px">        $block_type       = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $support_layout   = block_has_support( $block_type, array( '__experimentalLayout' ), false );

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $support_layout   = block_has_support( $block_type, array( 'layout' ), false ) || block_has_support( $block_type, array( '__experimentalLayout' ), false );

</ins><span class="cx" style="display: block; padding: 0 10px">         $has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">        if ( ! $support_layout && ! $has_child_layout ) {

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -409,16 +597,12 @@

</span><span class="cx" style="display: block; padding: 0 10px">                return (string) $content;

</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">-        $global_settings        = wp_get_global_settings();

-       $global_layout_settings = _wp_array_get( $global_settings, array( 'layout' ), null );

-       $used_layout            = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $global_settings = wp_get_global_settings();

+       $fallback_layout = ! empty( _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) ) ? _wp_array_get( $block_type->supports, array( 'layout', 'default' ), array() ) : _wp_array_get( $block_type->supports, array( '__experimentalLayout', 'default' ), array() );

+       $used_layout     = isset( $block['attrs']['layout'] ) ? $block['attrs']['layout'] : $fallback_layout;

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        if ( isset( $used_layout['inherit'] ) && $used_layout['inherit'] && ! $global_layout_settings ) {

-               return $block_content;

-       }

-

</del><span class="cx" style="display: block; padding: 0 10px">         $class_names        = array();

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-        $layout_definitions = _wp_array_get( $global_layout_settings, array( 'definitions' ), array() );

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $layout_definitions = wp_get_layout_definitions();

</ins><span class="cx" style="display: block; padding: 0 10px">         $container_class    = wp_unique_id( 'wp-container-' );

</span><span class="cx" style="display: block; padding: 0 10px">        $layout_classname   = '';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span></span></pre></div>

<a id="trunksrcwpincludesclasswpthemejsonphp"></a>

<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-theme-json.php</h4>

<pre class="diff"><span>

<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-theme-json.php     2023-06-27 06:36:02 UTC (rev 56054)

+++ trunk/src/wp-includes/class-wp-theme-json.php       2023-06-27 07:23:04 UTC (rev 56055)

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -338,7 +338,7 @@

<span class="cx" style="display: block; padding: 0 10px">         * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.

</span><span class="cx" style="display: block; padding: 0 10px">         * @since 6.2.0 Added `dimensions.minHeight`, 'shadow.presets', 'shadow.defaultPresets',

<span class="cx" style="display: block; padding: 0 10px">         *              `position.fixed` and `position.sticky`.

<del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @since 6.3.0 Added support for `typography.textColumns`.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @since 6.3.0 Added support for `typography.textColumns`, removed `layout.definitions`.

</ins><span class="cx" style="display: block; padding: 0 10px">          *

</span><span class="cx" style="display: block; padding: 0 10px">         * @var array

</span><span class="cx" style="display: block; padding: 0 10px">         */

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -374,7 +374,6 @@

</span><span class="cx" style="display: block; padding: 0 10px">                ),

</span><span class="cx" style="display: block; padding: 0 10px">                'layout'                        => array(

</span><span class="cx" style="display: block; padding: 0 10px">                        'contentSize' => null,

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'definitions' => null,

</del><span class="cx" style="display: block; padding: 0 10px">                         'wideSize'    => null,

</span><span class="cx" style="display: block; padding: 0 10px">                ),

</span><span class="cx" style="display: block; padding: 0 10px">                'position'                      => array(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1277,7 +1276,7 @@

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                if ( isset( $block_metadata['name'] ) ) {

</span><span class="cx" style="display: block; padding: 0 10px">                        $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 if ( ! block_has_support( $block_type, array( 'layout' ), false ) && ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {

</ins><span class="cx" style="display: block; padding: 0 10px">                                 return $block_rules;

</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">@@ -1286,7 +1285,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                $has_block_gap_support    = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;

<span class="cx" style="display: block; padding: 0 10px">                $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.

</span><span class="cx" style="display: block; padding: 0 10px">                $node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $layout_definitions       = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $layout_definitions       = wp_get_layout_definitions();

</ins><span class="cx" style="display: block; padding: 0 10px">                 $layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\ *+>:]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.

</span><span class="cx" style="display: block; padding: 0 10px"> 

<span class="cx" style="display: block; padding: 0 10px">                // Gap styles will only be output if the theme has block gap support, or supports a fallback gap.

</span></span></pre></div>

<a id="trunksrcwpincludesthemejson"></a>

<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/theme.json</h4>

<pre class="diff"><span>

<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/theme.json  2023-06-27 06:36:02 UTC (rev 56054)

+++ trunk/src/wp-includes/theme.json    2023-06-27 07:23:04 UTC (rev 56055)

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -189,177 +189,6 @@

</span><span class="cx" style="display: block; padding: 0 10px">                        ],

</span><span class="cx" style="display: block; padding: 0 10px">                        "text": true

</span><span class="cx" style="display: block; padding: 0 10px">                },

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                "layout": {

-                       "definitions": {

-                               "default": {

-                                       "name": "default",

-                                       "slug": "flow",

-                                       "className": "is-layout-flow",

-                                       "baseStyles": [

-                                               {

-                                                       "selector": " > .alignleft",

-                                                       "rules": {

-                                                               "float": "left",

-                                                               "margin-inline-start": "0",

-                                                               "margin-inline-end": "2em"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > .alignright",

-                                                       "rules": {

-                                                               "float": "right",

-                                                               "margin-inline-start": "2em",

-                                                               "margin-inline-end": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > .aligncenter",

-                                                       "rules": {

-                                                               "margin-left": "auto !important",

-                                                               "margin-right": "auto !important"

-                                                       }

-                                               }

-                                       ],

-                                       "spacingStyles": [

-                                               {

-                                                       "selector": " > :first-child:first-child",

-                                                       "rules": {

-                                                               "margin-block-start": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > :last-child:last-child",

-                                                       "rules": {

-                                                               "margin-block-end": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > *",

-                                                       "rules": {

-                                                               "margin-block-start": null,

-                                                               "margin-block-end": "0"

-                                                       }

-                                               }

-                                       ]

-                               },

-                               "constrained": {

-                                       "name": "constrained",

-                                       "slug": "constrained",

-                                       "className": "is-layout-constrained",

-                                       "baseStyles": [

-                                               {

-                                                       "selector": " > .alignleft",

-                                                       "rules": {

-                                                               "float": "left",

-                                                               "margin-inline-start": "0",

-                                                               "margin-inline-end": "2em"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > .alignright",

-                                                       "rules": {

-                                                               "float": "right",

-                                                               "margin-inline-start": "2em",

-                                                               "margin-inline-end": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > .aligncenter",

-                                                       "rules": {

-                                                               "margin-left": "auto !important",

-                                                               "margin-right": "auto !important"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))",

-                                                       "rules": {

-                                                               "max-width": "var(--wp--style--global--content-size)",

-                                                               "margin-left": "auto !important",

-                                                               "margin-right": "auto !important"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > .alignwide",

-                                                       "rules": {

-                                                               "max-width": "var(--wp--style--global--wide-size)"

-                                                       }

-                                               }

-                                       ],

-                                       "spacingStyles": [

-                                               {

-                                                       "selector": " > :first-child:first-child",

-                                                       "rules": {

-                                                               "margin-block-start": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > :last-child:last-child",

-                                                       "rules": {

-                                                               "margin-block-end": "0"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > *",

-                                                       "rules": {

-                                                               "margin-block-start": null,

-                                                               "margin-block-end": "0"

-                                                       }

-                                               }

-                                       ]

-                               },

-                               "flex": {

-                                       "name": "flex",

-                                       "slug": "flex",

-                                       "className": "is-layout-flex",

-                                       "displayMode": "flex",

-                                       "baseStyles": [

-                                               {

-                                                       "selector": "",

-                                                       "rules": {

-                                                               "flex-wrap": "wrap",

-                                                               "align-items": "center"

-                                                       }

-                                               },

-                                               {

-                                                       "selector": " > *",

-                                                       "rules": {

-                                                               "margin": "0"

-                                                       }

-                                               }

-                                       ],

-                                       "spacingStyles": [

-                                               {

-                                                       "selector": "",

-                                                       "rules": {

-                                                               "gap": null

-                                                       }

-                                               }

-                                       ]

-                               },

-                               "grid": {

-                                       "name": "grid",

-                                       "slug": "grid",

-                                       "className": "is-layout-grid",

-                                       "displayMode": "grid",

-                                       "baseStyles": [

-                                               {

-                                                       "selector": " > *",

-                                                       "rules": {

-                                                               "margin": "0"

-                                                       }

-                                               }

-                                       ],

-                                       "spacingStyles": [

-                                               {

-                                                       "selector": "",

-                                                       "rules": {

-                                                               "gap": null

-                                                       }

-                                               }

-                                       ]

-                               }

-                       }

-               },

</del><span class="cx" style="display: block; padding: 0 10px">                 "shadow": {

</span><span class="cx" style="display: block; padding: 0 10px">                        "defaultPresets": true,

</span><span class="cx" style="display: block; padding: 0 10px">                        "presets": [

</span></span></pre></div>

<a id="trunktestsphpunitteststhemewpThemeJsonphp"></a>

<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/theme/wpThemeJson.php</h4>

<pre class="diff"><span>

<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/theme/wpThemeJson.php   2023-06-27 06:36:02 UTC (rev 56054)

+++ trunk/tests/phpunit/tests/theme/wpThemeJson.php     2023-06-27 07:23:04 UTC (rev 56055)

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -378,6 +378,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">         * @ticket 54336

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_support_for_shorthand_and_longhand_values() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -415,7 +416,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{margin-bottom: 30px;padding-top: 15px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !i

 mportant;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-group{border-radius: 10px;margin: 1em;padding: 24px;}.wp-block-image{margin-bottom: 30px;padding-top: 15px;}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $styles, $theme_json->get_stylesheet() );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );

</span><span class="cx" style="display: block; padding: 0 10px">        }

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -422,6 +423,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">         * @ticket 54336

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_skips_disabled_protected_properties() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -447,7 +449,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto 

 !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );

</span><span class="cx" style="display: block; padding: 0 10px">        }

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -455,6 +457,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">        /**

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 54336

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 58548

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_renders_enabled_protected_properties() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -473,7 +476,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-c

 onstrained)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto 

 !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );

</span><span class="cx" style="display: block; padding: 0 10px">        }

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -483,6 +486,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 54336

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56611

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 58549

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -633,7 +637,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">                $variables = "body{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--duotone--custom-duotone: url('#wp-duotone-custom-duotone');--wp--preset--font-family--small: 14px;--wp--preset--font-family--big: 41px;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}";

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;co

 lor: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto

  !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{color: var(--wp--preset--color--grey);}a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-element-button, .wp-block-button__link{box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}.wp-block-group{background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}.wp-block-heading{color: #123456;}.wp-block-heading a:where(:not(.wp-element-button)){background-color: #33

 3;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a:where(:not(.wp-element-button)){background-color: #777;color: #555;}.wp-block-post-excerpt{column-count: 2;}.wp-block-image{margin-bottom: 30px;}.wp-block-image img, .wp-block-image .components-placeholder{filter: var(--wp--preset--duotone--custom-duotone);}.wp-block-image img, .wp-block-image .wp-block-image__crop-area{border-top-left-radius: 10px;border-bottom-right-radius: 1em;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $presets   = '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-custom-gradient-gradient-background{background: var(--wp--preset--gradient--custom-gradient) !important;}.has-small-font-family{font-family: var(--wp--preset--font-family--small) !important;}.has-big-font-family{font-family: var(--wp--preset--font-family--big) !important;}';

</span><span class="cx" style="display: block; padding: 0 10px">                $all       = $variables . $styles . $presets;

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $all, $theme_json->get_stylesheet() );

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -676,6 +680,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">        /**

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 53175

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 54336

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_preset_rules_come_after_block_rules() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -707,7 +712,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-group{color: red;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $styles    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto

  !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-group{color: red;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $presets   = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';

</span><span class="cx" style="display: block; padding: 0 10px">                $variables = '.wp-block-group{--wp--preset--color--grey: grey;}';

</span><span class="cx" style="display: block; padding: 0 10px">                $all       = $variables . $styles . $presets;

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -766,6 +771,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">        /**

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 53175

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 54336

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_preset_values_are_marked_as_important() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -800,7 +806,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">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'body{--wp--preset--color--grey: grey;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !im

 portant;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}p{background-color: blue;color: red;font-size: 12px;line-height: 1.3;}.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $theme_json->get_stylesheet()

</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">@@ -807,6 +813,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -841,7 +848,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -853,6 +860,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given_property() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -883,7 +891,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = 'a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -895,6 +903,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -925,7 +934,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = 'h4{background-color: red;color: green;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -937,6 +946,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -967,7 +977,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -980,6 +990,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_handles_priority_of_elements_vs_block_elements_pseudo_selectors() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1018,7 +1029,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = '.wp-block-group a:where(:not(.wp-element-button)){background-color: red;color: green;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: green;color: red;font-size: 10em;text-transform: uppercase;}.wp-block-group a:where(:not(.wp-element-button)):focus{background-color: black;color: yellow;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1030,6 +1041,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_handles_whitelisted_block_level_element_pseudo_selectors() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1068,7 +1080,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = 'a:where(:not(.wp-element-button)){background-color: red;color: green;}a:where(:not(.wp-element-button)):hover{background-color: green;color: red;}.wp-block-group a:where(:not(.wp-element-button)):hover{background-color: black;color: yellow;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3146,6 +3158,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">         * e.g. array( 'ref' => 'styles.color.background' ) => "#ffffff".

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_property_value_valid() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3168,7 +3181,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;color: #000000;}.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto 

 !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;color: #000000;}.wp-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</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">@@ -3225,6 +3238,7 @@

<span class="cx" style="display: block; padding: 0 10px">         * should be left untouched.

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          * @expectedIncorrectUsage get_property_value

</span><span class="cx" style="display: block; padding: 0 10px">         */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_property_value_loop() {

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3248,7 +3262,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto 

 !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</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">@@ -3257,6 +3271,7 @@

<span class="cx" style="display: block; padding: 0 10px">         * should be left unprocessed.

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          * @expectedIncorrectUsage get_property_value

</span><span class="cx" style="display: block; padding: 0 10px">         */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_property_value_recursion() {

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3280,7 +3295,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto 

 !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;color: #ffffff;}.wp-element-button, .wp-block-button__link{color: #ffffff;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</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">@@ -3289,6 +3304,7 @@

<span class="cx" style="display: block; padding: 0 10px">         * should be left unprocessed.

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          * @expectedIncorrectUsage get_property_value

</span><span class="cx" style="display: block; padding: 0 10px">         */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_property_value_self() {

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3304,26 +3320,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{background-color: #ffffff;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto 

 !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{background-color: #ffffff;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $this->assertSame( $expected, $theme_json->get_stylesheet() );

</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">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 58548

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_generates_layout_styles( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_generates_layout_styles() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => true,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3339,27 +3349,21 @@

</span><span class="cx" style="display: block; padding: 0 10px"> 

<span class="cx" style="display: block; padding: 0 10px">                // Results also include root site blocks styles.

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow)  > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow)  > * + *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-s

 tart: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1em; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1em; }:where(body .is-layout-flow)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-constrained)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained)

   > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained)  > *{margin-block-start: 1em;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1em;}:where(body .is-layout-grid) {gap: 1em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;

 margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $theme_json->get_stylesheet( array( 'styles' ) )

</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 58548

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_generates_layout_styles_with_spacing_presets( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_generates_layout_styles_with_spacing_presets() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => true,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3375,26 +3379,20 @@

</span><span class="cx" style="display: block; padding: 0 10px"> 

<span class="cx" style="display: block; padding: 0 10px">                // Results also include root site blocks styles.

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow)  > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow)  > * + *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margi

 n-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--60); margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: var(--wp--preset--spacing--60); }:where(body .is-layout-flow)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow)  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-constrained)  > :f

 irst-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrained)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained)  > *{margin-block-start: var(--wp--preset--spacing--60);margin-block-end: 0;}:where(body .is-layout-flex) {gap: var(--wp--preset--spacing--60);}:where(body .is-layout-grid) {gap: var(--wp--preset--spacing--60);}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is

 -layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $theme_json->get_stylesheet( array( 'styles' ) )

</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_generates_fallback_gap_layout_styles( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_generates_fallback_gap_layout_styles() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => null,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3411,26 +3409,20 @@

</span><span class="cx" style="display: block; padding: 0 10px"> 

<span class="cx" style="display: block; padding: 0 10px">                // Results also include root site blocks styles.

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;

 }body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $stylesheet

</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_generates_base_fallback_gap_layout_styles( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_generates_base_fallback_gap_layout_styles() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => null,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3442,27 +3434,21 @@

</span><span class="cx" style="display: block; padding: 0 10px"> 

<span class="cx" style="display: block; padding: 0 10px">                // Note the `base-layout-styles` includes a fallback gap for the Columns block for backwards compatibility.

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 ':where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width

 : var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $stylesheet

</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><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_skips_layout_styles( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_skips_layout_styles() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 add_theme_support( 'disable-layout-styles' );

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => null,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3481,20 +3467,14 @@

</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">-         * @dataProvider data_get_layout_definitions

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @param array $layout_definitions Layout definitions as stored in core theme.json.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values( $layout_definitions ) {

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ public function test_get_stylesheet_generates_valid_block_gap_values_and_skips_null_or_false_values() {

</ins><span class="cx" style="display: block; padding: 0 10px">                 $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="cx" style="display: block; padding: 0 10px">                                'version'  => WP_Theme_JSON::LATEST_SCHEMA,

</span><span class="cx" style="display: block; padding: 0 10px">                                'settings' => array(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                                        'layout'  => array(

-                                               'definitions' => $layout_definitions,

-                                       ),

</del><span class="cx" style="display: block; padding: 0 10px">                                         'spacing' => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'blockGap' => true,

</span><span class="cx" style="display: block; padding: 0 10px">                                        ),

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3531,99 +3511,15 @@

</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">                $this->assertSame(

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow)  > *{margin-block-start: 0;margin-block-end: 0;}:where(body .is-layout-flow)  > * + *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inli

 ne-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flow > * + *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: 1rem; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: 1rem; }:where(body .is-layout-flow)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow)  > *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-constrained)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constrain

 ed)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained)  > *{margin-block-start: 1rem;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1rem;}:where(body .is-layout-grid) {gap: 1rem;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !impo

 rtant;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-post-content{color: gray;}.wp-block-social-links-is-layout-flow > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-social-links-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-social-links-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-social-links-is-layout-flex{gap: 0;}.wp-block-social-links-is

 -layout-grid{gap: 0;}.wp-block-buttons-is-layout-flow > :first-child:first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-flow > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-flow > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > :first-child:first-child{margin-block-start: 0;}.wp-block-buttons-is-layout-constrained > :last-child:last-child{margin-block-end: 0;}.wp-block-buttons-is-layout-constrained > *{margin-block-start: 0;margin-block-end: 0;}.wp-block-buttons-is-layout-flex{gap: 0;}.wp-block-buttons-is-layout-grid{gap: 0;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         $theme_json->get_stylesheet()

</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">        /**

<del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         * Data provider for layout tests.

-        *

</del><span class="cx" style="display: block; padding: 0 10px">          * @ticket 56467

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-         *

-        * @return array

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+  * @ticket 58550

</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 data_get_layout_definitions() {

-               return array(

-                       'layout definitions' => array(

-                               array(

-                                       'default' => array(

-                                               'name'          => 'default',

-                                               'slug'          => 'flow',

-                                               'className'     => 'is-layout-flow',

-                                               'baseStyles'    => array(

-                                                       array(

-                                                               'selector' => ' > .alignleft',

-                                                               'rules'    => array(

-                                                                       'float'               => 'left',

-                                                                       'margin-inline-start' => '0',

-                                                                       'margin-inline-end'   => '2em',

-                                                               ),

-                                                       ),

-                                                       array(

-                                                               'selector' => ' > .alignright',

-                                                               'rules'    => array(

-                                                                       'float'               => 'right',

-                                                                       'margin-inline-start' => '2em',

-                                                                       'margin-inline-end'   => '0',

-                                                               ),

-                                                       ),

-                                                       array(

-                                                               'selector' => ' > .aligncenter',

-                                                               'rules'    => array(

-                                                                       'margin-left'  => 'auto !important',

-                                                                       'margin-right' => 'auto !important',

-                                                               ),

-                                                       ),

-                                               ),

-                                               'spacingStyles' => array(

-                                                       array(

-                                                               'selector' => ' > *',

-                                                               'rules'    => array(

-                                                                       'margin-block-start' => '0',

-                                                                       'margin-block-end'   => '0',

-                                                               ),

-                                                       ),

-                                                       array(

-                                                               'selector' => ' > * + *',

-                                                               'rules'    => array(

-                                                                       'margin-block-start' => null,

-                                                                       'margin-block-end'   => '0',

-                                                               ),

-                                                       ),

-                                               ),

-                                       ),

-                                       'flex'    => array(

-                                               'name'          => 'flex',

-                                               'slug'          => 'flex',

-                                               'className'     => 'is-layout-flex',

-                                               'displayMode'   => 'flex',

-                                               'baseStyles'    => array(

-                                                       array(

-                                                               'selector' => '',

-                                                               'rules'    => array(

-                                                                       'flex-wrap'   => 'wrap',

-                                                                       'align-items' => 'center',

-                                                               ),

-                                                       ),

-                                               ),

-                                               'spacingStyles' => array(

-                                                       array(

-                                                               'selector' => '',

-                                                               'rules'    => array(

-                                                                       'gap' => null,

-                                                               ),

-                                                       ),

-                                               ),

-                                       ),

-                               ),

-                       ),

-               );

-       }

-

-       /**

-        * @ticket 56467

-        */

</del><span class="cx" style="display: block; padding: 0 10px">         public function test_get_styles_for_block_with_padding_aware_alignments() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="cx" style="display: block; padding: 0 10px">                        array(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3649,7 +3545,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                        'selector' => 'body',

</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">-                $expected    = 'body { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(

 --wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected    = 'body { margin: 0; }.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(-

 -wp--style--root--padding-left); }.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{

 float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{--wp--style--root--padding-top: 10px;--wp--style--root--padding-right: 12px;--wp--style--root--padding-bottom: 10px;--wp--style--root--padding-left: 12px;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $style_rules = $theme_json->get_styles_for_block( $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $root_rules . $style_rules );

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3657,6 +3553,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_styles_for_block_without_padding_aware_alignments() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3680,7 +3577,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                        'selector' => 'body',

</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">-                $expected    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected    = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}body{padding-top: 10px;padding-right: 12px;padding-bottom: 10px;padding-left: 12px;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $style_rules = $theme_json->get_styles_for_block( $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $root_rules . $style_rules );

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3688,6 +3585,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">         * @ticket 56467

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_styles_for_block_with_content_width() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3707,7 +3605,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                        'selector' => 'body',

</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">-                $expected    = 'body { margin: 0;--wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected    = 'body { margin: 0;--wp--style--global--content-size: 800px;--wp--style--global--wide-size: 1000px; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-la

 yout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $root_rules  = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $style_rules = $theme_json->get_styles_for_block( $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $root_rules . $style_rules );

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3974,6 +3872,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">        /**

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56611

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 58548

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_styles_with_appearance_tools() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3990,7 +3889,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                        'selector' => 'body',

</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">-                $expected   = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: ; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $expected   = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.wp-site-blocks) > * { margin-block-start: ; margin-block-end: 0; }:where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }:where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }body { --wp--style--block-gap: ; }:where(body .is-layout-flow)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-flow)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-flow)  > *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-constrained)  > :first-child:first-child{margin-block-start: 0;}:where(body .is-layout-constra

 ined)  > :last-child:last-child{margin-block-end: 0;}:where(body .is-layout-constrained)  > *{margin-block-start: 1;margin-block-end: 0;}:where(body .is-layout-flex) {gap: 1;}:where(body .is-layout-grid) {gap: 1;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;m

 argin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $root_rules = $theme_json->get_root_layout_rules( WP_Theme_JSON::ROOT_BLOCK_SELECTOR, $metadata );

</span><span class="cx" style="display: block; padding: 0 10px">                $this->assertSame( $expected, $root_rules );

</span><span class="cx" style="display: block; padding: 0 10px">        }

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4380,6 +4279,7 @@

<span class="cx" style="display: block; padding: 0 10px">         * Tests the core separator block outbut based on various provided settings.

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="cx" style="display: block; padding: 0 10px">         * @ticket 56903

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          *

</span><span class="cx" style="display: block; padding: 0 10px">         * @dataProvider data_update_separator_declarations

</span><span class="cx" style="display: block; padding: 0 10px">         *

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4419,7 +4319,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                                                'background' => 'blue',

</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">-                                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: blue;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margi

 n-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-separator{background-color: blue;color: blue;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         ),

<span class="cx" style="display: block; padding: 0 10px">                        // If background and text are defined, do not include border-color, as text color is enough.

</span><span class="cx" style="display: block; padding: 0 10px">                        'background and text, no border-color' => array(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4429,7 +4329,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                                                'text'       => 'red',

</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">-                                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;color: red;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margi

 n-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-separator{background-color: blue;color: red;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         ),

<span class="cx" style="display: block; padding: 0 10px">                        // If only text is defined, do not include border-color, as by itself is enough.

</span><span class="cx" style="display: block; padding: 0 10px">                        'only text'                            => array(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4438,9 +4338,9 @@

</span><span class="cx" style="display: block; padding: 0 10px">                                                'text' => 'red',

</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">-                                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{color: red;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margi

 n-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-separator{color: red;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         ),

<del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // If background, text, and border-color are defined, include everything, CSS specifity will decide which to apply.

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // If background, text, and border-color are defined, include everything, CSS specificity will decide which to apply.

</ins><span class="cx" style="display: block; padding: 0 10px">                         'background, text, and border-color'   => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                array(

</span><span class="cx" style="display: block; padding: 0 10px">                                        'color'  => array(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4451,10 +4351,10 @@

</span><span class="cx" style="display: block; padding: 0 10px">                                                'color' => 'pink',

</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">-                                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;color: red;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margi

 n-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-separator{background-color: blue;border-color: pink;color: red;}',

</ins><span class="cx" style="display: block; padding: 0 10px">                         ),

<del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                        // If background and border color are defined, include everything, CSS specifity will decide which to apply.

-                       'background, text, and border-color'   => array(

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                 // If background and border color are defined, include everything, CSS specificity will decide which to apply.

+                       'background, and border-color'         => array(

</ins><span class="cx" style="display: block; padding: 0 10px">                                 array(

</span><span class="cx" style="display: block; padding: 0 10px">                                        'color'  => array(

</span><span class="cx" style="display: block; padding: 0 10px">                                                'background' => 'blue',

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4463,7 +4363,7 @@

</span><span class="cx" style="display: block; padding: 0 10px">                                                'color' => 'pink',

</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">-                                'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }.wp-block-separator{background-color: blue;border-color: pink;}',

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+                         'expected_output' => 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margi

 n-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}.wp-block-separator{background-color: blue;border-color: pink;}',

</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">@@ -4470,6 +4370,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">         * @ticket 57354

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_stylesheet_returns_outline_styles() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4498,7 +4399,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $base_styles = 'body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: au

 to !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="cx" style="display: block; padding: 0 10px">                $element_styles = '.wp-element-button, .wp-block-button__link{outline-color: red;outline-offset: 3px;outline-style: dashed;outline-width: 3px;}.wp-element-button:hover, .wp-block-button__link:hover{outline-color: blue;outline-offset: 3px;outline-style: solid;outline-width: 3px;}';

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4537,6 +4438,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">         * @ticket 57559

</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         * @ticket 58550

</ins><span class="cx" style="display: block; padding: 0 10px">          */

</span><span class="cx" style="display: block; padding: 0 10px">        public function test_get_shadow_styles_for_blocks() {

</span><span class="cx" style="display: block; padding: 0 10px">                $theme_json = new WP_Theme_JSON(

</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4570,7 +4472,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"> 

</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-                $global_styles   = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';

</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+         $global_styles   = 'body{--wp--preset--shadow--natural: 5px 5px 0 0 black;}body { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}body .is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}body .is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}body .is-layout-constrained >

  .aligncenter{margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){max-width: var(--wp--style--global--content-size);margin-left: auto !important;margin-right: auto !important;}body .is-layout-constrained > .alignwide{max-width: var(--wp--style--global--wide-size);}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}';

</ins><span class="cx" style="display: block; padding: 0 10px">                 $element_styles  = 'a:where(:not(.wp-element-button)){box-shadow: var(--wp--preset--shadow--natural);}.wp-element-button, .wp-block-button__link{box-shadow: var(--wp--preset--shadow--natural);}p{box-shadow: var(--wp--preset--shadow--natural);}';

</span><span class="cx" style="display: block; padding: 0 10px">                $expected_styles = $global_styles . $element_styles;

</span><span class="cx" style="display: block; padding: 0 10px"> 

</span></span></pre>

</div>

</div>

</body>

</html>