Skip to content

Improving the Group block Layout panel #34558

@richtabor

Description

@richtabor

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:

Current:

Screen Shot 2021-09-05 at 8 11 56 AM

  1. No controls exist today for blockGap, or for the flex layout option (horizontal child blocks).
  2. "Inherit default layout" is not clear on what this control does to the blocks within this group block.
  3. Customizing the "content" and "wide" layouts for the inner blocks should not be so prominent (and needs UI work)

Proposal:

Screen Shot 2021-09-05 at 8 11 12 AM

Using the ToolsPanel

  1. 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.
  2. 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.
  3. 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"

  1. 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).
  2. 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 the display CSS property.
  3. 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"

  1. This modifies the default value for #33359 within this particular group block.
  2. The control is based off of iterations by @pablohoneyhoney.

Make "inherit default layout" toggle clearer

  1. 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.
  2. 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

No one assigned

    Labels

    [Block] GroupAffects the Group Block (and row, stack and grid variants)[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions