[wp-trac] [WordPress Trac] #64354: Outlined buttons now have grey background

[WordPress Trac]

#64354: Outlined buttons now have grey background
---------------------------+--------------------------
 Reporter:  pmbs           |       Owner:  westonruter
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  6.9.1
Component:  Script Loader  |     Version:  6.9
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:  css
---------------------------+--------------------------
Changes (by westonruter):

 * status:  new => accepted
 * component:  General => Script Loader
 * owner:  (none) => westonruter
 * keywords:   => needs-patch
 * severity:  major => normal


Old description:

> After updating multiple websites to 6.9, all outlined buttons in the
> gutenberg editor now suddenly have grey background color instead of
> transparent background.

New description:

 After updating multiple websites to 6.9, all outlined buttons in the
 gutenberg editor now suddenly have grey background color instead of
 transparent background.


 ----

 Issue description by @threadi from #64356:


 There is a problem with the button block in the TwentyTwenty theme when
 using the outline style. The background color is set incorrectly.

 In WP 6.8.3:

 {{{
 :root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link)
 {
   background: transparent none;
 }
 }}}


 In WP 6.9:

 {{{
 button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-
 block-file__button, input[type=“button”], input[type=‘reset’],
 input[type=“submit”], .bg-accent, .bg-accent-hover:hover, .bg-accent-
 hover:focus, :root .has-accent-background-color, .comment-reply-link {
   background-color: #cd2653;
 }
 }}}


 This can also be reproduced in the Playground:

 1. Go to https://playground.wordpress.net.
 2. Search for Themes > Add Theme > TwentyTwenty, install & activate.
 3. Edit Page > Sample Page
 4. Add a button block there and give it any text you like. Then select
 “Outline” on the right under Styles.
 5. Save and check.

 Result:
 * View in the editor is correct.
 * View in the frontend is incorrect.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/64354#comment:6>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform