-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Closed
Labels
[Block] GroupAffects the Group Block (and row, stack and grid variants)Affects the Group Block (and row, stack and grid variants)[Type] EnhancementA suggestion for improvement.A suggestion for improvement.
Description
Let's organize around the Group block's "Layout" panel, will house the newer layout, blockGap and user-defined child block alignment settings.
This panel may very well be one of more significant experiences we create. Making this simple and delightful will empower users to lay out child blocks within a Group with more ease and control than they've ever had.
New layout-related controls:
- Add a layout config to the group and theme.json and make alignments declarative #29335
- Add flex layout support to the block editor #33359 (i.e. horizontally lay out blocks side by side)
- Add block spacing gap config to theme.json and add support for this CSS variable to the "flow/default" layout. #33812
Current:
- No controls exist today for blockGap, or for the flex layout option (horizontal child blocks).
- "Inherit default layout" is not clear on what this control does to the blocks within this group block.
- Customizing the "content" and "wide" layouts for the inner blocks should not be so prominent (and needs UI work)
Proposal:
Using the ToolsPanel
- Users can decide to use the advanced user-defined alignment width settings that we currently place high priority on. This would make the initial state much more friendly, while keeping the important toggle at the top level in the panel.
- We don't have a pattern for appending a section of panel, so we may need to iterate on how "Alignments" is displayed when pulled from the toolbelt. I tried just plugging the controls below the toggle when they're invoked, but it seemed too cluttered. I'm referencing Global Styles iterations from @pablohoneyhoney on this front.
- Tweak the description of the alignments control to
Customize the width for all blocks assigned to the center or wide columns.
New control for "Display"
- Instead of thinking of the technical aspects behind how the layout is modified, I propose we use a clear visual on the idea that you can either display blocks stacked on each other (the default, as we have today) or opt to have them laid out next to each other (side-by-side).
- I chose "Display" as a label because it references "how I want something to look", but also,
flex
is a more technical term, but is used within thedisplay
CSS property. - This approach allows us to potentially extend this in the future if we'd like to, by perhaps adding other display values (grid for example).
New control for "Block spacing"
- This modifies the default value for #33359 within this particular group block.
- The control is based off of iterations by @pablohoneyhoney.
Make "inherit default layout" toggle clearer
- Adjust the label for "Inherit default layout" to "Use inner block alignments" perhaps, which indicates that blocks will use their own alignment settings, rather than use this parent group block's. It may not be 100% there (maybe "child" is better than "inner"?) but it adds more comprehension around what is actually occurring when that is toggled on or off.
- When this is toggled on, the content and wide alignment width setting disappears today — would it be more appropriate to disable it, and have the description reference why it's disabled (instead of having it disappear). Note that if the control is not invoked via the ToolsPanel, it won't show regardless.
Thoughts?
Metadata
Metadata
Assignees
Labels
[Block] GroupAffects the Group Block (and row, stack and grid variants)Affects the Group Block (and row, stack and grid variants)[Type] EnhancementA suggestion for improvement.A suggestion for improvement.