Remove the default block margins from themes with theme.json file #30375
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
youknowriad
added
[Type] Enhancement
youknowriad
commented
Mar 30, 2021
|
Size Change: +79 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
Thanks so much for trying this. As noted, those default margin values, but top and bottom, left and right, have caused headaches for a long time. This PR is a step in the right direction for block themes, but the increased specificity of the .wp-block selector as you note, is causing some headaches even just in this branch, as they now override theme specificity in all the themes I tried:
If we were able to output the old block styles in a separate stylesheet that was not loaded for block themes, essentially a back-compat style, that seems like it would be able to keep the legacy specificity intact, while not burdening block themes. Is this what you'd prefer to avoid (based on the second comment)? One alternative I can think of is to invert the styles, to something like this: But that puts the extra specificity burden on block themes. A 3rd option is to load a separate additional stylesheet just for block themes, one that includes only these styles: The only option of those three that I like, is to output the legacy styles in a separate stylesheet, loaded conditionally. What's in trunk currently is already a bit of a headache (see again #30337). |
youknowriad
requested review from
spacedmonkey and
TimothyBJacobs
as code owners
|
Thanks for the feedback @jasmussen I implemented your first suggestion, let me know what you think. |
|
This separate file is my preferred solution as well. Twenty Twenty One is broken. Before, with current Gutenberg trunk only: With PR applied: The sample content is the Block: Cover post from the theme unit test. ✅ Random selection of blocks in an FSE theme, with no top and bottom margins: |
|
Seedlet (.org version) with PR applied, same content as above: Twenty Nineteen with PR applied, same content as above: |
|
Thanks so much Riad, this is working really well for me, and the split seems like it will provide us with a way to support both paths forward in as best a possible way. I think this'll work well, though I'd encourage additional thoughts. @mcsf? I'm seeing the same issue as Carolina, even with the demo content:
The rules are output correctly it appears:
The new lower specificity (which, amazing, by the way), now gets overridden by this:
Perhaps we can lower the specificity on that reset as well? |
That's not possible, these are there to override wp-admin default styles. |
|
The bug should be fixed now, I restored the specificity that was applied to these rules before #29335 and in trunk as well. |
|
This is super duper solid. Here's TwentyTwentyOne in this branch:
Buttons are good again:
Here's trunk:
|
|
Big fan of this approach. It could use a good bit of testing, but 👍 👍 from here. Thank you Riad! |
This was referenced Apr 6, 2021
ntsekouras
approved these changes
Apr 6, 2021
gziolo
reviewed
Apr 7, 2021
| @@ -360,6 +360,11 @@ function gutenberg_register_packages_styles( $styles ) { | |||
| 'wp-reusable-blocks', | |||
| ); | |||
|
|
|||
| // Only load the default layout and margin styles for themes without theme.json file. | |||
| if ( ! WP_Theme_JSON_Resolver::theme_has_support() ) { | |||
| $wp_edit_blocks_dependencies[] = 'wp-editor-classic-layout-styles'; | |||
There was a problem hiding this comment.
This is such a nice way to ensure backward compatibility. ❤️
|
Looks like this PR fixes some issues in 10.3.1. If we do a 10.3.2 we could consider including this one. |
|
@WunderBart, it looks like we have 2 candidates for 10.3.2, including your #30540. |
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.
Tries to implement the idea expressed by @jasmussen here #27315 (comment)
This PR removes the default block margins applied in the editor from themes with experimenta-theme.json file..
This ensures that these themes are more WSIWYG