Setting Button block to Outline Style causes CSS output order to change and cause conflicts

[talldanwp]

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:

Print order with an Outline style button on the page:

Environment info

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

Fixes #63912

## What?
Reorders the dependencies for block-style-variations-styles

## Why?
The order of the dependencies here was causing different ordering of stylesheets on the page

When a theme is using theme.json presets that match the naming used by core, this can suddenly cause those core styles to override those from the theme.json (the css variables from core take precedence over those generated from the theme.json.

_Props to @aaronrobertshaw for spotting the problematic line of code_

## Testing Instructions

• 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

Expected: the text is still 2rem
Before: the text was incorrectly 16px

## Screenshots or screencast
#### Before

Regular button	Outline button

#### After

Regular button	Outline button

Trac ticket: https://core.trac.wordpress.org/ticket/61748

Trac ticket: https://core.trac.wordpress.org/ticket/61748
Gutenberg issue: ​https://github.com/WordPress/gutenberg/issues/63912
Gutenberg PR: ​https://github.com/WordPress/gutenberg/pull/63918

## What?
Reorders the dependencies for block-style-variations-styles

## Why?
The order of the dependencies here was causing different ordering of stylesheets on the page

When a theme is using theme.json presets that match the naming used by core, this can suddenly cause those core styles to override those from the theme.json (the css variables from core take precedence over those generated from the theme.json.

_Props to @aaronrobertshaw for spotting the problematic line of code_

## Testing Instructions

• 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

Expected: the text is still 2rem
Before: the text was incorrectly 16px

## Screenshots or screencast
#### Before

Regular button	Outline button

#### After

Regular button	Outline button

Accidentally pushed this PR using origin and the branch was automatically deleted.

There's no way to switch it to another branch so I've pushed another PR using my fork - #7088.

Closing this.

[mukesh27]

Introduced in [58264] / #61312.

The PR got enough approval. Ready for merge.

Mark ready for commit.

[talldanwp]

In 58850:

Block Styles: Fix ordering of stylesheets when a style variation is applied.

Adjusts the dependency order to ensure stylesheets are output in the correct order.

Syncs the PHP changes from ​https://github.com/WordPress/gutenberg/pull/63918.

Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab.
Fixes #61748.

committed to trunk in r58850

[talldanwp]

Re-opening for possible inclusion in 6.6.2

[hellofromTonya]

Tested before and after:

• Can reproduce.
• [58850] resolves the issue.

[58850] LGTM for backport to the 6.6 branch to include in 6.6.2.

[hellofromTonya]

In 58861:

Block Styles: Fix ordering of stylesheets when a style variation is applied.

Adjusts the dependency order to ensure stylesheets are output in the correct order.

Syncs the PHP changes from ​https://github.com/WordPress/gutenberg/pull/63918.

Reviewed by hellofromTonya.
Merges [58850] to the 6.6 branch.

Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab.
Fixes #61748.