[aaronrobertshaw]

Backport of Gutenberg PR WordPress/gutenberg#86245

Trac ticket: https://core.trac.wordpress.org/ticket/66464

:hover and breakpoint styles now undo a text gradient in two more cases. One is a Global Styles gradient under a single block's state styles. The other is a :hover gradient under a breakpoint :hover in theme.json.

This PR backports:

• the Global Styles lookup for a block instance's state styles, as wp_get_block_state_global_base_style(),
• the default pseudo-state layer in WP_Theme_JSON::get_state_base_styles() and process_pseudo_selectors(),
• and the accompanying block supports and WP_Theme_JSON tests.

The editor side arrives later with the Gutenberg package update.

Overlap: This touches the same lines in class-wp-theme-json.php as #15366 and the backport of WordPress/gutenberg#86246. Each branches from trunk, so whichever merges second needs a small rebase.

Testing instructions

1. Add this to the active theme's theme.json:

"settings": { "viewport": { "mobile": "480px" } },
"styles": {
	"blocks": {
		"core/paragraph": {
			"background": { "gradient": "linear-gradient(135deg,#ff0000,#0000ff)", "backgroundClip": "text" }
		},
		"core/button": {
			":hover": { "background": { "gradient": "linear-gradient(135deg,#ff0000,#0000ff)", "backgroundClip": "text" } },
			"@mobile": { ":hover": { "color": { "text": "#00ff00" } } }
		}
	}
}

2. Add a post with this paragraph and a Buttons block, then view it on the front end:

<!-- wp:paragraph {"style":{"@mobile":{"background":{"backgroundClip":"border-box"}}}} --><p>Text</p><!-- /wp:paragraph -->

3. In the page source, the mobile button :hover rule refills the text:

@media (width <= 480px){:root :where(.wp-block-button .wp-block-button__link:hover){color: #00ff00;-webkit-text-fill-color: currentColor;}}

4. The paragraph's wp-states-* rule clears the gradient:

@media (width <= 480px){.wp-states-4827d4f9{background-clip:border-box !important;-webkit-text-fill-color:currentColor !important;background-image:unset !important;}}

On trunk, the button rule has no -webkit-text-fill-color, so the text stays hidden. The paragraph rule has no background-image:unset, so the gradient fills the whole box at mobile width.

Use of AI

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: The PHP port, tests and this description; I reviewed this

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.