[wp-trac] [WordPress Trac] #61748: Setting Button block to Outline Style causes CSS output order to change and cause conflicts

[WordPress Trac]

#61748: Setting Button block to Outline Style causes CSS output order to change and
cause conflicts
--------------------------+-----------------------
 Reporter:  talldanwp     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  6.6.2
Component:  Editor        |    Version:  6.6
 Severity:  normal        |   Keywords:  has-patch
  Focuses:                |
--------------------------+-----------------------
 This was originally reported in Gutenberg:
 https://github.com/WordPress/gutenberg/issues/63912

 The fix (https://github.com/WordPress/gutenberg/pull/63918) requires a
 core backport and trac ticket.

 ----

 === Description

 Typically, `wp-block-library-inline-css` is output _before_ `global-
 styles-inline-css` so that styles from `global-styles-inline-css` (i.e.
 those from `theme.json`) override those from `wp-block-library-inline-css`
 (like the various WP default colors and font sizes).

 For some reason, setting a Button block on a page to Outline style causes
 `wp-block-library-inline-css` to print _after_ `global-styles-inline-css`,
 causing it to override any same-name settings in `theme.json`.

 This is an absolute disaster for us, because our theme defines a `normal`
 font size, and now it is being overridden with by the WP default of `16px`
 on any page that uses an Outline button.

 === Step-by-step reproduction instructions

 - Spin up a fresh site on WP 6.6.1 running the Twenty Twenty Four
 - Alter the Twenty Twenty Four `theme.json` file to include a font size
 with the slug `normal` that is something fairly large, like `2rem`
 - Make a page with some text using that font size and preview it - note
 that the text is correctly sized to `2rem`
 - Add a button with the Outline style on the same page and preview it
 again - note that the text is now `16px`

 === Screenshots, screen recording, code snippet

 **Normal print order when an Outline style button is not on the page:**

 [[Image(https://github.com/user-attachments/assets/d9a6af69-020c-
 44c4-8c35-15916814f95d)]]

 **Print order with an Outline style button on the page:**

 [[Image(https://github.com/user-attachments/assets/ede5bb6d-
 bc42-44f0-8781-5ee6c414baae)]]


 === Environment info

 WordPress version 6.6.1
 Twenty Twenty Four theme (only modified to add a font size to
 `theme.json`)
 no plugins

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61748>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform