Fix block library and global styles stylesheet ordering when a block variation is active

[talldan]

Supeceded by #7088

Trac ticket: https://core.trac.wordpress.org/ticket/61748
Gutenberg issue: WordPress/gutenberg#63912
Gutenberg PR: WordPress/gutenberg#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

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props talldanwp, aaronrobertshaw.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[aaronrobertshaw]

Thanks for the fix @talldan 👍

✅ Could replicate issue
✅ Applying the fix resolves the problem
✅ Fix works regardless of whether core block assets are loaded separately

I used the following font size definition within my theme.json under settings.typography.fontSizes:

				{
					"fluid": false,
					"name": "Normal",
					"size": "4.05rem",
					"slug": "normal"
				},

To toggle separate loading of core assets in TT4 I added the following to the functions.php file:

add_filter( 'should_load_separate_core_block_assets', '__return_false', 11 );

Separate Assets

Before	After

Consolidated Assets

Before	After

Visual Results

Before	After

[talldan]

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.