Layout: Reduce specificity of fallback blockGap styles #42665
Merged
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
andrewserong
added
[Type] Experimental
andrewserong
commented
Jul 25, 2022
|
Size Change: +189 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
|
@ramonjd and @tellthemachines, not urgent, but I've just added you as reviewers since we've been discussing specificity and Layout styles recently. I think this PR should help with some of the concerns folks have raised in comments like #41431 (comment) and issues like #42333 in that it should be easier for Classic themes to override block gap spacing without having to worry about adding extra specificity 🤞 |
ramonjd
approved these changes
Jul 27, 2022
There was a problem hiding this comment.
This working well for me. Tested in classic and block themes.
In classic themes, I can overwrite the default block gap using the custom CSS in the editor and frontend.
In block themes, with settings.spacing.blockGap set to null the columns default is set as expected and I can overwrite the CSS as well.
Nice work!
This branch
The correct :where selectors are rendered:
Trunk
The default columns gap value overwrites the custom editor CSS:
And in the site CSS:
andrewserong
deleted the
try/layout-reduce-specificity-of-fallback-gap-styles
branch
andrewserong
added
the
Backport to Gutenberg Minor Release
|
@Mamaduka I just realised that the Gutenberg 13.8 RC is already out. Would you mind if we cherry picked this PR to go into 13.8? I thought it might give us a little more time to test out whether this change resolves the blockGap override issue for Classic themes so that we can continue iterating if need be over the next couple of GB releases before the 6.1 beta / cutoff? I'm happy to do the cherry picking if need be! |
|
@andrewserong, not a problem 👍 |
|
Thank you! 🙇 |
Mamaduka
pushed a commit
that referenced
this pull request
Jul 29, 2022
* Layout: Reduce specificity of fallback blockGap styles * Try adding where rule to block-level style, too * Fix tests * Tweak the where rule so that it encapsulates the whole rule * Fix global styles issue
|
Cherry-picked the fixes for 13.8. |
Mamaduka
removed
the
Backport to Gutenberg Minor Release
30 tasks
37 tasks
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Sep 14, 2022
This change backports the following changes from Gutenberg repository: - [WordPress/gutenberg#40875 gutenberg#40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42087 gutenberg#42087] Theme.json: Add block support feature level selectors for blocks gutenberg#42087 - [WordPress/gutenberg#43792 gutenberg#43792] Global Styles: Split root layout rules into a different function gutenberg#43792 - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42665 gutenberg#42665] Layout: Reduce specificity of fallback blockGap styles gutenberg#42665 - [WordPress/gutenberg#42085 gutenberg#42085] Core CSS support for root padding and alignfull blocks gutenberg#42085 Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`. Props andrewserong, aaronrobertshaw, isabel_brison. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54159 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Sep 14, 2022
This change backports the following changes from Gutenberg repository: - [WordPress/gutenberg#40875 gutenberg#40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42087 gutenberg#42087] Theme.json: Add block support feature level selectors for blocks gutenberg#42087 - [WordPress/gutenberg#43792 gutenberg#43792] Global Styles: Split root layout rules into a different function gutenberg#43792 - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42665 gutenberg#42665] Layout: Reduce specificity of fallback blockGap styles gutenberg#42665 - [WordPress/gutenberg#42085 gutenberg#42085] Core CSS support for root padding and alignfull blocks gutenberg#42085 Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`. Props andrewserong, aaronrobertshaw, isabel_brison. See #56467. Built from https://develop.svn.wordpress.org/trunk@54159 git-svn-id: http://core.svn.wordpress.org/trunk@53718 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot
pushed a commit
to gilzow/wordpress-performance
that referenced
this pull request
Sep 14, 2022
This change backports the following changes from Gutenberg repository: - [WordPress/gutenberg#40875 gutenberg#40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42087 gutenberg#42087] Theme.json: Add block support feature level selectors for blocks gutenberg#42087 - [WordPress/gutenberg#43792 gutenberg#43792] Global Styles: Split root layout rules into a different function gutenberg#43792 - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42665 gutenberg#42665] Layout: Reduce specificity of fallback blockGap styles gutenberg#42665 - [WordPress/gutenberg#42085 gutenberg#42085] Core CSS support for root padding and alignfull blocks gutenberg#42085 Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`. Props andrewserong, aaronrobertshaw, isabel_brison. See #56467. Built from https://develop.svn.wordpress.org/trunk@54159 git-svn-id: https://core.svn.wordpress.org/trunk@53718 1a063a9b-81f0-0310-95a4-ce76da25c4cd
whereiscodedude
pushed a commit
to whereiscodedude/wpss
that referenced
this pull request
Sep 18, 2022
This change backports the following changes from Gutenberg repository: - [WordPress/gutenberg#40875 gutenberg#40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42087 gutenberg#42087] Theme.json: Add block support feature level selectors for blocks gutenberg#42087 - [WordPress/gutenberg#43792 gutenberg#43792] Global Styles: Split root layout rules into a different function gutenberg#43792 - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42665 gutenberg#42665] Layout: Reduce specificity of fallback blockGap styles gutenberg#42665 - [WordPress/gutenberg#42085 gutenberg#42085] Core CSS support for root padding and alignfull blocks gutenberg#42085 Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`. Props andrewserong, aaronrobertshaw, isabel_brison. See #56467. Built from https://develop.svn.wordpress.org/trunk@54159
andrewserong
added
the
[Feature] Layout
ootwch
pushed a commit
to ootwch/wordpress-develop
that referenced
this pull request
Nov 4, 2022
This change backports the following changes from Gutenberg repository: - [WordPress/gutenberg#40875 gutenberg#40875] Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42087 gutenberg#42087] Theme.json: Add block support feature level selectors for blocks gutenberg#42087 - [WordPress/gutenberg#43792 gutenberg#43792] Global Styles: Split root layout rules into a different function gutenberg#43792 - [WordPress/gutenberg#42544 gutenberg#42544] Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles gutenberg#42544 - [WordPress/gutenberg#42665 gutenberg#42665] Layout: Reduce specificity of fallback blockGap styles gutenberg#42665 - [WordPress/gutenberg#42085 gutenberg#42085] Core CSS support for root padding and alignfull blocks gutenberg#42085 Note that it doesn't entirely port over PR40875 — the remaining PHP changes for that PR will be explored in a separate PR targeting `layout.php`. Props andrewserong, aaronrobertshaw, isabel_brison. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54159 602fd350-edb4-49c9-b593-d223f7449a82
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?
Reduce the specificity of fallback
blockGapstyles so that simple gap rules in Classic themes take precedence over fallback styles. This PR should also work for blocks-based themes that opt out ofblockGapstyles, but the primary goal of the PR is to improve the situation for Classic themes.Note: This only applies to themes that have not opted in to
blockGapwith atrueorfalsevalue. For those themes, the current level of specificity appears to be required for things to function correctly, so this PR only looks at the themes that have not opted-in toblockGap.The reduced specificity in this PR:
:where(.is-layout-flex) { gap: 0.5em; }:where(.wp-block-columns.is-layout-flex) { gap: 2em; }Why?
So that the fallback gap styles behave more in the way that Classic themes expect them to — fallback styles should exist, but it shouldn't be as hard for a theme to override these styles.
How?
Add a check to the JS and PHP implementations of blockGap to check if blockGap support is available before determining the specificity of the selector. If blockGap support is not available use
:where()to ensure specificity is lower, so that themes will override the fallback gap styles.Note: This PR only affects gap style specificity, as that appears to be the current pain point.
Testing Instructions
The main objective here is to check that with Classic themes, they can override the Columns block's fallback gap with a simple rule using the block's classname, e.g.
.wp-block-columns { gap: 2px; }.settings.spacing.blockGapis set tonullin yourtheme.jsonfile)2emis applied to a Columns block, and the flex layout's fallback0.5emis applied to the Buttons block (via the.is-layout-flexclassname).twentytwentyone/style.css. On the site frontend, you should see the rule applied, overriding the fallback Columns gap.twentytwentyone/assets/css/style-editor.css. After adding the rule, in the post editor, the rule should override theScreenshots or screencast
Note: unrelated to this PR, it looks like these block level styles are being output twice. Let's investigate that separately.
Applying a simple
.wp-block-columns { gap: 2px; }rule in a Classic theme should now override the fallback rule.