Make WordPress Core

Opened 23 months ago

Closed 19 months ago

Last modified 19 months 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 23 months ago.
For better understanding I have attached a screenshot
#55824.patch (585 bytes) - added by umesh84 23 months ago.
added patch
55824.1.patch (826 bytes) - added by sabernhardt 23 months ago.

Download all attachments as: .zip

Change History (22)

@umesh84
23 months ago

For better understanding I have attached a screenshot

@umesh84
23 months ago

added patch

#1 @bhrugesh12
23 months ago

  • Keywords has-patch added; needs-patch removed

#2 @sabernhardt
23 months 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
23 months ago

  • Milestone changed from 6.1 to 6.0.1

#4 @mrfoxtalbot
22 months ago

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

Last edited 22 months ago by mrfoxtalbot (previous) (diff)

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


22 months ago

#6 @ironprogrammer
22 months ago

  • Keywords has-screenshots needs-testing-info added

#7 @sabernhardt
22 months ago

#56106 was marked as a duplicate.

#8 @sabernhardt
22 months 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
21 months 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
21 months ago

#54919 was marked as a duplicate.

#11 @sabernhardt
21 months ago

#54919 was marked as a duplicate.

#12 @sabernhardt
20 months ago

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

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


19 months ago

#14 @mohitdadhich10
19 months 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 19 months ago by mohitdadhich10 (previous) (diff)

#15 @audrasjb
19 months ago

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

Thanks for testing @mohitdadhich10 !
Marking for commit.

#16 @audrasjb
19 months 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
19 months ago

  • Keywords commit removed

Added dhjw to the props list for [54107]

#18 @audrasjb
19 months ago

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

#19 @audrasjb
19 months 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.