Make WordPress Core

Opened 4 months ago

Closed 3 months ago

#61748 closed defect (bug) (fixed)

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

Reported by: talldanwp's profile talldanwp Owned by: talldanwp's profile talldanwp
Milestone: 6.6.2 Priority: normal
Severity: normal Version: 6.6
Component: Editor Keywords: has-patch commit fixed-major dev-reviewed
Focuses: Cc:

Description

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:

https://github.com/user-attachments/assets/d9a6af69-020c-44c4-8c35-15916814f95d

Print order with an Outline style button on the page:

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

Change History (11)

This ticket was mentioned in PR #7087 on WordPress/wordpress-develop by @talldanwp.


4 months ago
#1

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
https://github.com/user-attachments/assets/fd5b3da9-1e8f-4593-9b2b-a87de3b7fcc3 https://github.com/user-attachments/assets/99a91b0e-ef42-4860-871d-b3daaf749b32

#### After

Regular button Outline button
https://github.com/user-attachments/assets/5ca03e21-0678-4953-ae2b-b32757f58b0b https://github.com/user-attachments/assets/d5134413-e192-4297-8022-b9539612c203

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

This ticket was mentioned in PR #7088 on WordPress/wordpress-develop by @talldanwp.


4 months ago
#2

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
https://github.com/user-attachments/assets/fd5b3da9-1e8f-4593-9b2b-a87de3b7fcc3 https://github.com/user-attachments/assets/99a91b0e-ef42-4860-871d-b3daaf749b32

#### After

Regular button Outline button
https://github.com/user-attachments/assets/5ca03e21-0678-4953-ae2b-b32757f58b0b https://github.com/user-attachments/assets/d5134413-e192-4297-8022-b9539612c203

@talldanwp commented on PR #7087:


4 months ago
#3

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.

#4 @mukesh27
4 months ago

  • Keywords commit added

Introduced in [58264] / #61312.

The PR got enough approval. Ready for merge.

@mukesh27 commented on PR #7088:


4 months ago
#5

Mark ready for commit.

#6 @talldanwp
3 months ago

  • Owner set to talldanwp
  • Resolution set to fixed
  • Status changed from new to closed

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.

@talldanwp commented on PR #7088:


3 months ago
#7

committed to trunk in r58850

#8 @talldanwp
3 months ago

  • Keywords dev-feedback added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Re-opening for possible inclusion in 6.6.2

#9 @hellofromTonya
3 months ago

  • Keywords fixed-major added

#10 @hellofromTonya
3 months ago

  • Keywords dev-reviewed added; dev-feedback removed

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.

#11 @hellofromTonya
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.