Open
Description
openedon Aug 3, 2024
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.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Anything related to the broader Global Styles efforts, including Styles Engine and theme.jsonAnything related to the broader Global Styles efforts, including Styles Engine and theme.jsonNeeds further testing to be confirmed.Needs further testing to be confirmed.Gives the original author opportunity to update before closing. Can be reopened as needed.Gives the original author opportunity to update before closing. Can be reopened as needed.An existing feature does not function as intendedAn existing feature does not function as intended
Type
Projects
Status
🗣️ In Discussion / Needs Decision