Buttons that don't have .wp-element-button class have wrong text color

[luminuu]

Description

I was currently testing Twenty Twenty-Three with the Pilgrimage style variation and imported the official Theme Unit Test data into my installation. Looking at the Block: Button post, I noticed this behaviour of the buttons:

The text color of the button is the same as the default link color, combined with the button gradient it's almost unreadable. Here's what happens in the CSS:

I've found this issue: #42616 and the related PR: #42669, which update the code to the a:where(:not(.wp-element-button)). However this doesn't take into account that there's lots of buttons in already existing content out there that don't have the .wp-element-button class assigned, as this one got introduced in May this year (#40260). Using a newer block theme will in the worst case, make the buttons not usable until the post gets saved one more time, when the .wp-element-button class is added to the button blocks.

I think the following issue relates in some form to this: #44166

Step-by-step reproduction instructions

1. Install WordPress 6.1-RC2.
2. Import Theme Unit Test data.
3. Go to the site editor.
4. From the Twenty Twenty-Three style variations, choose "Pilgrimage".
5. Open the "Block: Button" blog post.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.1 RC2
• Twenty Twenty-Three

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[kathrynwp]

@mikachan Flagging for you - should this be moved to the TT3 repo?

[luminuu]

I've intentionally posted this issue here as I think this is a general issue spanning multiple themes or will become a bigger issue if people switch from classic themes to block themes in the future.

[carolinan]

The theme test data has not been updated to use the current block markup.
I believe that any users that still have the old block markup stored in their content will need to open the post or page to run the button block deprecation, and save the new markup.

[porg]

I linked this, because it sounds very similar. In that report the unintended outcome is for link text (plain <a> links within plain <p> paragraphs) falsely having the colors of button text.

I think the CSS selector a:where(:not(.wp-element-button)) is somehow wrong.

[tresorama]

I'm trying to understand the Button block a bit better.

Which is the rationale behind having both wp-block-button css class and also .wp-element-button ?
And how ".wp-block-button__link" is related to them ?

In theme.json we can target the core/button block via styles.elements.button and styles.blocks.core/button.
Which is the difference? When to use one over the other?