Support :hover on block level

[cawa-93]

What problem does this address?

Currently, we can specify styles per block and :hover for elements inside block. But we can't cpesify :hover styles on block itself.
For example:

// theme.json
{
	"styles": {
		"blocks": {
			"core/button": {
				"typography": {
					"textTransform": "uppercase"
				},
				"elements": {
					"link": {
						":hover": {
							"typography": {
								"textTransform": "lowercase"
							}
						}
					}
				}
			}
		}
	}
}

Will generate

.wp-block-button .wp-block-button__link{text-transform: uppercase;}
.wp-block-button .wp-block-button__link a:where(:not(.wp-element-button)):hover{text-transform: lowercase;}

But needed css is:

.wp-block-button .wp-block-button__link{text-transform: uppercase;}
.wp-block-button .wp-block-button__link:hover{text-transform: lowercase;}

What is your proposed solution?

Provide support for pseudo classes like :focus or :hover on block level.

{
	"styles": {
		"blocks": {
			"core/button": {
				"typography": {
					"textTransform": "uppercase"
				},
				":hover": { // currently has no effect
					"typography": {
						"textTransform": "lowercase"
					}
				}
			}
		}
	}
}

[kathrynwp]

Related: #4543

[mikachan]

Also related: #38277