Double border on buttons with outline variation applied #62122
Description
Description
When adding a button and applying the outline variation, a double border is being applied. (issue exists on front end, not in editor) It appears that there are two instances of classes/styling being applied—one to the <div> and the other to the <a>:
<div class="wp-block-button is-style-outline is-style-outline--8b999049ec2131a13968b599677970ef">
<a class="wp-block-button__link wp-element-button" href="#">Learn More</a>
</div>
First set of styles, to the <div>:
:root :where(.is-style-outline--cb3c5e7393271d2adb5a2454ddebf7f6) {
background: transparent none;
border-color: currentColor;
border-width: 1px;
border-style: solid;
color: currentColor;
padding-top: calc(0.6rem - 1px);
padding-right: calc(1rem - 1px);
padding-bottom: calc(0.6rem - 1px);
padding-left: calc(1rem - 1px);
}
Second set of styles, to the <a> (note some specificity overriding happening to the below):
:root :where(.wp-block-button.is-style-outline .wp-block-button__link) {
background: transparent none;
border-color: currentColor;
border-width: 1px;
border-style: solid;
color: currentColor;
padding-top: calc(0.6rem - 1px);
padding-right: calc(1rem - 1px);
padding-bottom: calc(0.6rem - 1px);
padding-left: calc(1rem - 1px);
}
:root :where(.wp-element-button, .wp-block-button__link) {
background-color: var(--wp--preset--color--contrast);
border-radius: .33rem;
border-color: var(--wp--preset--color--contrast);
border-width: 0;
color: var(--wp--preset--color--base);
font-family: inherit;
font-size: var(--wp--preset--font-size--small);
font-style: normal;
font-weight: 500;
line-height: inherit;
padding-top: 0.6rem;
padding-right: 1rem;
padding-bottom: 0.6rem;
padding-left: 1rem;
text-decoration: none;
}
Step-by-step reproduction instructions
- Go to post editor.
- Add button block, apply outline variation.
- See issue. (note issue exists on front end, not in editor)
Screenshots, screen recording, code snippet
Environment info
WordPress 6.5.3, Gutenberg Nightly (Version 18.6.20240529)
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
Metadata
Metadata
Assignees
Labels
Type
Fields
Give feedbackNo fields configured for issues without a type.