Description:

Recently, WordPress appears to have changed how block style variations are applied, requiring a hashed classname for styles to be correctly applied. For example, the "outline" button variation now requires a classname in the format is-style-outline--{hash}, whereas previously, is-style-outline was sufficient.

This change has introduced a few issues:

1. Specificity Conflict: The default button styles now have a higher specificity than the variation styles due to their order of declaration, causing variation styles (without a hash) to be overridden by default styles. For example, :root :where(.wp-element-button, .wp-block-button__link) overrides :root :where(.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background)).
2. Difficulty in Applying Consistent Styles: The new hashed classnames make it more challenging to apply consistent styles to static elements that don't appear in the block editor or editable template parts, that previously leveraged semantic classnames defined by Wordpress core or output by theme.json (also heavily encouraged in the developer docs). Additionally, :hover, :focus, etc. styles defined in theme.json (styles.elements.button[":hover"], .etc) aren't applied to the "outline" button variation, for example.

Expected Behavior:

• The variation styles should have a higher specificity or be applied in a way that they override the default styles.
• It should be easier to apply matching styles to static elements without relying on hashed classnames.

Additional Context: The previous implementation where "is-style-outline" was sufficient allowed for more straightforward styling across various button / link elements, including those outside the block editor.

Suggested Solution: Consider adjusting the order of style declarations or revising the specificity rules to ensure that variation styles override default styles, without relying on individually hashed elements and duplicate rulesets applied in the document head. Additionally, providing a way to opt-out of hashed classnames for consistent styling across different parts of the site would be beneficial (why are they necessary?).

Step-by-step reproduction instructions

1. Create a button block and apply the "outline" style variation.
2. Inspect the button and observe that the class is-style-outline--{hash} is used.
3. Remove the hashed class and fallback to the base "is-style-outline" class. Notice that the default button styles are overriding the variation styles due to higher specificity / order of declaration.

Screenshots, screen recording, code snippet

Edit: Removed because LICEcap only recorded mouse cursor.

Environment info

• Wordpress version: 6.6.1
• Active Theme: Twenty Twenty-Four
• System: Apple MacBook Air M1, 2020 with MacOS Sonoma 14.6.1

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