Changeset 64598

Timestamp:

10/20/2026 12:27:21 PM (12 hours ago)

Author:

Mamaduka

Message:

Editor: Add pseudo-selector support for select elements.

Adds :hover, :focus, :focus-visible, and :active to the pseudo selectors that WP_Theme_JSON allows for the select element, so themes can style these states in theme.json.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/14544.
Discussed in ​https://github.com/WordPress/gutenberg/pull/81644.

Props onemaggie, mikachan, mamaduka.
Fixes #66349.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (2 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

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

@@ -672 +672 @@
          * @since 7.2.0 Added ':required', ':user-valid', ':user-invalid', ':focus', ':focus-visible',
          *              and '::placeholder' support for the text input element.
+         * @since 7.2.0 Added ':hover', ':focus', ':focus-visible', and ':active' support for the select element.
          * @var array
          */
@@ -678 +679 @@
                 'button'    => array( ':link', ':any-link', ':visited', ':hover', ':focus', ':focus-visible', ':active' ),
                 'textInput' => array( ':required', ':user-valid', ':user-invalid', ':focus', ':focus-visible', '::placeholder' ),
+                'select'    => array( ':hover', ':focus', ':focus-visible', ':active' ),
         );
 

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

@@ -2617 +2617 @@
 
                 $expected = 'h4{background-color: red;color: green;}';
+
+                $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+        }
+
+        /**
+         * @ticket 66349
+         */
+        public function test_get_stylesheet_handles_select_pseudo_selectors() {
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(
+                                        'elements' => array(
+                                                'select' => array(
+                                                        'color'          => array(
+                                                                'text' => 'green',
+                                                        ),
+                                                        ':hover'         => array(
+                                                                'color' => array(
+                                                                        'background' => 'blue',
+                                                                ),
+                                                        ),
+                                                        ':focus'         => array(
+                                                                'outline' => array(
+                                                                        'style' => 'dotted',
+                                                                ),
+                                                        ),
+                                                        ':focus-visible' => array(
+                                                                'outline' => array(
+                                                                        'style' => 'solid',
+                                                                ),
+                                                        ),
+                                                        ':active'        => array(
+                                                                'color' => array(
+                                                                        'background' => 'yellow',
+                                                                ),
+                                                        ),
+                                                        ':visited'       => array(
+                                                                'color' => array(
+                                                                        'text' => 'red',
+                                                                ),
+                                                        ),
+                                                ),
+                                        ),
+                                ),
+                        )
+                );
+
+                $expected = 'select{color: green;}:root :where(select:hover){background-color: blue;}:root :where(select:focus){outline-style: dotted;}:root :where(select:focus-visible){outline-style: solid;}:root :where(select:active){background-color: yellow;}';
+
+                $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );
+        }
+
+        /**
+         * @ticket 66349
+         */
+        public function test_get_stylesheet_handles_block_level_select_pseudo_selectors() {
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(
+                                        'blocks' => array(
+                                                'core/categories' => array(
+                                                        'elements' => array(
+                                                                'select' => array(
+                                                                        'color'  => array(
+                                                                                'text' => 'green',
+                                                                        ),
+                                                                        ':hover' => array(
+                                                                                'color' => array(
+                                                                                        'background' => 'blue',
+                                                                                ),
+                                                                        ),
+                                                                ),
+                                                        ),
+                                                ),
+                                        ),
+                                ),
+                        )
+                );
+
+                $expected = ':root :where(.wp-block-categories select){color: green;}:root :where(.wp-block-categories select:hover){background-color: blue;}';
 
                 $this->assertSame( $expected, $theme_json->get_stylesheet( array( 'styles' ), null, array( 'skip_root_layout_styles' => true ) ) );