Fix: Block pseudo-state styles incorrectly applied to default state

[onemaggie]

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

What?

When a block defines a custom feature selector in its block.json (e.g. core/button uses .wp-block-button for writingMode rather than the root .wp-block-button .wp-block-button__link), styles set on a pseudo-state like :hover via theme.json were being output under the default-state selector instead of the pseudo-state selector.

Why?

This bug will become more apparent when there's a UI to change the state of the button block after ​https://github.com/WordPress/gutenberg/pull/75627 lands.

How?

In get_block_nodes, the metadata node for a block pseudo-state was built with the original $feature_selectors (e.g. .wp-block-button) rather than the pseudo-scoped version (e.g. .wp-block-button:hover). The fix builds a $pseudo_feature_selectors array that appends the pseudo-selector to every feature selector string before the node is created.

A test has been added to catch regressions.

Testing Instructions

Add writing mode to a button block on hover in theme.json, check the frontend and you will see the CSS generated:

Before: :root :where(.wp-block-button) { writing-mode: vertical-rl; }

After: :root :where(.wp-block-button:hover) { writing-mode: vertical-rl; }

The unit tests should all pass too.

Backport for ​https://github.com/WordPress/gutenberg/pull/76326/
Core trac ticket: https://core.trac.wordpress.org/ticket/64838

## What?

When a block defines a custom feature selector in its block.json (e.g. core/button uses .wp-block-button for writingMode rather than the root .wp-block-button .wp-block-button__link), styles set on a pseudo-state like :hover via theme.json were being output under the default-state selector instead of the pseudo-state selector.

## Why?

This bug will become more apparent when there's a UI to change the state of the button block after ​https://github.com/WordPress/gutenberg/pull/75627 lands.

## How?

In get_block_nodes, the metadata node for a block pseudo-state was built with the original $feature_selectors (e.g. .wp-block-button) rather than the pseudo-scoped version (e.g. .wp-block-button:hover). The fix builds a $pseudo_feature_selectors array that appends the pseudo-selector to every feature selector string before the node is created.

We have added a test to catch this problem should there be a regression

## Testing Instructions

Add writing mode to a button block on hover on theme.json, check the frontend and you will see the CSS generated:

Before:

:root :where(.wp-block-button) { writing-mode: vertical-rl; }

After:

:root :where(.wp-block-button:hover) { writing-mode: vertical-rl; }

The unit tests should all pass too