Backport: Add support for pseudo classes for the block and its variations on theme.json

[scruffian]

What?

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

Adds support for pseudo classes on the core/button block for ( ':hover', ':focus', ':focus-visible', ':active' ) at the theme.json level. This is also allowing the block's variations to control the same pseudo classes, so now we can style hover for the outline variation too.

Why?

This is needed ahead of ​https://github.com/WordPress/gutenberg/issues/38277 since right now we are only supporting pseudo classes on links and button elements, we also want to support them at the block level. This PR brings them in alignment and opens the door to support things like :hover for other blocks that don't have an element (like group for example)

How?

By allowing the pseudo classes for the specific blocks in VALID_BLOCK_PSEUDO_SELECTORS, in a similar way we do for elements.

Testing Instructions

Add the following to your theme and check that it behaves as expected on the frontend:

"styles": {
	"blocks": {
		"core/button": {
			"color": {
				"background": "blue"
			},
			":hover": {
				"color": {
					"background": "green"
				}
			},
			":focus": {
				"color": {
					"background": "purple"
				}
			},
			"variations": {
				"outline": {
					":hover": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

Screenshots

## What?
Closes ​https://github.com/WordPress/gutenberg/issues/55359

Adds support for pseudo elements on the core/button block for ( ':hover', ':focus', ':focus-visible', ':active' ) at the theme.json level. This is also allowing the block's variations to control the same pseudo elements, so now we can style hover for the outline variation too.

## Why?
This is needed ahead of ​https://github.com/WordPress/gutenberg/issues/38277 since right now we are only supporting pseudo elements on links and button elements, we also want to support them at the block level. This PR brings them in alignment and opens the door to support things like :hover for other blocks that don't have an element (like group for example)

## How?
By allowing the pseudo elements for the specific blocks in VALID_BLOCK_PSEUDO_SELECTORS, in a similar way we do for elements.

## Testing Instructions
Add the following to your theme and check that it behaves as expected on the frontend:

"styles": {
	"blocks": {
		"core/button": {
			"color": {
				"background": "blue"
			},
			":hover": {
				"color": {
					"background": "green"
				}
			},
			":focus": {
				"color": {
					"background": "purple"
				}
			},
			"variations": {
				"outline": {
					":hover": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

## Screenshots or screencast

Trac ticket: https://core.trac.wordpress.org/ticket/64263#ticket

[joedolson]

@scruffian So this ticket is more clear, I'm correcting the text in this issue from pseudo elements to pseudo classes, since that's what this is actually about.

Can we update the testing instructions to include changing the element of the button to <button>, using the HTML element option in the Advanced section.

[palak678]

I tested this on 6.8.3 locally. Before patch the hover variation was not working. But after applying the patch the variation works. The patch is working for me.

Kindly refer below video for results:-
​https://www.awesomescreenshot.com/video/46851070?key=25bbe03508d62f60b11d48165b75ef19

There was an issue with the backport - the nesting level of the fix was wrong. I pushed a fix for this.

[scruffian]

In 61607:

Editor: Add support for pseudo elements for the block and its variations on theme.json.

Adds support for pseudo elements on the core/button block for ( ':hover', ':focus', ':focus-visible', ':active' ) at the theme.json level. This is also allowing the block's variations to control the same pseudo elements, so now we can style hover for the outline variation too.

Example usage:

"styles": {
	"blocks": {
		"core/button": {
			"color": {
				"background": "blue"
			},
			":hover": {
				"color": {
					"background": "green"
				}
			},
			":focus": {
				"color": {
					"background": "purple"
				}
			},
			"variations": {
				"outline": {
					":hover": {
						"color": {
							"background": "pink"
						}
					}
				}
			}
		}
	}
}

Reviewed by palak678, getdave, MaggieCabrera.

Props MaggieCabrera, scruffian, palak678. joedolson, getdave, mikachan.
Fixes #64263.

Follow-up:

• ​https://github.com/WordPress/wordpress-develop/pull/10902

[westonruter]

In 61621:

Code Modernization: Use null coalescing operator and improve readability of conditional in WP_Theme_JSON::get_styles_for_block().

Developed in ​https://github.com/WordPress/wordpress-develop/pull/10902

Follow-up to [61607].

Props soean, westonruter, sergeybiryukov, mukesh27.
See #63430, #64263.

[audrasjb]

This is worth mentioning in the Field Guide.
Also adding needs-dev-note just in case we can mention it in a more general note.