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

Timestamp:

07/06/2026 04:23:49 AM (8 weeks ago)

Author:

isabel_brison

Message:

Editor: add support to style current menu item via theme.json.

Adds processing of custom states from theme.json and a new -current custom state type that is enabled for navigation link block.

Props onemaggie, isabel_brison.
Fixes #64806.

File:

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

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

@@ -642 +642 @@
          */
         const VALID_BLOCK_PSEUDO_SELECTORS = array(
-                'core/button' => array( ':hover', ':focus', ':focus-visible', ':active' ),
+                'core/button'          => array( ':hover', ':focus', ':focus-visible', ':active' ),
+                'core/navigation-link' => array( ':hover', ':focus', ':focus-visible', ':active' ),
+        );
+
+        /**
+         * Custom states for blocks that map to CSS class selectors rather than
+         * CSS pseudo-selectors. Values use the '-' prefix (e.g. '-current') to
+         * distinguish them from real CSS pseudo-selectors and breakpoint states.
+         *
+         * The CSS selector for each state is defined in the block's block.json
+         * under `selectors.states`, e.g.:
+         *
+         *   "selectors": { "states": { "-current": ".some-css-selector" } }
+         *
+         * This constant controls which states are valid in theme.json for a given
+         * block. Blocks listed here also inherit their VALID_BLOCK_PSEUDO_SELECTORS
+         * as valid sub-states, producing compound selectors such as
+         * `.wp-block-navigation-item.current-menu-item:hover`.
+         *
+         * @since 7.1.0
+         * @var array
+         */
+        const VALID_BLOCK_CUSTOM_STATES = array(
+                'core/navigation-link' => array( '-current' ),
         );
 
@@ -1156 +1179 @@
                                 foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo_selector ) {
                                         $schema_styles_blocks[ $block ][ $pseudo_selector ] = $styles_non_top_level;
+                                }
+                        }
+
+                        // Add custom states for blocks that support them (e.g. '-current' for navigation).
+                        if ( isset( static::VALID_BLOCK_CUSTOM_STATES[ $block ] ) ) {
+                                foreach ( static::VALID_BLOCK_CUSTOM_STATES[ $block ] as $custom_state ) {
+                                        $custom_state_schema = $styles_non_top_level;
+                                        /*
+                                         * The same pseudo-selectors valid for the block at the top level
+                                         * are also valid within each custom state.
+                                         */
+                                        if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] ) ) {
+                                                foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $block ] as $pseudo ) {
+                                                        $custom_state_schema[ $pseudo ] = $styles_non_top_level;
+                                                }
+                                        }
+                                        $schema_styles_blocks[ $block ][ $custom_state ] = $custom_state_schema;
                                 }
                         }
@@ -1556 +1596 @@
                         if ( ! empty( $style_selectors ) ) {
                                 static::$blocks_metadata[ $block_name ]['styleVariations'] = $style_selectors;
+                        }
+
+                        // If the block has custom states defined in block.json, store their selectors.
+                        if ( ! empty( $block_type->selectors['states'] ) && is_array( $block_type->selectors['states'] ) ) {
+                                static::$blocks_metadata[ $block_name ]['states'] = $block_type->selectors['states'];
                         }
                 }
@@ -3215 +3260 @@
                                                                         'css'         => static::append_to_selector( $selector, $pseudo_selector ),
                                                                 );
+                                                        }
+                                                }
+                                        }
+                                }
+
+                                // Handle custom states (e.g. '-current' for navigation).
+                                if ( isset( static::VALID_BLOCK_CUSTOM_STATES[ $name ] ) ) {
+                                        foreach ( static::VALID_BLOCK_CUSTOM_STATES[ $name ] as $custom_state ) {
+                                                if (
+                                                        isset( $theme_json['styles']['blocks'][ $name ][ $custom_state ] ) &&
+                                                        isset( $selectors[ $name ]['states'][ $custom_state ] )
+                                                ) {
+                                                        $custom_css_selector = $selectors[ $name ]['states'][ $custom_state ];
+                                                        $nodes[]             = array(
+                                                                'name'       => $name,
+                                                                'path'       => array( 'styles', 'blocks', $name, $custom_state ),
+                                                                'selector'   => $custom_css_selector,
+                                                                'selectors'  => $feature_selectors,
+                                                                'elements'   => $selectors[ $name ]['elements'] ?? array(),
+                                                                'duotone'    => $duotone_selector,
+                                                                'variations' => $variation_selectors,
+                                                                'css'        => $custom_css_selector,
+                                                        );
+
+                                                        // Sub-pseudo-selectors within the custom state.
+                                                        if ( isset( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] ) ) {
+                                                                foreach ( static::VALID_BLOCK_PSEUDO_SELECTORS[ $name ] as $pseudo ) {
+                                                                        if ( isset( $theme_json['styles']['blocks'][ $name ][ $custom_state ][ $pseudo ] ) ) {
+                                                                                $compound_css_selector = static::append_to_selector( $custom_css_selector, $pseudo );
+                                                                                $nodes[]               = array(
+                                                                                        'name'       => $name,
+                                                                                        'path'       => array( 'styles', 'blocks', $name, $custom_state, $pseudo ),
+                                                                                        'selector'   => $compound_css_selector,
+                                                                                        'selectors'  => $feature_selectors,
+                                                                                        'elements'   => $selectors[ $name ]['elements'] ?? array(),
+                                                                                        'duotone'    => $duotone_selector,
+                                                                                        'variations' => $variation_selectors,
+                                                                                        'css'        => $compound_css_selector,
+                                                                                );
+                                                                        }
+                                                                }
                                                         }
                                                 }