Unify layout-related controls under the same panel

[tellthemachines]

What problem does this address?

In the block editor, Layout has its own panel in the block settings sidebar. However, some layout-related controls such as block spacing, and width/height for flex layout children, are under the Dimensions panel instead:

In addition to that, in the Global Styles interface, all the dimensions controls are under Layout:

What is your proposed solution?

Ideally we'd have consistency between where the controls live in the block editor and in global styles, and all the layout-related controls sitting close together so its easier to make changes to them. I would be happy to see all these controls in the Layout panel 😄 Opinions welcome!

[aaronrobertshaw]

@mtias, @jasmussen, @priethor, I'd be interested to get your thoughts on this one.

When the block inspector tabs were first experimented with, we discussed that it might be tricky to know exactly where to draw the line in terms of under which tab controls should belong.

Since then, we've renamed the Styles tab to Appearance. Perhaps that, combined with a perspective that things like block spacing don't directly change a block's appearance, might mean it could be relocated either under a unified layout panel or at least under the same tab.

What do you all think?

[jasmussen]

Thanks for the ping. Two pieces at play here, firstly this:

In addition to that, in the Global Styles interface, all the dimensions controls are under Layout:

This is an inconsistency between Global Styles drilldowns and panels, where in Global Styles, unless a control fits in color or typography, "layout" becomes the kitchen sink. We used to have "Border" there as well, but this is being fixed, and it should be fixed for dimensions controls as well. This is being discussed in #47369 (comment) as well, and is something to fix.

The other aspect is unifying layout controls in the panel sense. Coming to mind here is orientation, justification, vertical/horizontal alignments, etc. I would also agree we can do some things here, and @SaxonF may has some good thoughts on it in #42385. I know @jameskoster has thought a lot about this as well.

That said, I wouldn't group these controls with layout:

Although this control only exists for Group/Row/Stack blocks at the moment, it is simply a basic transforms interface, which I would expect to land in other blocks as well. For example, #46195 details bringing this transforms interface to Navigation items.

[jameskoster]

Capabilities pertaining to "Layout" have expanded quite a bit over time, to the point where all the different interactions, panels, and behaviors have become quite cumbersome when you try to use them as a whole. I suspect it's partly due to the layout concept having spawned in the Post Editor where it had to be built in a content-centric manner. But with the advent of Block Themes / Templates, Global Styles, and the Site Editor it would perhaps make more sense for layout to be modelled template-up instead of content-down.

There are a number of issues about this now (#34698, #42385, #36082) which suggests to me it might be time to step back and explore things more holistically on the design side, and find consensus on a general vision before changing things further.

[andrewserong]

@youknowriad just a ping for visibility on this issue since we were discussing layout and dimensions panels over in #48070 🙂

[andrewserong]

I would be happy to see all these controls in the Layout panel

Just another drive-by thought while I'm working on behaviour related to the Position panel over in #49151. If we consolidated a bunch of these controls in the Layout panel, it could then unlock the idea of Position being in the Layout panel again, as the Layout panel would no longer be exclusive to blocks that use the layout block support.

So, in a future state where we might wish to allow sticky headings, within the Heading block, "position" might comfortably sit alongside padding and margin in a consolidated layout panel?

[cbirdsong]

Having used 6.2 for a bit now, I think the Dimensions controls make far more sense under "Layout" than "Styles" and came here to file an issue. Moving those into "Layout" seems like an easy choice, especially considering how little lives in "Layout" currently.

There are a number of issues about this now (#34698, #42385, #36082) which suggests to me it might be time to step back and explore things more holistically on the design side, and find consensus on a general vision before changing things further.

Related to this, I also think it might be worth considering moving the alignment controls in the floating toolbar into the layout portion of the sidebar? There is a lot of inconsistency in that area right now.

In the floating toolbar:

• "alignment" of the current block as wide/full and sometimes left/right/center¹
• vertical alignment of flex layout children
• justification (horizontal alignment) of flex layout children
• vertical/horizontal positioning (AlignmentMatrixControl) on the cover block
• the "full height" toggle in the cover block, which should probably go away if it is subsumed by presets (Add support for presets in minimum height fields #48810)

In the sidebar:

• justification (horizontal alignment) of flex layout children
• changing flex layout children from horizontal to vertical
• changing whether or not flex layout children can wrap to a new line
• setting content widths for inner blocks in constrained layouts
• the minimum height value on the color block

Footnotes

1. The name of this is kind of confusing because it's really a width control most of the time? ↩