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

[WordPress Trac]

#64354: Outlined buttons now have grey background
--------------------------+------------------------------
 Reporter:  pmbs          |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  Awaiting Review
Component:  General       |     Version:  6.9
 Severity:  major         |  Resolution:
 Keywords:                |     Focuses:  css
--------------------------+------------------------------
Changes (by sabernhardt):

 * keywords:  reporter-feedback =>


Comment:

 Using Twenty Twenty, I was able to fix a Button block link with the
 Outline style by (temporarily) adding
 {{{
 add_action(
         'after_setup_theme',
         function (): void {
                 add_filter( 'should_load_separate_core_block_assets',
 '__return_false' );
         }
 );
 }}}

 With the assets separated, the `block-style-variation-styles` inline
 styles move from `wp_footer()` to `wp_head()`, between global styles and
 the classic themes stylesheet:
 1. 'wp-img-auto-sizes-contain-inline-css'
 2. //when logged in: // 'dashicons-css', 'admin-bar-css', and 'admin-bar-
 inline-css'
 3. 'wp-emoji-styles-inline-css'
 4. 'wp-block-library-inline-css' plus additional `<style>` elements for
 each active block (in my case: Archives, Button, Categories, Heading,
 Latest Comments, Latest Posts, Buttons, Search, and Group)
 5. 'global-styles-inline-css'
 6. **'block-style-variation-styles-inline-css'**, which sets a transparent
 background \\`:root :where(.wp-block-button.is-style-outline--2 .wp-block-
 button__link) { background: transparent none }`
 7. 'classic-theme-styles-inline-css', which sets a dark gray background
 \\`.wp-block-button__link { background-color: #32373c }`
 8. 'twentytwenty-style-css', which sets the default accent color as the
 background \\`button, .button, .faux-button, .wp-block-button__link, .wp-
 block-file .wp-block-file__button, input[type="button"],
 input[type="reset"], input[type="submit"] { background: #cd2653 }`
 9. 'twentytwenty-style-inline-css', which sets any custom accent color as
 the background \\`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: #d61e1e }`
 10. 'twentytwenty-fonts-css'
 11. 'twentytwenty-print-style-css'

 As result of the order, Twenty Twenty uses the same color for both the
 background and the text. The Webtron site, using a custom classic theme,
 likely had the gray background color from the
 [https://github.com/WordPress/gutenberg/blob/10c8fc8fe98c6e457d49421ec6ba8f379127152b/packages
 /block-library/src/classic.scss#L6 classic themes stylesheet].

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