Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#55824 closed defect (bug) (fixed)

Twenty Twenty: button-style link with Outline style is missing the border

Reported by: umesh84's profile umesh84 Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: high
Severity: major Version: 5.9
Component: Bundled Theme Keywords: has-patch has-screenshots has-testing-info
Focuses: css Cc:

Description

Twenty Twenty Theme button outline not working in front side

Attachments (3)

Screenshot 2022-05-25 at 5.10.21 PM.png (240.7 KB) - added by umesh84 3 years ago.
For better understanding I have attached a screenshot
#55824.patch (585 bytes) - added by umesh84 3 years ago.
added patch
55824.1.patch (826 bytes) - added by sabernhardt 3 years ago.

Download all attachments as: .zip

Change History (22)

@umesh84
3 years ago

For better understanding I have attached a screenshot

@umesh84
3 years ago

added patch

#1 @bhrugesh12
3 years ago

  • Keywords has-patch added; needs-patch removed

@sabernhardt
3 years ago

#2 @sabernhardt
3 years ago

  • Keywords needs-design-feedback removed
  • Milestone changed from Awaiting Review to 6.1
  • Summary changed from Twenty Twenty Theme button outline issue in front side to Twenty Twenty: button-style link with Outline style is missing the border
  • Version changed from 6.0 to 5.9

Yes, the border belongs in the theme stylesheet now. I moved it into an existing selector and compiled the RTL stylesheet.

In WordPress 5.3, when Twenty Twenty was released, the editor's block-library stylesheet supplied the border.

.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid;
}

WordPress 5.9 started using :where() and then Twenty Twenty's .wp-block-button__link selector was specific enough to override (remove) that border.

#3 @sabernhardt
2 years ago

  • Milestone changed from 6.1 to 6.0.1

#4 @mrfoxtalbot
2 years ago

This issue was also being discussed [here](https://github.com/Automattic/themes/issues/5110).

Version 0, edited 2 years ago by mrfoxtalbot (next)

This ticket was mentioned in Slack in #core-test by ironprogrammer. View the logs.


2 years ago

#6 @ironprogrammer
2 years ago

  • Keywords has-screenshots needs-testing-info added

#7 @sabernhardt
2 years ago

#56106 was marked as a duplicate.

#8 @sabernhardt
2 years ago

  • Keywords needs-testing-info removed
  • Milestone changed from 6.0.1 to 6.1

It's quite late to add this in 6.0.1, but perhaps it will make sense to create a new theme version before the next major release.

Testing instructions

  1. Enable Twenty Twenty theme.
  2. Create a post in the block editor, and insert a Buttons block.
  3. Set the style to Outline in the Block settings (in the sidebar).
  4. Add at least three "Button" links inside the Buttons block: one with the default Text color, one using a theme preset color, and one with a custom color. If you would like, include other links with Background colors. Feel free to use any URL when setting the link destination, but # would suffice.
  5. Observe that these links have a border in the block editor.
  6. Publish the post and view it (or preview the post).
  7. Notice that the border is missing from all of these links.
  8. Select the "Buttons" container block (either using List View or clicking the breadcrumb link at the bottom).
  9. Click "Copy block"—not duplicate—from the dropdown menu in the block toolbar.
  10. Navigate to the Widgets editor.
  11. Paste the block into a footer widget (you may need to create a Paragraph block to paste the Buttons block into that). Observe that these links have a border in the editor.
  12. Click Update.
  13. View the site, and notice that the border does not display for any of these links. (If you have any Fill-style button links, you may notice a different issue with the text color in widgets, but that could be fixed on a separate ticket.)
  14. Apply the patch and refresh the browser, deleting cache if necessary.
  15. Return to the post editor to check that the border still appears there.
  16. View/preview the post to verify the border now appears, in the correct color, in both the post content area and the footer widget.
  17. Navigate to the Widgets editor, and make sure that the border still displays correctly there, too.

#9 @sabernhardt
2 years ago

  • Priority changed from normal to high
  • Severity changed from normal to major

Props: @dhjw reported this earlier in #54919 (within 24 hours of the release) and shared a few related support topics:

#10 @sabernhardt
2 years ago

#54919 was marked as a duplicate.

#11 @sabernhardt
2 years ago

#54919 was marked as a duplicate.

#12 @sabernhardt
2 years ago

  • Focuses ui removed
  • Keywords has-testing-info added

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 years ago

#14 @mohitdadhich10
2 years ago

Test Report

This report validates that the indicated patch addresses the issue.
Patch tested: https://core.trac.wordpress.org/attachment/ticket/55824/55824.1.patch

**Environment**
OS: Windows 11
Web Server: nginx/1.21.5
PHP: 7.4.27 and 8.1
WordPress: 6.1-alpha-54097 and 6.0.2
Theme: Twenty Twenty
Active Plugins: -

Browsers:

Chrome - Version 105.0.5195.102 (Official Build) (64-bit)
Firefox - Version 104.0.2 (64-bit)
Edge -Version 105.0.1343.27 (Official build) (64-bit)

Actual Results
✅ Works as expected with a patch.

Hi @sabernhardt , Thanks for the testing instructions. I have tested this patch as per testing instructions and it's working as expected.

-Verified for Buttons with default, theme and custom text color.
-Verified for buttons having strong and gradient background color.
-Verified under WP post editor and widget editor.
-Verified frontend post content and footer widget.
-Buttons border displays correctly under post editor, widget editor, and front end.
-Verified on the latest versions of Chrome, Firefox and Edge browser.

Screenshots:

https://prnt.sc/9XEur8zpjqBP

https://prnt.sc/ByVXSqwiAOr5

https://prnt.sc/dq_I3HzYElAZ

Thank you!

Last edited 2 years ago by mohitdadhich10 (previous) (diff)

#15 @audrasjb
2 years ago

  • Keywords commit added
  • Owner set to audrasjb
  • Status changed from new to accepted

Thanks for testing @mohitdadhich10 !
Marking for commit.

#16 @audrasjb
2 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 54107:

Twenty Twenty: Add a missing border to button-style links with Outline style.

This changeset addresses an issue where button-style links with Outline style variation were not consistent with the corresponding variation of the Button block.

Props umesh84, sabernhardt, mrfoxtalbot, mohitdadhich10.
Fixes #55824.

#17 @sabernhardt
2 years ago

  • Keywords commit removed

Added dhjw to the props list for [54107]

#18 @audrasjb
2 years ago

Ah yes, alright, thanks @sabernhardt for adding them with the manual props tool on Make/Core <3

#19 @audrasjb
2 years ago

In 54151:

Twenty Fifteen: Ensure border-bottom styles are applied to the Button Block.

This issue was related to the :where() selector, which also affected Twenty Twenty (see #55824).

Props umesh84, sabernhardt.
Fixes #55006.
See #55824.

Note: See TracTickets for help on using tickets.