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.

Sign up for GitHub

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

Jump to bottom

Fix the button outline style for the old button markup #21816

Merged
merged 1 commit into from
Apr 24, 2020
Merged

Fix the button outline style for the old button markup #21816

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ $blocks-button__height: 56px;
border-radius: 0 !important;
}

.wp-block-button.is-style-outline,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👋 Riad, in this forum post a user reported that in WordPress 5.5, buttons with outline style and a preset color background didn't have the background color set.

My first instinct is to think that was how it was expected to work. However:

  • In 5.4 it worked differently, the backgrounds were also applied to buttons with outline style (both editor and front).
  • In 5.5, the editor and front reflect different values at the moment. If this is working as expected in the front, we should make it the same in the editor.

The button markup changed a bit during this cycle, so it's difficult to point to a specific PR that introduced the regression. This one is as good a candidate as any, as this PR increased the selector specificity to 030, while in WordPress 5.4 it was 020 (.is-style-outline .wp-block-button__link).

I've also tested in other themes and the results are somewhat inconsistent:

  • 2019: it works as before (uses background even with outline style) because the theme selector overrides the core selector by virtue of being loaded after (they have the same specificity).
  • 2017: it doesn't show the background when the outline style is selected (theme selector has lower specificity than core's).

I'm inclined to think this is a regression we need to fix. What are your thoughts on this @youknowriad ? cc @kjellr

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for digging here. It's definitely not an intended change so I agree with considering this a regression.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got a potential fix at #24599

@ellatrix do we have an incoming 5.5.1? This issue may be a good one to backport. If the fix is approved, should I backport it to the wp/5.5? Do I need to do anything else?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I agree that it sounds like a regression. Thanks for flagging that!

.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
color: $dark-gray-700;
background-color: transparent;
Expand Down