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

[umesh84]

Twenty Twenty Theme button outline not working in front side

[umesh84]

For better understanding I have attached a screenshot

[umesh84]

added patch

[sabernhardt]

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.

[mrfoxtalbot]

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

[sabernhardt]

#56106 was marked as a duplicate.

[sabernhardt]

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.

[sabernhardt]

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

• ​Outline buttons have no border
• ​Border around button GONE
• ​Border around button missing from published page

[sabernhardt]

#54919 was marked as a duplicate.

[sabernhardt]

#54919 was marked as a duplicate.

[mohitdadhich10]

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!

[audrasjb]

Thanks for testing @mohitdadhich10 !
Marking for commit.

[audrasjb]

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.

[sabernhardt]

Added dhjw to the props list for [54107]

[audrasjb]

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

[audrasjb]

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.