Button Block: Style the pseudo classes when outputting theme.json color

[andersnoren]

What problem does this address?

If you set the text color of the button block in theme.json, the CSS that gets output targets the .wp-block-button__link element. The Core styles also sets the text color of the button pseudo classes, like this:

.wp-block-button__link:active, .wp-block-button__link:focus, .wp-block-button__link:hover, .wp-block-button__link:visited {
    color:#fff
}

The style generated by theme.json doesn't, so when you focus/hover/click or have visited a button, the text color is reverted to the white color set by the default styles, and you get this:

(That's a button with a white background color set to black text in theme.json, but since the URL it points to has been visited, the .wp-block-button__link:visited style changes it to the default white text color.)

Steps to reproduce

1. In TT1 Blocks, change the button color in theme.json to red.
2. Add a button block with a URL set.
3. Hover/focus/click on the button.

What is your proposed solution?

To either remove the CSS which sets the button to a white text color on hover/focus/active/visited (jay, less code), or to add CSS targeting the pseudo classes when outputting the button text color set in theme.json (boo, more code).

[GrimLink]

I would say remove the visited pseudo for sure, it is not really used anymore in practice.
As for the pseudo hover, focus and active, this would be nice as a configuration option in the themes.json

[skorasaurus]

heavily related which requested styling the pseudo classes pre theme.json - #4543

[eric-michel]

Our theme is not yet using theme.json and our CSS really struggles with this selector. Its specificity requires that we use a bunch of !important flags when we otherwise would not need to.

It's oddly opinionated for something like WordPress that is intended to give theme authors more control over styling. What is the purpose of making hovered, focused, and visited button text white?

[sabernhardt]

Twenty Twenty-Three has a similar problem (Trac 56928).

Moving :visited to the beginning of the VALID_ELEMENT_PSEUDO_SELECTORS arrays seems to fix it for that theme.

gutenberg/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

Lines 23 to 26 in 67fe26f

	const VALID_ELEMENT_PSEUDO_SELECTORS = array(
	'link' => array( ':hover', ':focus', ':active', ':visited' ),
	'button' => array( ':hover', ':focus', ':active', ':visited' ),
	);

[ironprogrammer]

The introduction of #43088 provides button pseudo element styling in theme.json. I believe this issue can be closed.

Environment

• Browser: Safari 16.1
• WordPress: 6.1.1
• Theme: tt1-blocks v0.4.8, twentytwentytwo v1.3

Test Results

• Under the TT1 Blocks theme, I was NOT able to reproduce the originally reported issue (on WordPress 6.1.1 w/ and w/o Gutenberg latest active). It doesn't appear that default pseudo selector styling is being emitted anymore.
• Referring to the test instructions provided in Pseudo elements supports on button elements #43088, I was able to style the :hover and :visited selectors.
• Setting the button background or text color in the editor overrides the colors set in theme.json, as expected.
• Under TT2, behavior was the same.