Changeset 54118

Timestamp:

09/10/2022 12:37:00 PM (2 years ago)

Author:

SergeyBiryukov

Message:

Editor: Backport Elements API updates.

This commit backports the original PRs from Gutenberg repository:

• ​#40260 Add support for button elements to theme.json
• ​#40889 Theme Json: Don't output double selectors for elements inside blocks
• ​#41140 Global Styles: Add support for caption elements
• ​#41160 Global Styles: Load block CSS conditionally
• ​#41240 Global Styles: Button Element: update button element selector
• ​#41335 Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages
• ​#41446 Block styles: Account for style block nodes that have no name
• ​#41696 Global Styles: Allow references to values in other locations in the tree
• ​#41753 Elements: Add an API make it easier to get class names
• ​#41786 Support pseudo selectors on elements in theme json
• ​#41822 Elements: Button - Fix element selectors
• ​#41981 Global Styles: Add support for heading elements
• ​#42072 Fix link element hover bleeding into button element default styles
• ​#42096 Add visited to link element allowed pseudo selector list
• ​#42669 Link elements: Add a :where selector to the :not to lower specificity
• ​#42776 Theme JSON: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON
• ​#43088 Pseudo elements supports on button elements
• ​#43167 Theme_JSON: Use existing append_to_selector for pseudo elements
• ​#43988 Styles API: Fixed selectors for nested elements

Props onemaggie, bernhard-reiter, cbravobernal, mmaattiiaass, scruffian, andraganescu, dpcalhoun, get_dave, Mamaduka, SergeyBiryukov.
See #56467.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (20 diffs)
• src/wp-includes/global-styles-and-settings.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (11 diffs)

trunk/src/wp-includes/class-wp-theme-json.php

@@ -345 +345 @@
 
     /**
+     * Defines which pseudo selectors are enabled for which elements.
+     *
+     * Note: this will affect both top-level and block-level elements.
+     *
+     * @since 6.1.0
+     */
+    const VALID_ELEMENT_PSEUDO_SELECTORS = array(
+        'link'   => array( ':hover', ':focus', ':active', ':visited' ),
+        'button' => array( ':hover', ':focus', ':active', ':visited' ),
+    );
+
+    /**
      * The valid elements that can be found under styles.
      *
      * @since 5.8.0
-     * @since 6.1.0 Added `heading`, `button`, and `caption` to the elements.
+     * @since 6.1.0 Added `heading`, `button`. and `caption` elements.
      * @var string[]
      */
     const ELEMENTS = array(
-        'link'    => 'a',
+        'link'    => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
         'heading' => 'h1, h2, h3, h4, h5, h6',
         'h1'      => 'h1',
@@ -366 +378 @@
     );
 
+    const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
+        'button'  => 'wp-element-button',
+        'caption' => 'wp-element-caption',
+    );
+
+    /**
+     * Returns a class name by an element name.
+     *
+     * @since 6.1.0
+     *
+     * @param string $element The name of the element.
+     * @return string The name of the class.
+     */
+    public static function get_element_class_name( $element ) {
+        $class_name = '';
+
+        if ( array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ) {
+            $class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
+        }
+
+        return $class_name;
+    }
+
     /**
      * Options that settings.appearanceTools enables.
@@ -489 +524 @@
      */
     protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
+
         $output = array();
 
@@ -495 +531 @@
         }
 
+        // Preserve only the top most level keys.
         $output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
 
-        // Some styles are only meant to be available at the top-level (e.g.: blockGap),
-        // hence, the schema for blocks & elements should not have them.
+        /*
+         * Remove any rules that are annotated as "top" in VALID_STYLES constant.
+         * Some styles are only meant to be available at the top-level (e.g.: blockGap),
+         * hence, the schema for blocks & elements should not have them.
+         */
         $styles_non_top_level = static::VALID_STYLES;
         foreach ( array_keys( $styles_non_top_level ) as $section ) {
@@ -511 +551 @@
         $schema                 = array();
         $schema_styles_elements = array();
+
+        /*
+         * Set allowed element pseudo selectors based on per element allow list.
+         * Target data structure in schema:
+         * e.g.
+         * - top level elements: `$schema['styles']['elements']['link'][':hover']`.
+         * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
+         */
         foreach ( $valid_element_names as $element ) {
             $schema_styles_elements[ $element ] = $styles_non_top_level;
-        }
+
+            if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+                foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+                    $schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
+                }
+            }
+        }
+
         $schema_styles_blocks   = array();
         $schema_settings_blocks = array();
@@ -521 +576 @@
             $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
         }
+
         $schema['styles']             = static::VALID_STYLES;
         $schema['styles']['blocks']   = $schema_styles_blocks;
@@ -548 +604 @@
 
         return $output;
+    }
+
+    /**
+     * Appends a sub-selector to an existing one.
+     *
+     * Given the compounded $selector "h1, h2, h3"
+     * and the $to_append selector ".some-class" the result will be
+     * "h1.some-class, h2.some-class, h3.some-class".
+     *
+     * @since 5.8.0
+     * @since 6.1.0 Added append position.
+     *
+     * @param string $selector  Original selector.
+     * @param string $to_append Selector to append.
+     * @param string $position  A position sub-selector should be appended. Default 'right'.
+     * @return string
+     */
+    protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
+        $new_selectors = array();
+        $selectors     = explode( ',', $selector );
+        foreach ( $selectors as $sel ) {
+            $new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
+        }
+        return implode( ',', $new_selectors );
     }
 
@@ -612 +692 @@
                 $element_selector = array();
                 foreach ( $block_selectors as $selector ) {
-                    $element_selector[] = $selector . ' ' . $el_selector;
+                    if ( $selector === $el_selector ) {
+                        $element_selector = array( $el_selector );
+                        break;
+                    }
+                    $element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
                 }
                 static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
@@ -811 +895 @@
                 continue;
             }
-
-            $node         = _wp_array_get( $this->theme_json, $metadata['path'], array() );
-            $selector     = $metadata['selector'];
-            $settings     = _wp_array_get( $this->theme_json, array( 'settings' ) );
-            $declarations = static::compute_style_properties( $node, $settings );
-
-            // 1. Separate the ones who use the general selector
-            // and the ones who use the duotone selector.
-            $declarations_duotone = array();
-            foreach ( $declarations as $index => $declaration ) {
-                if ( 'filter' === $declaration['name'] ) {
-                    unset( $declarations[ $index ] );
-                    $declarations_duotone[] = $declaration;
-                }
-            }
-
-            /*
-             * Reset default browser margin on the root body element.
-             * This is set on the root selector **before** generating the ruleset
-             * from the `theme.json`. This is to ensure that if the `theme.json` declares
-             * `margin` in its `spacing` declaration for the `body` element then these
-             * user-generated values take precedence in the CSS cascade.
-             * @link https://github.com/WordPress/gutenberg/issues/36147.
-             */
-            if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
-                $block_rules .= 'body { margin: 0; }';
-            }
-
-            // 2. Generate the rules that use the general selector.
-            $block_rules .= static::to_ruleset( $selector, $declarations );
-
-            // 3. Generate the rules that use the duotone selector.
-            if ( isset( $metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
-                $selector_duotone = static::scope_selector( $metadata['selector'], $metadata['duotone'] );
-                $block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
-            }
-
-            if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
-                $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
-                $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
-                $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
-
-                $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
-                if ( $has_block_gap_support ) {
-                    $block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
-                    $block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
-                }
-            }
+            $block_rules .= static::get_styles_for_block( $metadata );
         }
 
@@ -971 +1008 @@
 
         return $selector . '{' . $declaration_block . '}';
-    }
-
-    /**
-     * Function that appends a sub-selector to a existing one.
-     *
-     * Given the compounded $selector "h1, h2, h3"
-     * and the $to_append selector ".some-class" the result will be
-     * "h1.some-class, h2.some-class, h3.some-class".
-     *
-     * @since 5.8.0
-     *
-     * @param string $selector  Original selector.
-     * @param string $to_append Selector to append.
-     * @return string
-     */
-    protected static function append_to_selector( $selector, $to_append ) {
-        $new_selectors = array();
-        $selectors     = explode( ',', $selector );
-        foreach ( $selectors as $sel ) {
-            $new_selectors[] = $sel . $to_append;
-        }
-
-        return implode( ',', $new_selectors );
     }
 
@@ -1313 +1327 @@
      * @since 5.8.0
      * @since 5.9.0 Added the `$settings` and `$properties` parameters.
+     * @since 6.1.0 Added the `$theme_json` parameter.
      *
      * @param array $styles    Styles to process.
      * @param array $settings  Theme settings.
      * @param array $properties Properties metadata.
+     * @param array $theme_json Theme JSON array.
      * @return array Returns the modified $declarations.
      */
-    protected static function compute_style_properties( $styles, $settings = array(), $properties = null ) {
+    protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null ) {
         if ( null === $properties ) {
             $properties = static::PROPERTIES_METADATA;
@@ -1330 +1346 @@
 
         foreach ( $properties as $css_property => $value_path ) {
-            $value = static::get_property_value( $styles, $value_path );
+            $value = static::get_property_value( $styles, $value_path, $theme_json );
 
             // Look up protected properties, keyed by value path.
@@ -1366 +1382 @@
      * "--wp--preset--color--secondary".
      *
+     * It also converts references to a path to the value
+     * stored at that location, e.g.
+     * { "ref": "style.color.background" } => "#fff".
+     *
      * @since 5.8.0
      * @since 5.9.0 Added support for values of array type, which are returned as is.
+     * @since 6.1.0 Added the `$theme_json` parameter.
      *
      * @param array $styles Styles subtree.
      * @param array $path   Which property to process.
+     * @param array $theme_json Theme JSON array.
      * @return string|array Style property value.
      */
-    protected static function get_property_value( $styles, $path ) {
+    protected static function get_property_value( $styles, $path, $theme_json = null ) {
         $value = _wp_array_get( $styles, $path, '' );
+
+        /*
+         * This converts references to a path to the value at that path
+         * where the values is an array with a "ref" key, pointing to a path.
+         * For example: { "ref": "style.color.background" } => "#fff".
+         */
+        if ( is_array( $value ) && array_key_exists( 'ref', $value ) ) {
+            $value_path = explode( '.', $value['ref'] );
+            $ref_value  = _wp_array_get( $theme_json, $value_path );
+            // Only use the ref value if we find anything.
+            if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
+                $value = $ref_value;
+            }
+
+            if ( is_array( $ref_value ) && array_key_exists( 'ref', $ref_value ) ) {
+                $path_string      = json_encode( $path );
+                $ref_value_string = json_encode( $ref_value );
+                _doing_it_wrong(
+                    'get_property_value',
+                    sprintf(
+                        /* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
+                        __( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.' ),
+                        'theme.json',
+                        $ref_value_string,
+                        $path_string,
+                        $ref_value['ref']
+                    ),
+                    '6.1.0'
+                );
+            }
+        }
 
         if ( '' === $value || is_array( $value ) ) {
@@ -1380 +1433 @@
         }
 
+        // Convert custom CSS properties.
         $prefix     = 'var:';
         $prefix_len = strlen( $prefix );
@@ -1491 +1545 @@
                     'selector' => static::ELEMENTS[ $element ],
                 );
-            }
+
+                // Handle any pseudo selectors for the element.
+                if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+                    foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+
+                        if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
+                            $nodes[] = array(
+                                'path'     => array( 'styles', 'elements', $element ),
+                                'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
+                            );
+                        }
+                    }
+                }
+            }
+        }
+
+        // Blocks.
+        if ( ! isset( $theme_json['styles']['blocks'] ) ) {
+            return $nodes;
+        }
+
+        $nodes = array_merge( $nodes, static::get_block_nodes( $theme_json ) );
+
+        /**
+         * Filters the list of style nodes with metadata.
+         *
+         * This allows for things like loading block CSS independently.
+         *
+         * @since 6.1.0
+         *
+         * @param array $nodes Style nodes with metadata.
+         */
+        return apply_filters( 'get_style_nodes', $nodes );
+    }
+
+    /**
+     * A public helper to get the block nodes from a theme.json file.
+     *
+     * @since 6.1.0
+     *
+     * @return array The block nodes in theme.json.
+     */
+    public function get_styles_block_nodes() {
+        return static::get_block_nodes( $this->theme_json );
+    }
+
+    /**
+     * An internal method to get the block nodes from a theme.json file.
+     *
+     * @since 6.1.0
+     *
+     * @param array $theme_json The theme.json converted to an array.
+     * @return array The block nodes in theme.json.
+     */
+    private static function get_block_nodes( $theme_json ) {
+        $selectors = static::get_blocks_metadata();
+        $nodes     = array();
+        if ( ! isset( $theme_json['styles'] ) ) {
+            return $nodes;
         }
 
@@ -1511 +1623 @@
 
             $nodes[] = array(
+                'name'     => $name,
                 'path'     => array( 'styles', 'blocks', $name ),
                 'selector' => $selector,
@@ -1522 +1635 @@
                         'selector' => $selectors[ $name ]['elements'][ $element ],
                     );
+
+                    // Handle any pseudo selectors for the element.
+                    if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+                        foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
+                            if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
+                                $nodes[] = array(
+                                    'path'     => array( 'styles', 'blocks', $name, 'elements', $element ),
+                                    'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
+                                );
+                            }
+                        }
+                    }
                 }
             }
@@ -1527 +1652 @@
 
         return $nodes;
+    }
+
+    /**
+     * Gets the CSS rules for a particular block from theme.json.
+     *
+     * @since 6.1.0
+     *
+     * @param array $block_metadata Meta data about the block to get styles for.
+     * @return array Styles for the block.
+     */
+    public function get_styles_for_block( $block_metadata ) {
+
+        $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+
+        $selector = $block_metadata['selector'];
+        $settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
+
+        /*
+         * Get a reference to element name from path.
+         * $block_metadata['path'] = array( 'styles','elements','link' );
+         * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
+         * Skip non-element paths like just ['styles'].
+         */
+        $is_processing_element = in_array( 'elements', $block_metadata['path'], true );
+
+        $current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
+
+        $element_pseudo_allowed = array();
+
+        if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+            $element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
+        }
+
+        /*
+         * Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
+         * This also resets the array keys.
+         */
+        $pseudo_matches = array_values(
+            array_filter(
+                $element_pseudo_allowed,
+                function( $pseudo_selector ) use ( $selector ) {
+                    return str_contains( $selector, $pseudo_selector );
+                }
+            )
+        );
+
+        $pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
+
+        /*
+         * If the current selector is a pseudo selector that's defined in the allow list for the current
+         * element then compute the style properties for it.
+         * Otherwise just compute the styles for the default selector as normal.
+         */
+        if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
+            array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
+            && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
+        ) {
+            $declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json );
+        } else {
+            $declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json );
+        }
+
+        $block_rules = '';
+
+        /*
+         * 1. Separate the declarations that use the general selector
+         * from the ones using the duotone selector.
+         */
+        $declarations_duotone = array();
+        foreach ( $declarations as $index => $declaration ) {
+            if ( 'filter' === $declaration['name'] ) {
+                unset( $declarations[ $index ] );
+                $declarations_duotone[] = $declaration;
+            }
+        }
+
+        /*
+         * Reset default browser margin on the root body element.
+         * This is set on the root selector **before** generating the ruleset
+         * from the `theme.json`. This is to ensure that if the `theme.json` declares
+         * `margin` in its `spacing` declaration for the `body` element then these
+         * user-generated values take precedence in the CSS cascade.
+         * @link https://github.com/WordPress/gutenberg/issues/36147.
+         */
+        if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+            $block_rules .= 'body { margin: 0; }';
+        }
+
+        // 2. Generate and append the rules that use the general selector.
+        $block_rules .= static::to_ruleset( $selector, $declarations );
+
+        // 3. Generate and append the rules that use the duotone selector.
+        if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
+            $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
+            $block_rules     .= static::to_ruleset( $selector_duotone, $declarations_duotone );
+        }
+
+        if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
+            $block_rules .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
+            $block_rules .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
+            $block_rules .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
+
+            $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
+            if ( $has_block_gap_support ) {
+                $block_rules .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+                $block_rules .= '.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
+            }
+        }
+
+        return $block_rules;
     }
 
@@ -1838 +2073 @@
         $valid_block_names   = array_keys( static::get_blocks_metadata() );
         $valid_element_names = array_keys( static::ELEMENTS );
-        $theme_json          = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
+
+        $theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
 
         $blocks_metadata = static::get_blocks_metadata();
         $style_nodes     = static::get_style_nodes( $theme_json, $blocks_metadata );
+
         foreach ( $style_nodes as $metadata ) {
             $input = _wp_array_get( $theme_json, $metadata['path'], array() );
@@ -1849 +2086 @@
 
             $output = static::remove_insecure_styles( $input );
+
+            /*
+             * Get a reference to element name from path.
+             * $metadata['path'] = array( 'styles', 'elements', 'link' );
+             */
+            $current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
+
+            /*
+             * $output is stripped of pseudo selectors. Re-add and process them
+             * or insecure styles here.
+             */
+            if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
+                foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
+                    if ( isset( $input[ $pseudo_selector ] ) ) {
+                        $output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
+                    }
+                }
+            }
+
             if ( ! empty( $output ) ) {
                 _wp_array_set( $sanitized, $metadata['path'], $output );

trunk/src/wp-includes/global-styles-and-settings.php

@@ -193 +193 @@
     return $svgs;
 }
+
+/**
+ * Adds global style rules to the inline style for each block.
+ *
+ * @since 6.1.0
+ */
+function wp_add_global_styles_for_blocks() {
+    $tree        = WP_Theme_JSON_Resolver::get_merged_data();
+    $block_nodes = $tree->get_styles_block_nodes();
+    foreach ( $block_nodes as $metadata ) {
+        $block_css = $tree->get_styles_for_block( $metadata );
+
+        if ( isset( $metadata['name'] ) ) {
+            $block_name = str_replace( 'core/', '', $metadata['name'] );
+            /*
+             * These block styles are added on block_render.
+             * This hooks inline CSS to them so that they are loaded conditionally
+             * based on whether or not the block is used on the page.
+             */
+            wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
+        }
+
+        // The likes of block element styles from theme.json do not have  $metadata['name'] set.
+        if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
+            $result = array_values(
+                array_filter(
+                    $metadata['path'],
+                    function ( $item ) {
+                        if ( strpos( $item, 'core/' ) !== false ) {
+                            return true;
+                        }
+                        return false;
+                    }
+                )
+            );
+            if ( isset( $result[0] ) ) {
+                $block_name = str_replace( 'core/', '', $result[0] );
+                wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
+            }
+        }
+    }
+}

trunk/src/wp-includes/script-loader.php

@@ -2355 +2355 @@
 
 /**
+ * Applies a filter to the list of style nodes that comes from WP_Theme_JSON::get_style_nodes().
+ *
+ * This particular filter removes all of the blocks from the array.
+ *
+ * We want WP_Theme_JSON to be ignorant of the implementation details of how the CSS is being used.
+ * This filter allows us to modify the output of WP_Theme_JSON depending on whether or not we are
+ * loading separate assets, without making the class aware of that detail.
+ *
+ * @since 6.1.0
+ *
+ * @param array $nodes The nodes to filter.
+ * @return array A filtered array of style nodes.
+ */
+function wp_filter_out_block_nodes( $nodes ) {
+    return array_filter(
+        $nodes,
+        function( $node ) {
+            return ! in_array( 'blocks', $node['path'], true );
+        },
+        ARRAY_FILTER_USE_BOTH
+    );
+}
+
+/**
  * Enqueues the global styles defined via theme.json.
  *
@@ -2376 +2400 @@
     ) {
         return;
+    }
+
+    /*
+     * If we are loading CSS for each block separately, then we can load the theme.json CSS conditionally.
+     * This removes the CSS from the global-styles stylesheet and adds it to the inline CSS for each block.
+     */
+    if ( $separate_assets ) {
+        add_filter( 'get_style_nodes', 'wp_filter_out_block_nodes' );
+        // Add each block as an inline css.
+        wp_add_global_styles_for_blocks();
     }
 

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -368 +368 @@
 
         $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{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;padding-top: 15px;}';
-        $this->assertEquals( $styles, $theme_json->get_stylesheet() );
-        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertSame( $styles, $theme_json->get_stylesheet() );
+        $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
     }
 
@@ -400 +400 @@
 
         $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; }';
-        $this->assertEquals( $expected, $theme_json->get_stylesheet() );
-        $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
     }
 
@@ -425 +425 @@
 
         $expected = 'body { margin: 0; }body{--wp--style--block-gap: 1em;}.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-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }';
-        $this->assertEquals( $expected, $theme_json->get_stylesheet() );
-        $this->assertEquals( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
     }
 
@@ -458 +458 @@
                             ),
                         ),
-                    ),
-                    'spacing'    => array(
-                        'blockGap' => false,
                     ),
                     'misc'       => 'value',
@@ -554 +551 @@
 
         $variables = 'body{--wp--preset--color--grey: grey;--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;}';
-        $styles    = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.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-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }.wp-site-blocks > * + * { margin-block-start: var( --wp--style--block-gap ); }a{background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a{color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{background-color: #333;color: #111;font-size: 60px;}.wp-block-post-date{color: #123456;}.wp-block-post-date a{background-color: #777;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
+        $styles    = 'body { margin: 0; }body{color: var(--wp--preset--color--grey);}.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; }a:where(:not(.wp-element-button)){background-color: #333;color: #111;}.wp-block-group{border-radius: 10px;padding: 24px;}.wp-block-group a:where(:not(.wp-element-button)){color: #111;}h1,h2,h3,h4,h5,h6{color: #123456;}h1 a:where(:not(.wp-element-button)),h2 a:where(:not(.wp-element-button)),h3 a:where(:not(.wp-element-button)),h4 a:where(:not(.wp-element-button)),h5 a:where(:not(.wp-element-button)),h6 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;color: #555;}.wp-block-image{border-top-left-radius: 10px;border-bottom-right-radius: 1em;margin-bottom: 30px;}';
         $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-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;}';
         $all       = $variables . $styles . $presets;
-        $this->assertEquals( $all, $theme_json->get_stylesheet() );
-        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
-        $this->assertEquals( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
-        $this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+        $this->assertSame( $all, $theme_json->get_stylesheet() );
+        $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+        $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
     }
 
@@ -588 +585 @@
         );
 
-        $this->assertEquals(
+        $this->assertSame(
             'h1.has-white-color,h2.has-white-color,h3.has-white-color,h4.has-white-color,h5.has-white-color,h6.has-white-color{color: var(--wp--preset--color--white) !important;}h1.has-white-background-color,h2.has-white-background-color,h3.has-white-background-color,h4.has-white-background-color,h5.has-white-background-color,h6.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}h1.has-white-border-color,h2.has-white-border-color,h3.has-white-border-color,h4.has-white-border-color,h5.has-white-border-color,h6.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
             $theme_json->get_stylesheet( array( 'presets' ) )
@@ -632 +629 @@
         $variables = '.wp-block-group{--wp--preset--color--grey: grey;}';
         $all       = $variables . $styles . $presets;
-        $this->assertEquals( $all, $theme_json->get_stylesheet() );
-        $this->assertEquals( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
-        $this->assertEquals( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
-        $this->assertEquals( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
+        $this->assertSame( $all, $theme_json->get_stylesheet() );
+        $this->assertSame( $styles, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertSame( $presets, $theme_json->get_stylesheet( array( 'presets' ) ) );
+        $this->assertSame( $variables, $theme_json->get_stylesheet( array( 'variables' ) ) );
     }
 
@@ -673 +670 @@
         );
 
-        $this->assertEquals(
+        $this->assertSame(
             '.has-grey-color{color: var(--wp--preset--color--grey) !important;}.has-dark-grey-color{color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-color{color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-color{color: var(--wp--preset--color--white-2-black) !important;}.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-background-color{background-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-background-color{background-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-background-color{background-color: var(--wp--preset--color--white-2-black) !important;}.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}.has-dark-grey-border-color{border-color: var(--wp--preset--color--dark-grey) !important;}.has-light-grey-border-color{border-color: var(--wp--preset--color--light-grey) !important;}.has-white-2-black-border-color{border-color: var(--wp--preset--color--white-2-black) !important;}',
             $theme_json->get_stylesheet( array( 'presets' ) )
         );
-        $this->assertEquals(
+        $this->assertSame(
             'body{--wp--preset--color--grey: grey;--wp--preset--color--dark-grey: grey;--wp--preset--color--light-grey: grey;--wp--preset--color--white-2-black: grey;--wp--custom--white-2-black: value;}',
             $theme_json->get_stylesheet( array( 'variables' ) )
@@ -720 +717 @@
         );
 
-        $this->assertEquals(
+        $this->assertSame(
             '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;}',
             $theme_json->get_stylesheet()
         );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_handles_whitelisted_element_pseudo_selectors() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'link' => array(
+                            'color'  => array(
+                                'text'       => 'green',
+                                'background' => 'red',
+                            ),
+                            ':hover' => array(
+                                'color'      => array(
+                                    'text'       => 'red',
+                                    'background' => 'green',
+                                ),
+                                'typography' => array(
+                                    'textTransform' => 'uppercase',
+                                    'fontSize'      => '10em',
+                                ),
+                            ),
+                            ':focus' => array(
+                                'color' => array(
+                                    'text'       => 'yellow',
+                                    'background' => 'black',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $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;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_handles_only_pseudo_selector_rules_for_given_property() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'link' => array(
+                            ':hover' => array(
+                                'color'      => array(
+                                    'text'       => 'red',
+                                    'background' => 'green',
+                                ),
+                                'typography' => array(
+                                    'textTransform' => 'uppercase',
+                                    'fontSize'      => '10em',
+                                ),
+                            ),
+                            ':focus' => array(
+                                'color' => array(
+                                    'text'       => 'yellow',
+                                    'background' => 'black',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $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;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_ignores_pseudo_selectors_on_non_whitelisted_elements() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'h4' => array(
+                            'color'  => array(
+                                'text'       => 'green',
+                                'background' => 'red',
+                            ),
+                            ':hover' => array(
+                                'color' => array(
+                                    'text'       => 'red',
+                                    'background' => 'green',
+                                ),
+                            ),
+                            ':focus' => array(
+                                'color' => array(
+                                    'text'       => 'yellow',
+                                    'background' => 'black',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $element_styles = 'h4{background-color: red;color: green;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_ignores_non_whitelisted_pseudo_selectors() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'link' => array(
+                            'color'     => array(
+                                'text'       => 'green',
+                                'background' => 'red',
+                            ),
+                            ':hover'    => array(
+                                'color' => array(
+                                    'text'       => 'red',
+                                    'background' => 'green',
+                                ),
+                            ),
+                            ':levitate' => array(
+                                'color' => array(
+                                    'text'       => 'yellow',
+                                    'background' => 'black',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $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;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+        $this->assertStringNotContainsString( 'a:levitate{', $theme_json->get_stylesheet( array( 'styles' ) ) );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_handles_priority_of_elements_vs_block_elements_pseudo_selectors() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'blocks' => array(
+                        'core/group' => array(
+                            'elements' => array(
+                                'link' => array(
+                                    'color'  => array(
+                                        'text'       => 'green',
+                                        'background' => 'red',
+                                    ),
+                                    ':hover' => array(
+                                        'color'      => array(
+                                            'text'       => 'red',
+                                            'background' => 'green',
+                                        ),
+                                        'typography' => array(
+                                            'textTransform' => 'uppercase',
+                                            'fontSize' => '10em',
+                                        ),
+                                    ),
+                                    ':focus' => array(
+                                        'color' => array(
+                                            'text'       => 'yellow',
+                                            'background' => 'black',
+                                        ),
+                                    ),
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $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;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_stylesheet_handles_whitelisted_block_level_element_pseudo_selectors() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'link' => array(
+                            'color'  => array(
+                                'text'       => 'green',
+                                'background' => 'red',
+                            ),
+                            ':hover' => array(
+                                'color' => array(
+                                    'text'       => 'red',
+                                    'background' => 'green',
+                                ),
+                            ),
+                        ),
+                    ),
+                    'blocks'   => array(
+                        'core/group' => array(
+                            'elements' => array(
+                                'link' => array(
+                                    ':hover' => array(
+                                        'color' => array(
+                                            'text'       => 'yellow',
+                                            'background' => 'black',
+                                        ),
+                                    ),
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $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; }';
+
+        $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;}';
+
+        $expected = $base_styles . $element_styles;
+
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+        $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ) ) );
     }
 
@@ -2088 +2358 @@
 
     /**
+     * @ticket 56467
+     */
+    public function test_remove_invalid_element_pseudo_selectors() {
+        $actual = WP_Theme_JSON::remove_insecure_properties(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'elements' => array(
+                        'link' => array(
+                            'color'  => array(
+                                'text'       => 'hotpink',
+                                'background' => 'yellow',
+                            ),
+                            ':hover' => array(
+                                'color' => array(
+                                    'text'       => 'red',
+                                    'background' => 'blue',
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+            true
+        );
+
+        $expected = array(
+            'version' => WP_Theme_JSON::LATEST_SCHEMA,
+            'styles'  => array(
+                'elements' => array(
+                    'link' => array(
+                        'color'  => array(
+                            'text'       => 'hotpink',
+                            'background' => 'yellow',
+                        ),
+                        ':hover' => array(
+                            'color' => array(
+                                'text'       => 'red',
+                                'background' => 'blue',
+                            ),
+                        ),
+                    ),
+                ),
+            ),
+        );
+
+        $this->assertEqualSetsWithIndex( $expected, $actual );
+    }
+
+    /**
      * @ticket 54336
      */
@@ -2622 +2942 @@
         $this->assertEqualSetsWithIndex( $expected, $actual );
     }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_element_class_name_button() {
+        $expected = 'wp-element-button';
+        $actual   = WP_Theme_JSON::get_element_class_name( 'button' );
+
+        $this->assertSame( $expected, $actual );
+    }
+
+    /**
+     * @ticket 56467
+     */
+    public function test_get_element_class_name_invalid() {
+        $expected = '';
+        $actual   = WP_Theme_JSON::get_element_class_name( 'unknown-element' );
+
+        $this->assertSame( $expected, $actual );
+    }
+
+    /**
+     * Testing that dynamic properties in theme.json return the value they refrence,
+     * e.g. array( 'ref' => 'styles.color.background' ) => "#ffffff".
+     *
+     * @ticket 56467
+     */
+    public function test_get_property_value_valid() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => 2,
+                'styles'  => array(
+                    'color'    => array(
+                        'background' => '#ffffff',
+                        'text'       => '#000000',
+                    ),
+                    'elements' => array(
+                        'button' => array(
+                            'color' => array(
+                                'background' => array( 'ref' => 'styles.color.text' ),
+                                'text'       => array( 'ref' => 'styles.color.background' ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $expected = 'body { margin: 0; }body{background-color: #ffffff;color: #000000;}.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-element-button, .wp-block-button__link{background-color: #000000;color: #ffffff;}';
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+    }
+
+    /**
+     * Testing that dynamic properties in theme.json that refer to other dynamic properties in a loop
+     * should be left untouched.
+     *
+     * @ticket 56467
+     * @expectedIncorrectUsage get_property_value
+     */
+    public function test_get_property_value_loop() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => 2,
+                'styles'  => array(
+                    'color'    => array(
+                        'background' => '#ffffff',
+                        'text'       => array( 'ref' => 'styles.elements.button.color.background' ),
+                    ),
+                    'elements' => array(
+                        'button' => array(
+                            'color' => array(
+                                'background' => array( 'ref' => 'styles.color.text' ),
+                                'text'       => array( 'ref' => 'styles.color.background' ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $expected = 'body { margin: 0; }body{background-color: #ffffff;}.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-element-button, .wp-block-button__link{color: #ffffff;}';
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+    }
+
+    /**
+     * Testing that dynamic properties in theme.json that refer to other dynamic properties
+     * should be left unprocessed.
+     *
+     * @ticket 56467
+     * @expectedIncorrectUsage get_property_value
+     */
+    public function test_get_property_value_recursion() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => 2,
+                'styles'  => array(
+                    'color'    => array(
+                        'background' => '#ffffff',
+                        'text'       => array( 'ref' => 'styles.color.background' ),
+                    ),
+                    'elements' => array(
+                        'button' => array(
+                            'color' => array(
+                                'background' => array( 'ref' => 'styles.color.text' ),
+                                'text'       => array( 'ref' => 'styles.color.background' ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $expected = 'body { margin: 0; }body{background-color: #ffffff;color: #ffffff;}.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-element-button, .wp-block-button__link{color: #ffffff;}';
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+    }
+
+    /**
+     * Testing that dynamic properties in theme.json that refer to themselves
+     * should be left unprocessed.
+     *
+     * @ticket 56467
+     * @expectedIncorrectUsage get_property_value
+     */
+    public function test_get_property_value_self() {
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => 2,
+                'styles'  => array(
+                    'color' => array(
+                        'background' => '#ffffff',
+                        'text'       => array( 'ref' => 'styles.color.text' ),
+                    ),
+                ),
+            )
+        );
+
+        $expected = 'body { margin: 0; }body{background-color: #ffffff;}.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; }';
+        $this->assertSame( $expected, $theme_json->get_stylesheet() );
+    }
+
 }