Alignment styles: Centering layout without using margins #32314
Closed
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
MaggieCabrera
requested review from
ellatrix,
spacedmonkey and
TimothyBJacobs
as code owners
|
Size Change: +49 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
MaggieCabrera
force-pushed
the
try/remove-margins-from-alignments
branch
from
41c80f6
to
7054700
Compare
MaggieCabrera
requested review from
aristath,
scruffian,
jffng,
jasmussen and
youknowriad
|
Thanks so much for the passion you pour into this. It's a truly tricky challenge: bringing wider layout features to users in a way they find intuitive. I certainly agree, setting a left margin to zero and seeing it bump against the edge of the screen, as opposed to aligning vertically to its perceived center column, doesn't necessarily seem like the most intuitive thing in the world. (But I also don't think it's the end of the world.) To an extent we had the same problem with floated images, and the inelegant solution we landed on was to provide a collapsing wrapper with the same width as adjacent blocks, then float the contents inside. As I alluded to in my comment on the other PR, ultimately I do think that CSS grid might be the path forward here — there are so many benefits to the approach that it's worth seriously considering. It's just not quite trivial either:
Here are two paragraphs on the grid, then two paragraphs inside a group. The margins of those inside the group still collapse, those outside of it don't:
I believe those problems to all be solvable. For example in this codepen I explored replacing the margins with As much as I appreciate this flex-alternative, I'm afraid it has the same margin-collapsing problem. Before:
After:
Margins before:
Margins after:
The rules of margin collapsing are gnarly, but I like the last sentence of that CSS-tricks post, almost presciently predicting our conversation here:
Emphasis mine. If we think of CSS grid as an opportunity to bring amazing layouts, intuitive block spacing, predictable column centering, then I think we have a path forward to bringing it to the block editor, in the process reinventing how blocks are spaced out (no more first-child/last-child resets!). But it's a bit of an undertaking, and it very probably should be a layout type as Riad suggests, and not the default. Is there another way to center blocks without auto-margins, flex, or grid? Adding I wish I had a better solution on hand. I don't think margin-collapsing is a holy thing to maintain at all costs, but I do think it's a risky change to make in a hurry. So many aspects of theme design rely on them, sometimes without even knowing it, meaning the consequences are hard to predict. |
|
@jasmussen thank you so much for the thorough response. I can't believe I didn't check the original margin issue was going to persist with this solution as well. I guess I tunnel-visioned this one. I really don't like the display: inline-block solution personally, it's probably best to stay with what we have then. The problem with the |
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.
Description
This is an alternative to #32231 since that's going to get reverted.
Copying from that PR's description:
When @scruffian was trying this approach, he said that
but I haven't been able to reproduce. I've tried to break this as much as I couldn't and didn't find a way to do so. Any other combinations of blocks to test this are more than welcome.
How has this been tested?
I tested this mainly using emptytheme
Screenshots
Desktop:
Mobile
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.jsfiles for terms that need renaming or removal).