Double border on buttons with outline variation applied

[bgardner]

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

1. Go to post editor.
2. Add button block, apply outline variation.
3. 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

[aaronrobertshaw]

Thanks for creating this issue @bgardner 👍

I can replicate the issue and am working on a solution.

The cause is the extended block style variations from #57908 need to take into account blocks with selectors only targeting inner blocks. I thought this had been addressed previously but clearly it's still an issue.

[aaronrobertshaw]

I have a tentative fix up in #62125