Style states: Fix phantom pseudo element style output

[talldan]

Note: PR is based on the branch from #81265. It relies on the changes there.

What?

Fixes an issue where an incorrect pseudo style would be output (copying the base element's style) whenever a responsive+pseudo style was set for the element (but no pseudo style itself).

Why?

With an element styled at its root and its pseudo styled only inside a responsive state like @mobile:

{
	"styles": {
		"blocks": {
			"core/group": {
				"elements": {
					"link": { "color": { "text": "blue" } }
				},
				"@mobile": {
					"elements": {
						"link": { ":hover": { "color": { "text": "darkred" } } }
					}
				}
			}
		}
	}
}

CSS like this would be incorrectly produced:

:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){color: blue;}

The pseudo node defined by the responsive style was being included as part of the root. get_styles_for_block() falls back to the element's base styles when the pseudo key is absent — outputting a rule the theme never defined.

How?

Only output the default pseudo rule when the pseudo is styled outside a breakpoint — the same check the block-level pseudo styles already use. The breakpoint rules already decide this per breakpoint, so they're untouched.

PR also separately removes some dead code:

if ( $include_node_paths_only ) {
    $nodes[] = array(
        'path' => $element_pseudo_path,
    );
    continue;
}

The code inside the if statement is unreachable because there's a similar continue statement earlier in the loop:

gutenberg/lib/class-wp-theme-json-gutenberg.php

Lines 3709 to 3714 in 7c36647

	if ( $include_node_paths_only ) {
	$nodes[] = array(
	'path' => $element_path,
	);
	continue;
	}

.

Testing Instructions

1. Add the snippet above to a theme.json
2. Create a post that has a group with a paragraph inside it that has a link
3. Preview the post.
4. In the dev tools, resize to a browser size. Inspect the link and enable :hover styles.
5. Check the element's CSS in the dev tools

On trunk - the block has a rogue style like this:

:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover) {
    color: blue;
}

In this PR - the block doesn't have that style

Use of AI Tools

OpenCode / Kimi K3

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[talldan]

This is the code that causes the issue. When there's no pseudo style on the base it then checks the breakpoints, and sets has_element_pseudo to true, but then creates a node that doesn't have the right path.

I expect it was accidentally left in during refactoring and other changes.

[talldan]

This is dead code as explained in the PR description.

[tellthemachines]

Thanks for fixing this, LGTM!

[ramonjd]

Rebased locally, will push soon, but wanted to add that LGTM

Before

:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: pink;}
:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){color: pink;}
@media (width <= 480px){:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){color: green;}}

After

:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: pink;}
@media (width <= 480px){:root :where(.wp-block-group a:where(:not(.wp-element-button)):hover){color: green;}}

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 96f4b74