Pseudo elements supports on button elements

[MaggieCabrera]

What?

Implements pseudo element support on the button element.
Related #38277

Why?

Support for pseudo elements on the link element has been around for a bit and it looks like it's working fine, extending that to buttons seems like the logic next step and it will help with the next default theme development.

How?

I just needed to add a line to the array of supported elements and fixed a bug where multiple selectors weren't taken into account when applying the actual pseudo element to the styles.

Testing Instructions

Needs to apply #43022 because of current bugs with CSS loading order

I tested this on emptytheme with the following markup and theme.json:

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Normal button</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:search {"label":"Search","buttonText":"Search"} /-->

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonUseIcon":true} /-->

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside"} /-->

<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true} /-->

<!-- wp:file {"id":68,"href":"http://maggie.local/wp-content/uploads/2022/04/Screenshot-2022-06-28-at-15.39.15.png"} -->
<div class="wp-block-file"><a id="wp-block-file--media-01f5fb0f-c96b-4331-993a-e05df1128f87" href="http://maggie.local/wp-content/uploads/2022/04/Screenshot-2022-06-28-at-15.39.15.png">Screenshot 2022-06-28 at 15.39.15</a><a href="http://maggie.local/wp-content/uploads/2022/04/Screenshot-2022-06-28-at-15.39.15.png" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-01f5fb0f-c96b-4331-993a-e05df1128f87">Download</a></div>
<!-- /wp:file -->

"styles": {
	"elements": {
		"button": {
			"color": {
				"background": "green"
			},
			":hover": {
				"color": {

					"background": "blue",
					"text": "hotpink"
				}
			}
		}
	}
}	

Screenshots or screencast

/cc @WordPress/block-themers

[bgardner]

Big time fan of this. Hope it works its way through soon.

[scruffian]

One small refactoring idea, but this works as expected. Thank you!

[mikachan]

This is working well for me, thank you!

[scruffian]

LGTM

[paaljoachim]

This issue comment can use some feedback:
"... And that issue seems merged with 6.2. But unfortunately, I failed to find the feature as we have been looking for four years in WP 6.2. :( no button hover styling option in the editing panel."

#4543 (comment)