Backport Global Styles: add support for select or dropdown elements

[onemaggie]

This PR adds a new class that can be used by themers and extenders to style selects or dropdown elements. Right now the experimental form block doesn't have dropdowns in it, but many extenders do, so I wanted to cover them too in line with the work being done at ​https://github.com/WordPress/gutenberg/pull/70378/

We are adding a new class wp-element-select the same way we do for the button element, since it's less disruptive than styling the select element directly and can be slowly adopted by plugins as they see fit

This one is a little hard to test without having a native block that has a dropdown in it. What I did was:

1. alter a third party block to have the wp-element-select class.
2. added the following to my theme.json file:

"elements": {
			"select": {
				"color": {
					"text": "red",
					"background": "blue"
				}
			},
}

Backport for ​https://github.com/WordPress/gutenberg/pull/70379

## What?

Part of ​https://github.com/WordPress/gutenberg/issues/34198

This PR adds a new class that can be used by themers and extenders to style selects or dropdown elements. Right now the experimental form block doesn't have dropdowns in it, but many extenders do, so I wanted to cover them too in line with the work being done at #70378

## Why?

So a theme can style consistently how forms should look like regardless of the plugins installed (if they opt in this new API)

## How?

We are adding a new class wp-element-select the same way we do for the button element. Discussion on the closed ​https://github.com/WordPress/gutenberg/issues/70068 led me to the opt in solution, since it's less disruptive and can be slowly adopted by plugins as they see fit

## Testing Instructions

This one is a little hard to test without having a native block that has a dropdown in it. What I did was:

1. alter a WooCommerce block to have the wp-element-select.
2. added the following to my theme.json file:

"elements": {
			"select": {
				"color": {
					"text": "red",
					"background": "blue"
				}
			},
}

Trac ticket:

https://core.trac.wordpress.org/ticket/63555

[SirLouen]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8961.diff

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Three 1.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WooCommerce 9.9.3

Testing Instructions

1. Install WooCommerce
2. Add some mock data (some products)
3. Edit woocommerce/src/Blocks/BlockTypes/CatalogSorting.php. Around line 39 add something like:

   $catalog_sorting = $this->add_wp_element_select_class( $catalog_sorting );
   

This will add the wp-element class to the Catalog Sorting Block

4. Set a block theme like 2023
5. Go to the Widgets Section and add a Catalog Sorting Block to the Sidebar, for example.
6. Edit the theme.json of 2023 theme and add in the elements section, some colours like described in the OP, mocking Gutenberg's behaviour.

Expected Results

• Select should take the colours indicated

Actual Results

1. ✅ Colours appear with the patch

Supplemental Artifacts

Sample Demo:

[yashjawale]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8961.diff

Testing instructions followed from #comment:4
By manually adding wp-element-select class to WooCommerce CatalogSorting block on line 47 at woocommerce/src/Blocks/BlockTypes/CatalogSorting.php inside render() method

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Three 1.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • WooCommerce 9.9.5

Actual Results

1. ✅ Can style select colors with theme.json

Supplemental Artifacts

[tusharbharti]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8961

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Example Static 0.1.0
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

theme.json current schema needs to be updated to allow select as a valid property in elements as currently it says select is not allowed.

Supplemental Artifacts

[SirLouen]

6.9.0 Milestone proposed during today's <bug-scrub>
​More information

[wildworks]

This ticket is a backport from Gutenberg and should be addressed in the 6.9 release.

[scruffian]

In 61023:

Editor: Add support for text inputs to theme.json.

Adds support for text input elements to theme.json so that theme builders and extenders can be style text input elements consistently.

Text input elements are textarea, and input with type email, number, password, search, text, tel and url. We are targeting the HTML elements directly rather than adding a CSS class, as we do for other elements that theme.json supports. This commit adds no extra styling unless a theme opts in to use this and the specificity of any generated CSS with the element is 0.

See original Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/70378.

Example usage:

	"elements": {
		"textInput": {
			"border": {
				"radius": "0",
				"style": "solid",
				"width": "1px",
				"color": "red"
			},
			"color": {
				"text": "var(--wp--preset--color--theme-2)"
			},
			"typography": {
				"fontFamily": "var(--wp--preset--font-family--inter)"
			}
		}
	}

Reviewed by mukesh27, scruffian.
Merges [9600] to the 6.9 branch.

Props onemaggie, mukesh27, sabernhardt, joen, get_dave, wildworks, ocean90, mikachan, poena.
Fixes #63878. See #63555.

[scruffian]

In 61031:

Editor: Add support for select elements to theme.json.

Adds support for the select element in theme.json so that theme builders and extenders can be style select elements consistently.

We are targeting the select HTML element rather than adding a CSS class, as we do for other elements that theme.json supports. This commit adds no extra styling unless a theme opts in to use this and the specificity of any generated CSS with the element is 0.

See original Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/70379.

Example usage:

	"elements": {
		"select": {
			"color": {
				"text": "red",
				"background": "blue"
			}
		}
	}

Props onemaggie, joen, get_dave, wildworks, ocean90, mikachan, poena, SirLouen, tusharbharti, yashjawale, abcd95.
Fixes #63555. See #63878.