Improving the Group block Layout panel

[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:

• 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:

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:

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?

[andrewserong]

Thanks for raising the discussion @richtabor!

No controls exist today for blockGap,

For block gap at least, we have a control that was introduced in #33991 as part of the Dimensions panel, to sit alongside padding and margins for those blocks that opt-in to the blockGap support for controlling spacing at the individual block level. We have some follow-on issues to opt-in to the blockGap support, listed at the bottom of this issue: #32366

Would it work to opt the Group block in to use that support (it already has the server-rendering of the CSS variable, etc hooked up, too)? It would mean that the spacing would sit next to padding under Dimensions in the sidebar, instead of under Layout.

[andrewserong]

Here's a quick look at how it currently looks in the Group block if we set "blockGap": true, under spacing in the group block's block.json:

[youknowriad]

Hi Rich!

I agree that this panel needs some design explorations and iterations to get right. Related issues #31950 and #33687

First I'd like to react conceptually on the proposal above. For me it misses an important piece: alignments don't make any sense in the horizontal layout (or row) and each "layout type" (now we only have horizontal/flex and vertical/flow) can have completely different options. Later we'll have more layouts (sidebar, grid,... with their own custom options)

Make "inherit default layout" toggle clearer

This one seems like a quick win we can do today.

Block Gap

The group block should be using the block support introduced here #33991 indeed, moving it to layout panel could be an option if needed.

[karmatosed]

@richtabor, it’s great to see this explored visually and coming together with the iterated language. It looks like: #34574 has a lot of advancements coming, which is really exciting to see.

Though there is still room for iteration around alignments, I’d be interested in the quick wins here and see what is left to work on. For me, I am not totally convinced on the longevity of content/wide - but that doesn’t mean I have a better option today for that.

Make "inherit default layout" toggle clearer

+1

[richtabor]

The group block should be using the block support introduced here #33991 indeed, moving it to layout panel could be an option if needed.

@youknowriad Gap seems more like a layout feature to me. If I set horizontal or vertical blocks, I would expect to next be able to adjust the space between them. But I understand the idea of standardizing the Dimensions UI across blocks that support blockGap.

For Dimensions, are there other plans aside from Margin and Padding?

...alignments don't make any sense in the horizontal layout (or row)

I agree. Definitely needs some logic here, to perhaps remove those controls if its set to a flex-row layout.

Overall though, I think we need a grand vision for what the sidebar components of the Group block are, and how each of those will relate.

[youknowriad]

For Dimensions, are there other plans aside from Margin and Padding?

I think folks were working on adding height, widths

[richtabor]

I think folks were working on adding height, widths

Apart from the widths in the current Layout panel? Width applied the the selected block?

[youknowriad]

@richtabor yes, that's the idea, I think in some blocks like Cover, Media & Text, there's also min height.

[andrewstaffell]

I've been trawling the Issues this morning and not finding my query/suggestion, so I guess I should create a new one, but since it's loosely related to this one I thought I'd enquire here first.

The query applies to the UX (and DX) of content widths and alignments in general but is certainly most relevant to the Group block in the block theme we're currently building.

At the moment if I understand correctly for layout/alignment/width (for blocks which have the Layout panel) we have these two choices:

1. "inherit default layout" which takes the contentSize and wideSize from theme.json
2. do not inherit default layout and instead set the values manually in the content and wide fields as shown above, and separately for each block

The choice between single-preset or free-assignment seems to me to end up in a bad UX for the writers / editors who eventually use the editor, because in the case where you want different alignment/width settings for some blocks, authors then have to remember that they have to remember to manually put in unintuitive and arbitrary values like 60rem (when the default in theme.json is eg. 40rem) over and over again to get a consistent result.

It would be better, I think, to have the option of additional preset layouts configured in theme.json and in the case there is > 1 defined, a dropdown to choose. (Or is that possible already and I've missed how?)

Maybe something in settings roughly like:

customLayouts: [
  {
    name: 'extra-wide',
    label: 'Extra wide (for hero header layouts)',
    contentSize: "60rem",
    wideSize: "70rem"
  }
]

Related to this, I'm seeing tons of repeated inline CSS for wp-container-[ID] layouts (where the only thing that differs is the ID) being spewed into the page even when the default layout is being used repeatedly. Am I missing something here? It must be possible to consolidate at least some of the reused rules (and in a stylesheet rather than inline?). And layout presets as suggested above would make this easier?

Keen to hear everyone's feedback!

[paaljoachim]

Perhaps we can get some kind of status update along with thoughts on how we should move forward?
Thanks!