Changeset 61607 for trunk/src/wp-includes/class-wp-theme-json.php

Timestamp:

02/10/2026 03:19:36 PM (8 months ago)

Author:

scruffian

Message:

Editor: Add support for pseudo elements for the block and its variations on theme.json.

Adds support for pseudo elements on the core/button block for ( ':hover', ':focus', ':focus-visible', ':active' ) at the theme.json level. This is also allowing the block's variations to control the same pseudo elements, so now we can style hover for the outline variation too.

Example usage:

"styles": {
	"blocks": {
		"core/button": {
			"color": {
				"background": "blue"
			},
			":hover": {
				"color": {
					"background": "green"
				}
			},
			":focus": {
				"color": {
					"background": "purple"
				}
			},
			"variations": {
				"outline": {
					":hover": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

Reviewed by palak678, getdave, MaggieCabrera.

Props MaggieCabrera, scruffian, palak678. joedolson, getdave, mikachan.
Fixes #64263.

File:

• trunk/src/wp-includes/class-wp-theme-json.php (modified) (8 diffs)

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

@@ -611 +611 @@
 
         /**
+         * The valid pseudo-selectors that can be used for blocks.
+         *
+         * @since 7.0
+         * @var array
+         */
+        const VALID_BLOCK_PSEUDO_SELECTORS = array(
+                'core/button' => array( ':hover', ':focus', ':focus-visible', ':active' ),
+        );
+
+        /**
          * The valid elements that can be found under styles.
          *
@@ -700 +710 @@
         }
 
+
+        /**
+         * Processes pseudo-selectors for any node (block or variation).
+         *
+         * @param array  $node The node data (block or variation).
+         * @param string $base_selector The base selector.
+         * @param array  $settings The theme settings.
+         * @param string $block_name The block name.
+         * @return array Array of pseudo-selector declarations.
+         */
+        private static function process_pseudo_selectors( $node, $base_selector, $settings, $block_name ) {
+                $pseudo_declarations = array();
+
+                if ( ! isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ) ) {
+                        return $pseudo_declarations;
+                }
+
+                foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] as $pseudo_selector ) {
+                        if ( isset( $node[ $pseudo_selector ] ) ) {
+                                $combined_selector                         = static::append_to_selector( $base_selector, $pseudo_selector );
+                                $declarations                              = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, null );
+                                $pseudo_declarations[ $combined_selector ] = $declarations;
+                        }
+                }
+
+                return $pseudo_declarations;
+        }
+
+
         /**
          * Returns a class name by an element name.
@@ -1019 +1058 @@
                         $schema_styles_blocks[ $block ]             = $styles_non_top_level;
                         $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
+
+                        // Add pseudo-selectors for blocks that support them
+                        if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) {
+                                foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) {
+                                        $schema_styles_blocks[ $block ][ $pseudo_selector ] = $styles_non_top_level;
+                                }
+                        }
                 }
 
@@ -1041 +1087 @@
                         $schema_styles_variations = array();
                         if ( ! empty( $style_variation_names ) ) {
-                                $schema_styles_variations = array_fill_keys( $style_variation_names, $block_style_variation_styles );
+                                foreach ( $style_variation_names as $variation_name ) {
+                                        $variation_schema = $block_style_variation_styles;
+
+                                        // Add pseudo-selectors to variations for blocks that support them
+                                        if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) {
+                                                foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) {
+                                                        $variation_schema[ $pseudo_selector ] = $styles_non_top_level;
+                                                }
+                                        }
+
+                                        $schema_styles_variations[ $variation_name ] = $variation_schema;
+                                }
                         }
 
@@ -2743 +2800 @@
                                         'css'        => $selector,
                                 );
+
+                                // Handle any pseudo selectors for the block.
+                                if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] ) ) {
+                                        foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] as $pseudo_selector ) {
+                                                if ( isset( $theme_json['styles']['blocks'][ $name ][ $pseudo_selector ] ) ) {
+                                                        $nodes[] = array(
+                                                                'name'       => $name,
+                                                                'path'       => array( 'styles', 'blocks', $name, $pseudo_selector ),
+                                                                'selector'   => static::append_to_selector( $selector, $pseudo_selector ),
+                                                                'selectors'  => $feature_selectors,
+                                                                'duotone'    => $duotone_selector,
+                                                                'variations' => $variation_selectors,
+                                                                'css'        => static::append_to_selector( $selector, $pseudo_selector ),
+                                                        );
+                                                }
+                                        }
+                                }
                         }
 
@@ -2839 +2913 @@
                                 // Compute declarations for remaining styles not covered by feature level selectors.
                                 $style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
+
+                                // Process pseudo-selectors for this variation (e.g., :hover, :focus)
+                                $block_name                    = isset( $block_metadata['name'] ) ? $block_metadata['name'] : ( in_array( 'blocks', $block_metadata['path'], true ) && count( $block_metadata['path'] ) >= 3 ? $block_metadata['path'][2] : null );
+                                $variation_pseudo_declarations = static::process_pseudo_selectors( $style_variation_node, $style_variation['selector'], $settings, $block_name );
+                                $style_variation_declarations  = array_merge( $style_variation_declarations, $variation_pseudo_declarations );
+
                                 // Store custom CSS for the style variation.
                                 if ( isset( $style_variation_node['css'] ) ) {
@@ -2871 +2951 @@
                 if ( isset( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
                         $element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
+                }
+
+                /*
+                 * Check if we're processing a block pseudo-selector.
+                 * $block_metadata['path'] = array( 'styles', 'blocks', 'core/button', ':hover' );
+                 */
+                $is_processing_block_pseudo = false;
+                $block_pseudo_selector      = null;
+                if ( in_array( 'blocks', $block_metadata['path'], true ) && count( $block_metadata['path'] ) >= 4 ) {
+                        $block_name        = $block_metadata['path'][2]; // 'core/button'
+                        $last_path_element = $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ]; // ':hover'
+
+                        if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ) &&
+                                in_array( $last_path_element, static::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ], true ) ) {
+                                $is_processing_block_pseudo = true;
+                                $block_pseudo_selector      = $last_path_element;
+                        }
                 }
 
@@ -2902 +2999 @@
                 ) {
                         $declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
+                } elseif ( $is_processing_block_pseudo ) {
+                        // Process block pseudo-selector styles
+                        // For block pseudo-selectors, we need to get the block data first, then access the pseudo-selector
+                        $block_name  = $block_metadata['path'][2]; // 'core/button'
+                        $block_data  = _wp_array_get( $this->theme_json, array( 'styles', 'blocks', $block_name ), array() );
+                        $pseudo_data = isset( $block_data[ $block_pseudo_selector ] ) ? $block_data[ $block_pseudo_selector ] : array();
+
+                        $declarations = static::compute_style_properties( $pseudo_data, $settings, null, $this->theme_json, $selector, $use_root_padding );
                 } else {
                         $declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );