Button state styling missing from wp-element-button

[seothemes]

Description

When adding button element styles in theme.json, the state styles are not being applied correctly to .wp-button-element. The .wp-block-button__link styles are added correctly:

.wp-element-button, .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

The expected CSS should be:

.wp-element-button:hover, .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

I have also tested other elements but it appears to only be happening with buttons.

Step-by-step reproduction instructions

1. Add a button block to a page
2. View page
3. Inspect CSS

Screenshots, screen recording, code snippet

Twenty Twenty-Three generated CSS:

Twenty Twenty-Three default button styling:

Environment info

• WordPress 6.1.1, Gutenberg 15.3.1, all themes
• All browsers
• All devices

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

[t-hamano]

@seothemes
Thanks for the report.

This problem is the same as #48901, #48393, #48706 and has been resolved by #48759. #48759 will be part of the next release of the Gutenberg plugin 15.4. Also, since this issue is related to the Gutenberg plugin, it will not occur in WordPress without the Gutenberg plugin enabled.