[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:  has-patch has-unit-tests needs-      |     Focuses:  css
  testing                                        |
-------------------------------------------------+-------------------------
Description changed by westonruter:

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.
>

> ----
>
> 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.

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.

 ----

 Possibly related support topics:

 * https://wordpress.org/support/topic/broken-design-with-elementor-in-
 wordpress-6-9/
 * https://wordpress.org/support/topic/wordpress-6-9-broke-site-layout-
 crewbloom/
 * https://wordpress.org/support/topic/v-6-9-block-alignment-is-broken/

--

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