Layout: Fix issue with fallback gap styles where gap was being output for constrained layout type #44001
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
… for constrained layout type
andrewserong
added
[Type] Bug
|
Size Change: 0 B Total Size: 1.25 MB ℹ️ View Unchanged
|
tellthemachines
approved these changes
Sep 9, 2022
There was a problem hiding this comment.
Thanks for fixing this! It's working well in testing and I can see that :where(.is-layout-constrained > *){margin-block-start: 0;margin-block-end: 0;}:where(.is-layout-constrained > * + *){margin-block-start: 0.5em;margin-block-end: 0;} are no longer output in the inline global styles.
|
Thanks for reviewing! |
andrewserong
deleted the
update/block-gap-fallback-output-to-skip-constrained-layout-type
branch
andrewserong
added
the
[Feature] Layout
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?
Ensure that fallback gap styles are only output for the
flexlayout type, so that in Classic themes (or themes that do not opt-in to block gap) we do not output the gap styles for the constrained layout type.Why?
In #42763 we didn't factor in that the existing logic for fallback gap was outputting fallback gap styles for layout types that are not default. Because the constrained layout type behaves in much the same way as the default layout type, we need to update the logic for the fallback gap so that it only applies to the flex layout type. The reason the fallback exists is primarily so that blocks like Buttons, Social Icons, and Columns render with a pleasing default gap. Vertically oriented blocks using the default and constrained layout types do not need the same kind of fallback gap to be output.
How?
Update the checks for default layout type that skip block gap output to instead be "not
flex" instead.Testing Instructions
Here is some test markup for looking at blocks within a constrained layout type:
Test markup of paragraphs in a group block
In a Classic theme, prior to this PR, note that low specificity vertical gap (top margin) styles are being output in the editor (and also on the front end, but usually they're overridden by something with higher specificity).
With this PR applied, the constrained layout gap rules should no longer be output.
With blocks-based themes that use block gap (e.g. TwentyTwentyTwo), the gap should be the same as prior to this PR.
Screenshots or screencast