[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
---------------------------+--------------------------

Comment (by westonruter):

 In Twenty Twenty, when `should_load_separate_core_block_assets` is
 filtered to be `false`, and the post content contains:

 {{{
 <!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-
 outline"} -->
 <div class="wp-block-button is-style-outline"><a class="wp-block-
 button__link wp-element-button">Click Here</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->

 <!-- wp:image
 {"id":38,"sizeSlug":"large","linkDestination":"none","style":{"color":{"duotone":"var:preset|duotone
 |purple-yellow"}}} -->
 <figure class="wp-block-image size-large"><img src="http://localhost:8000
 /wp-content/uploads/2025/11/Bison_bison_Wichita_Mountain_Oklahoma-
 1024x741.jpg" alt="" class="wp-image-38"/></figure>
 <!-- /wp:image -->

 <!-- wp:group {"backgroundColor":"accent","layout":{"type":"constrained"}}
 -->
 <div class="wp-block-group has-accent-background-color has-
 background"><!-- wp:paragraph -->
 <p>HELLO</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:group -->
 }}}

 When Custom CSS is also supplied in the Customizer, the stylesheets in the
 document are in the following order:

 1. `HEAD > STYLE#wp-img-auto-sizes-contain-inline-css`
 1. `HEAD > STYLE#wp-emoji-styles-inline-css`
 1. `HEAD > LINK#wp-block-library-css`
 1. `HEAD > STYLE#classic-theme-styles-inline-css`
 1. `HEAD > STYLE#global-styles-inline-css`
 1. `HEAD > LINK#twentytwenty-style-css`
 1. `HEAD > STYLE#twentytwenty-style-inline-css`
 1. `HEAD > LINK#twentytwenty-fonts-css`
 1. `HEAD > LINK#twentytwenty-print-style-css`
 1. `HEAD > STYLE#wp-custom-css`
 1. `BODY > STYLE#block-style-variation-styles-inline-css`
 1. `BODY > STYLE#core-block-supports-inline-css`
 1. `BODY > STYLE#core-block-supports-duotone-inline-css`

 At the moment, when `should_load_separate_core_block_assets` is enabled so
 that `wp_hoist_late_printed_styles()` is able to run, the stylesheets are
 in the following order:

 1. `HEAD > STYLE#wp-img-auto-sizes-contain-inline-css`
 1. `HEAD > STYLE#wp-emoji-styles-inline-css`
 1. `HEAD > STYLE#wp-block-library-inline-css`
 1. `HEAD > STYLE#wp-block-archives-inline-css`
 1. `HEAD > STYLE#wp-block-button-inline-css`
 1. `HEAD > STYLE#wp-block-categories-inline-css`
 1. `HEAD > STYLE#wp-block-heading-inline-css`
 1. `HEAD > STYLE#wp-block-image-inline-css`
 1. `HEAD > STYLE#wp-block-latest-comments-inline-css`
 1. `HEAD > STYLE#wp-block-latest-posts-inline-css`
 1. `HEAD > STYLE#wp-block-buttons-inline-css`
 1. `HEAD > STYLE#wp-block-search-inline-css`
 1. `HEAD > STYLE#wp-block-group-inline-css`
 1. `HEAD > STYLE#wp-block-paragraph-inline-css`
 1. `HEAD > STYLE#global-styles-inline-css`
 1. `HEAD > STYLE#block-style-variation-styles-inline-css`
 1. `HEAD > STYLE#core-block-supports-inline-css`
 1. `HEAD > STYLE#core-block-supports-duotone-inline-css`
 1. `HEAD > STYLE#classic-theme-styles-inline-css`
 1. `HEAD > LINK#twentytwenty-style-css`
 1. `HEAD > STYLE#twentytwenty-style-inline-css`
 1. `HEAD > LINK#twentytwenty-fonts-css`
 1. `HEAD > LINK#twentytwenty-print-style-css`
 1. `HEAD > STYLE#wp-custom-css`

 With the separate block styles merged into a single `LINK#wp-block-
 library-css` entry:

 1. `HEAD > STYLE#wp-img-auto-sizes-contain-inline-css`
 1. `HEAD > STYLE#wp-emoji-styles-inline-css`
 1. `HEAD > LINK#wp-block-library-css`
 1. `HEAD > STYLE#global-styles-inline-css`
 1. `HEAD > STYLE#block-style-variation-styles-inline-css`
 1. `HEAD > STYLE#core-block-supports-inline-css`
 1. `HEAD > STYLE#core-block-supports-duotone-inline-css`
 1. `HEAD > STYLE#classic-theme-styles-inline-css`
 1. `HEAD > LINK#twentytwenty-style-css`
 1. `HEAD > STYLE#twentytwenty-style-inline-css`
 1. `HEAD > LINK#twentytwenty-fonts-css`
 1. `HEAD > LINK#twentytwenty-print-style-css`
 1. `HEAD > STYLE#wp-custom-css`

 Here is a view of the diff between these two manifests:

 [[Image(https://core.trac.wordpress.org/raw-attachment/ticket/64354
 /stylesheet-order-diff.png)]]

 Two observations:

 1. `classic-theme-styles` after `global-styles`, whereas previously it was
 being printed immediately before.
 2. The `block-style-variation-styles`, `core-block-supports`, and `core-
 block-supports-duotone` styles used to be printed '''after''' the Custom
 CSS, but now they are being printed before.

 For the first point, it seems we'll need to insert the hoisted styles
 after `classic-theme-styles` if it is present instead of only inserting
 after `wp-block-library`.

 For the second point, it seems we need to not insert `block-style-
 variation-styles`, `core-block-supports`, and `core-block-supports-
 duotone` after `wp-block-library` but instead append them to the end of
 the `HEAD`, even though this is different than the order in block themes.

 Note: At `wp_enqueue_scripts`, there is
 `wp_common_block_scripts_and_styles()` which enqueues `wp-block-library`
 but then also fires the `enqueue_block_assets` action. At the
 `enqueue_block_assets` action, these functions run:

 1. `wp_enqueue_classic_theme_styles()`
 2. `wp_enqueue_registered_block_scripts_and_styles()`
 3. `enqueue_block_styles_assets()`




 ----

 JS snippet to generate the above style manifest:

 {{{#!js
 copy(Array.from(document.querySelectorAll('link[rel=stylesheet][id],
 style[id]')).map( (el) => '1. `' + el.parentElement.tagName + ' > ' +
 el.tagName + '#' + el.id + '`' ).join("\n"))
 }}}

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