Button outline style not working on hybrid themes after v6.6

hmouhtar commented 1 month ago

Description

The new CSS specificity changes in v6.6 are breaking the outline button style on hybrid themes.

Before the new specificity changes, outlined buttons had a background color of "initial." However, since v6.6, that property is being overriden, as seen in the screenshot below:

This problem is not visible when using Gutenberg, because the block style variations CSS is being rendered inline since v6.6: block-style-variations.php.

But on hybrid themes with coded templates, the outline style is broken.

Step-by-step reproduction instructions

On a clean WordPress installation with version 6.5, using a hybrid theme, add this to header.php:

<div class="wp-block-button is-style-outline no-tablet-sm">
    <a href="#" class="wp-block-button__link wp-element-button">Sample</a>
</div>

Verify that the outline style is displayed as expected.
Update to WordPress 6.6.1.
Verify that the outline style is not displaying as before. Instead, the button has the background color of the regular style.

Screenshots, screen recording, code snippet

No response

Environment info

No response

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

[X] Yes

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

[X] Yes

talldan commented 1 month ago

@hmouhtar Could you provide more info about your hybrid theme? What block theme features does it taking advantage of? (e.g. template parts, theme.json)

On a clean WordPress installation with version 6.5, using a hybrid theme, add this to header.php:
<div class="wp-block-button is-style-outline no-tablet-sm">
    <a href="#" class="wp-block-button__link wp-element-button">Sample</a>
</div>

I'm not sure this would be considered a supported use case, as this is taking advantage of block features (block style variations) without using a block properly. It'd be good to get some wider input though, as I personally don't have a great deal of familiarity with how hybrid themes are being implemented and what's supported.

torounit commented 1 month ago

I am using the wp-block-button class in a custom menu and have reproduced the same problem.

It is used to unify the look of the buttons on the site.

<ul id="call-to-action" class="call-to-action-buttons wp-block-buttons">
<li id="menu-item-38773" class="is-style-outline menu-item menu- item-type-custom menu-item-object-custom menu-item-38773 wp-block-button"><a href="/materials/" class="wp-block-button__link">Materials </a>
</li>
</ul>

talldan commented 1 month ago

Just to give a breakdown of the problem, as it hasn't been mentioned yet. The issue is that block style variations moved to using a classname like is-style-outline-af8e9c91-b7b6-4982-b54c-5a1a8b75457f in order to support more advanced features. Blocks automatically support this new classname, but static html using block like markup won't have that new style class name applied and have no way to adopt the style because of the way the id in the classname is generated at runtime.

It's definitely an interesting one. I can see the use case for hybrid themes utilizing block styles for consistency, but at the same time it leaves that static html very open to bugs when the block implementation changes.

t-hamano commented 1 month ago

Blocks automatically support this new classname, but static html using block like markup won't have that new style class name applied and have no way to adopt the style because of the way the id in the classname is generated at runtime.

This is the cause of the problem, and I don't think it's fundamentally due to the type of theme. You can also reproduce this problem with block themes.

Enable Twenty Twenty-Four.

Use a custom HTML block to add HTML like this. Note that you must also include a button block in order for the Button block stylesheet to be loaded:

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Button</a></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
<!-- wp:html -->
<div class="wp-block-button is-style-outline">
<a href="#" class="wp-block-button__link wp-element-button">Outlined Button</a>
</div>
<!-- /wp:html -->

WP6.6.1

The CSS specificity is 0-1-0 for both. The CSS for outline styles (background-color: initial) is loaded first, so this style is overwritten:

WP6.5.5

The CSS selector for applying the background color for the outline style (background-color: initial) has a specificity of 0-3-0. By contrast, the CSS selector for applying the default background color style has a specificity of 0-1-0.

In a hybrid theme that has a theme.json, we may want to write block HTML directly in the theme template in order to apply block CSS styles generated from theme.json definitions to the theme templates as well.

In this case, it seems there is currently no way to work around this other than using some kind of custom CSS.

chrisandrew-dev commented 2 weeks ago

In this case, it seems there is currently no way to work around this other than using some kind of custom CSS.

Further to this, I'd like to point out that until the core teams' plan for block themes, theme.json, etc. are fully realised, and enable theme developers and agencies to ship sites without the current limitations and compromises, hybrid themes that leverage select functionality, responsibly, will remain necessary.

Custom CSS is a band-aid that introduces new problems:

Styles output by theme.json must be needlessly redeclared in CSS
*.json files and custom CSS must be kept in sync at all times
Styles for common HTML elements (headings, anchors, lists, buttons, etc) used in and out of the block editor (headers, footers, forms, etc) live in two or more places

WordPress / gutenberg