Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Double border on buttons with outline variation applied #62122

Closed
bgardner opened this issue May 30, 2024 · 2 comments · Fixed by #62125
Closed

Double border on buttons with outline variation applied #62122

bgardner opened this issue May 30, 2024 · 2 comments · Fixed by #62125
Assignees
Labels
[Block] Buttons Affects the Buttons Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@bgardner
Copy link

bgardner commented May 30, 2024

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

image

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

@bgardner bgardner added the [Type] Bug An existing feature does not function as intended label May 30, 2024
@bgardner bgardner changed the title Double border on buttons with outline variation applie Double border on buttons with outline variation applied May 30, 2024
@talldan talldan added the [Block] Buttons Affects the Buttons Block label May 30, 2024
@aaronrobertshaw
Copy link
Contributor

aaronrobertshaw commented May 30, 2024

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
Copy link
Contributor

I have a tentative fix up in #62125

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
No open projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants