Fix block library and global styles stylesheet ordering when a block style variation is active by talldan · Pull Request #63918 · WordPress/gutenberg

talldan · 2024-07-25T02:39:34Z

Core backport: WordPress/wordpress-develop#7088
Trac Ticket: https://core.trac.wordpress.org/ticket/61748

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

…style variation is active

github-actions · 2024-07-25T02:39:57Z

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.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: eric-michel <ytfeldrawkcab@git.wordpress.org>

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

ramonjd · 2024-07-25T03:09:12Z

Here's what I'm seeing on the frontend. All my elements have the "normal" font size applied, at 3.333rem

Before	After

All looks fine in the editor before and after.

andrewserong

Nice simple fix, good work identifying it @aaronrobertshaw, and thanks for the quick PR @talldan!

This is testing nicely for me and follows the order in which these are registered normally in core, too (outside of block style variations) 👍

Before	After

I also quickly smoke tested that custom block style variations are working as expected for me, too (screenshot includes a style variation for paragraph and button blocks):

LGTM! 🚀

ramonjd

LGTM

Global styles CSS is now taking precedence over the block library common CSS

Before	After

aaronrobertshaw

LGTM as well 👍

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

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. git-svn-id: https://develop.svn.wordpress.org/trunk@58850 602fd350-edb4-49c9-b593-d223f7449a82

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. Built from https://develop.svn.wordpress.org/trunk@58850 git-svn-id: http://core.svn.wordpress.org/trunk@58246 1a063a9b-81f0-0310-95a4-ce76da25c4cd

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. Built from https://develop.svn.wordpress.org/trunk@58850 git-svn-id: https://core.svn.wordpress.org/trunk@58246 1a063a9b-81f0-0310-95a4-ce76da25c4cd

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Reviewed by hellofromTonya. Merges [58850] to the 6.6 branch. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. git-svn-id: https://develop.svn.wordpress.org/branches/6.6@58861 602fd350-edb4-49c9-b593-d223f7449a82

hellofromtonya · 2024-08-07T19:38:01Z

Removed the Needs PHP Backport label as the PHP changes were committed into WordPress Core's trunk and backported to WordPress' Core 6.6 branch for 6.6.2.

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Reviewed by hellofromTonya. Merges [58850] to the 6.6 branch. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. Built from https://develop.svn.wordpress.org/branches/6.6@58861 git-svn-id: http://core.svn.wordpress.org/branches/6.6@58257 1a063a9b-81f0-0310-95a4-ce76da25c4cd

…style variation is active (#63918) * Fix block library and global styles stylesheet ordering when a block style variation is active * Add backport changeglog * Update core backport ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org> Co-authored-by: eric-michel <ytfeldrawkcab@git.wordpress.org>

talldan · 2024-08-08T02:59:18Z

I've cherry picked this to the wp/6.6 branch to keep the code in sync - ae218b7.

…pplied. Adjusts the dependency order to ensure stylesheets are output in the correct order. Syncs the PHP changes from WordPress/gutenberg#63918. Props talldanwp, aaronrobertshaw, andrewserong, aristath, mukesh27, ramonopoly, ytfeldrawkcab. Fixes #61748. git-svn-id: https://develop.svn.wordpress.org/trunk@58850 602fd350-edb4-49c9-b593-d223f7449a82

…ary styles (#80062) * Fix custom CSS support reordering global-styles ahead of wp-block-library Block-level custom CSS registered `wp-block-custom-css` with a dependency on `global-styles` only, then enqueued it at priority 1. This pulled `global-styles` ahead of `wp-block-library` in the print order, so block library fallbacks (e.g. the static `--wp--preset--font-size--*` values in common.scss) overrode the global styles and broke fluid typography. List `wp-block-library` before `global-styles` in the dependency array so block library prints first and global styles keep winning the cascade, mirroring the block style variations fix in #63918. Fixes #79974 Co-Authored-By: Claude <noreply@anthropic.com> * Add backport changelog * Update docblock Co-authored-by: Weston Ruter <westonruter@gmail.com> --------- Unlinked contributors: goutetsuguma. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: westonruter <westonruter@git.wordpress.org>

Fix block library and global styles stylesheet ordering when a block …

3ececbf

…style variation is active

talldan added [Type] Bug An existing feature does not function as intended Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jul 25, 2024

talldan requested review from aaronrobertshaw, andrewserong, kevin940726, noisysocks and ramonjd July 25, 2024 02:39

talldan self-assigned this Jul 25, 2024

talldan requested a review from spacedmonkey as a code owner July 25, 2024 02:39

talldan added the Needs PHP backport Needs PHP backport to Core label Jul 25, 2024

talldan mentioned this pull request Jul 25, 2024

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

Closed

2 tasks done

Add backport changeglog

7664441

talldan mentioned this pull request Jul 25, 2024

Fix block library and global styles stylesheet ordering when a block variation is active WordPress/wordpress-develop#7087

Closed

andrewserong approved these changes Jul 25, 2024

View reviewed changes

ramonjd approved these changes Jul 25, 2024

View reviewed changes

aaronrobertshaw approved these changes Jul 25, 2024

View reviewed changes

talldan mentioned this pull request Jul 25, 2024

Fix block library and global styles stylesheet ordering when a block … WordPress/wordpress-develop#7088

Closed

Update core backport

085b5ab

talldan added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Jul 25, 2024

talldan merged commit ae83155 into trunk Jul 25, 2024

talldan deleted the fix/stylesheet-ordering branch July 25, 2024 04:22

github-actions Bot added this to the Gutenberg 19.0 milestone Jul 25, 2024

aaronrobertshaw mentioned this pull request Jul 29, 2024

Css specificity issues with blockGap from theme.json and from editor (W6.6.1) #64001

Closed

2 tasks done

talldan mentioned this pull request Aug 5, 2024

6.6 Specificity/Style tracking issue #64243

Closed

8 of 12 tasks

hellofromtonya removed the Needs PHP backport Needs PHP backport to Core label Aug 7, 2024

talldan added the Backported to WP Core Pull request that has been successfully merged into WP Core label Aug 8, 2024

talldan removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Aug 8, 2024

This was referenced Jul 8, 2026

Block-level Custom CSS support breaks fluid typography by reordering global-styles before wp-block-library #79974

Closed

Block Supports: Ensure that custom CSS is output after the block library styles #80062

Merged

Navigation Menu

Repository navigation

Fix block library and global styles stylesheet ordering when a block style variation is active - #63918

Fix block library and global styles stylesheet ordering when a block style variation is active#63918
talldan merged 3 commits into
trunkfrom
fix/stylesheet-ordering

talldan commented Jul 25, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 25, 2024 •

edited

Loading

Uh oh!

ramonjd commented Jul 25, 2024

Uh oh!

andrewserong left a comment

Uh oh!

ramonjd left a comment

Uh oh!

aaronrobertshaw left a comment

Uh oh!

hellofromtonya commented Aug 7, 2024

Uh oh!

talldan commented Aug 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

talldan commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

Testing Instructions

Screenshots or screencast

Before

After

Uh oh!

github-actions Bot commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ramonjd commented Jul 25, 2024

Uh oh!

andrewserong left a comment

Choose a reason for hiding this comment

Uh oh!

ramonjd left a comment

Choose a reason for hiding this comment

Uh oh!

aaronrobertshaw left a comment

Choose a reason for hiding this comment

Uh oh!

hellofromtonya commented Aug 7, 2024

Uh oh!

talldan commented Aug 8, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

talldan commented Jul 25, 2024 •

edited

Loading

github-actions Bot commented Jul 25, 2024 •

edited

Loading