Simplify layout/dimensions controls across blocks into a unified Layout panel

[richtabor]

I've been thinking about how we can simplify panels in — and across — blocks and had another thought I'd like to riff on.

I started with #34558 (focused on the Group block), highlighting how we can start simplifying panels throughout the library. In theory, we could likely condense layout-esque controls into a more appropriate "Layout" panel that adapts based on the block.

Auditing today's layout-esque controls

There are margin and padding controls in the new Dimensions panel, blockGap is starting to land, width settings (group and button blocks for example), minimum height (cover block) and other block-specific layout (such as the columns block column count control, and an upcoming control for setting display layouts for the Group block).

I propose we:

1. Define a method to have a single Layout pattern that if invoked by opting into any of the existing layout-related settings, renders directly below the "Styles" panel in the sidebar.
2. Enable block to render layout relative controls to that panel.
3. Build a priority system which allows for controls to be slotted where they it makes sense. For example, the columns block should prioritize column count over core dimensions (margin and padding).

Screenshots:

Here's an exploration for the Columns block:

• The block opts into supporting blockGap, adds its Columns count control first in priority, while opting to add its "Stack on mobile" control last.
• Toolbelt for padding/margin would append those controls within the Layout panel.

[andrewserong]

Thanks for raising the discussion for this one, too, @richtabor, that's a really interesting idea slotting the Columns block's ad hoc controls into Layout along with the block supports, and arranging by priority. Just linking @jasmussen who's recently done some exploration into the Layout vs Dimensions panels in #28356 (comment).

For the Columns block's controls, I was wondering if we'll want to also eventually opt it into padding and color controls, too. With gap control between the individual columns, I could imagine someone wanting to add a background color to the Columns block, and then consistent padding and block gap. In that case, we'd also be exposing some of the other dimensions controls.

Is the idea that we'd do away with the Dimensions panel altogether and consolidate the existing dimensions/spacing controls in the Layout panel?

[jasmussen]

Nice. Definitely pertinent to the discussion in #28356!

If we looked across a range of blocks, notably Group and Cover, what would a reusable layout panel look like for those?

I know "Stack on mobile" is an existing feature of the block, so not the focus of this issue. But it's pertinent to the discussion in that it feels like we can do better than such a toggle, and ensure that it doesn't just look at viewport width but on context-width, to the point that using intrinsic principles (#34641) we might even be able to not have a "stack on mobile" control at all.

[karmatosed]

+1 for simplification and unification of these controls.

we might even be able to not have a "stack on mobile" control at all.

@jasmussen this is an exciting possibility to even more simplification :)