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 | Owned by: | 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 slugnormal
that is something fairly large, like2rem
- 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
Change History (11)
This ticket was mentioned in PR #7087 on WordPress/wordpress-develop by @talldanwp.
4 months ago
#1
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 slugnormal
that is something fairly large, like2rem
- 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 |
---|---|
@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.
@mukesh27 commented on PR #7088:
4 months ago
#5
Mark ready for commit.
#6
@
3 months ago
- Owner set to talldanwp
- Resolution set to fixed
- Status changed from new to closed
In 58850:
@talldanwp commented on PR #7088:
3 months ago
#7
committed to trunk in r58850
#8
@
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
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
theme.json
file to include a font size with the slugnormal
that is something fairly large, like2rem
2rem
Expected: the text is still
2rem
Before: the text was incorrectly
16px
## Screenshots or screencast
#### Before
#### After
Trac ticket: https://core.trac.wordpress.org/ticket/61748