Editor: Render theme.json element styles defined only inside a breakpoint

[ramonjd]

What

Element styles written inside @mobile or @tablet in theme.json now produce CSS whether or not the same element is also styled outside the breakpoint.

Backport of WordPress/gutenberg#81265.

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

Why

WP_Theme_JSON::get_block_nodes() looks for a block's elements under styles.blocks.<block>.elements and emits the breakpoint nodes from inside that loop. An element styled only inside a breakpoint is never looped over, so no node is created and no CSS is output. Adding a style for the same element outside the breakpoint makes the breakpoint rule appear, which made the bug look theme-dependent rather than like a missing loop.

What changed

• get_block_nodes() collects element names from the block node and from each breakpoint before looping, so an element styled only inside a breakpoint still gets a node.
• The default (non-breakpoint) node is only emitted when the element is styled outside a breakpoint.
• Three new tests covering an element styled only in @mobile, only a pseudo state in @mobile, and styles split across @mobile and @tablet. All three fail without the source change.

Manual testing

1. In a block theme's theme.json, add:

   {
   	"version": 3,
   	"styles": {
   		"blocks": {
   			"core/group": {
   				"@mobile": {
   					"elements": {
   						"link": { "color": { "text": "red" } }
   					}
   				}
   			}
   		}
   	}
   }

2. Load the front end with a Group block containing a link and inspect the global styles inline CSS.
3. Before this change no rule is output at all. After, you should see @media (width <= 480px){:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: red;}}.
4. Add "elements": { "link": { "color": { "text": "blue" } } } next to @mobile and confirm both the default rule and the media query rule appear.

[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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props ramonopoly, isabel_brison.

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

[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.

[tellthemachines]

looks like #12918 already has these changes and those in the follow-up PR

[ramonjd]

Closing in favour of #12918

[ramonjd]

already has these changes and those in the follow-up PR

My robot puts these up 😄 Closed in favour of @talldan's