Fix the button outline style for the old button markup #21816
Conversation
youknowriad
added
[Type] Bug
youknowriad
requested review from
ajitbohra,
jorgefilipecosta,
Soean and
talldan
as code owners
|
Size Change: +3 B (0%) Total Size: 845 kB
ℹ️ View Unchanged
|
|
I'm afk for a bit, but evaluating the code, this looks correct to me! 👍👍 |
|
Thanks for putting together this fix @youknowriad! This change is testing well for me across the themes I mentioned in #21747 (Hestia, Lorina, 2019, 2020). Unrelated to this PR, I noticed that the new button markup in the 2019 theme doesn't appear to be overriding the Button styles correctly, but I imagine that'll need to be fixed in that theme separately.
|
There was a problem hiding this comment.
Nice clean fix, this change is testing well for me across the themes I mentioned in #21747 (Hestia, Lorina, 2019, 2020) 👍
Left a note regarding Button styling in 2019 theme, but that's unrelated to this PR.
|
@jasmussen this fixes buttons with the old markup on the frontend, did you test with these? |
|
I did not, but yes it's in the vein of your other fix so I can see that it should! Thanks. |
| @@ -48,7 +48,7 @@ $blocks-button__height: 56px; | |||
| border-radius: 0 !important; | |||
| } | |||
|
|
|||
| .wp-block-button.is-style-outline, | |||
There was a problem hiding this comment.
👋 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
There was a problem hiding this comment.
Thanks for digging here. It's definitely not an intended change so I agree with considering this a regression.
There was a problem hiding this comment.
Yeah, I agree that it sounds like a regression. Thanks for flagging that!
closes #21747
The outline styles for the old button markup were not right. This PR fixes the styling to avoid the extra borders.
Testing instructions