Fix incorrect targeting of block wrappers for root padding in the edi… #48002
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tellthemachines
added
Global Styles
|
Size Change: +531 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 1134fe7. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4169875260
|
There was a problem hiding this comment.
Oh, what a challenging problem! I like the direction of the fix, but a challenge is that the JS version of the global styles output only exists in the site editor and not the post editor. Within the post editor, the PHP version of the global styles rules is output in that context instead, so the fix doesn't appear to be present there:
Site editor:
Post editor:
Unfortunately I can't quite think of a universal way we could fix the site-frontend-facing rule so that it'd also work in the post editor 🤔
Maybe we could switch to using the JS version in the post editor instead? Or we could implement #6639 😂 Or we could remove Any of these solutions seems like overkill for such a small bug though. I'll try fiddling with the PHP selectors a bit more. |
|
I think that's fixed it. It should be fine to add the
|
andrewserong
approved these changes
Feb 13, 2023
There was a problem hiding this comment.
Nice one, that's done the trick @tellthemachines! The rules are applying consistently for me now in both the post and site editors, and on the site frontend 👍
Just left a tiny nit about whether we should ensure the rules are the same between the PHP and JS implementations, but otherwise this LGTM! ✨
packages/block-editor/src/components/global-styles/use-global-styles-output.js
Show resolved
Hide resolved
|
Awesome, thank you, @tellthemachines! |
|
While comparing theme.json classes in Gutenberg and WordPress core I've noticed this PR was missing in core. I understand we want to backport this, so I'm tagging it as such. (I see this PR requires a release of the JS packages. I don't know how we want to manage that, otherwise, I'd prepare the backport myself for timezones to play to our advantage). |
oandregal
added
the
Backport to WP 6.7 Beta/RC
|
@oandregal, as the development diverges, the class won't always match in core and plugin. If the bug was introduced in WP 6.2, then we should be good to land a fix in RC1. |
Absolutely. If something is slated to 6.3, it's fine they are different. I don't know whether this is for 6.2 or 6.3, though, hence why I raised :) We missed important backports in the 6.1 cycle, and I don't want us to repeat the same mistake in 6.2. As a general note, until we can find a better (automated) mechanism, we should aim for the theme.json classes in Gutenberg and core to be the same (other than minor things such as |
|
This bug wasn't introduced in 6.2; it's been there since the root padding logic was built. As we were already in Beta at the point this was merged, I didn't bother adding the backport label. Though if folks feel it's important to fix for this release anyway, I'm happy to do a backport PR for the PHP changes! |
oandregal
removed
the
Backport to WP 6.7 Beta/RC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #46724
Why?
In the editor, blocks are given classnames such as
wp-block,block-editor-block-list__blockandblock-editor-block-list__layout, that aren't carried through to the front end. Because of this, the rules added byuseRootPaddingAwareAlignmentshave to be slightly different for editor and front end.Problem: in the front end, there is no generic class applied to all block wrappers, such as
wp-block, so outer block wrappers had to be targeted with[class*="wp-block-"]:not([class*="__"])(where thenotpart rules out any inner wrapper with a classname starting withwp-blocksuch aswp-block-cover__inner-container). This creates a problem in the editor, because all block wrappers have a classname with a double underscore such asblock-editor-block-list__block.But because the
wp-blockclass is also applied to all block wrappers in the editor, we can target that instead.Testing Instructions
"useRootPaddingAwareAlignments": truein its theme.json e.g. Twenty Twenty Three.Testing Instructions for Keyboard
Screenshots or screencast