Replicate Figma's "Auto Layout" feature for containing blocks

[enriquesanchez]

Now that we've been working on creating block patterns, I'm finding that spacing, margins, and paddings are some of the hardest layout elements to manipulate.

While working on Figma, I couldn't help but think that it would be incredibly useful to have something similar to their Auto Layout feature in some of Gutenberg's blocks, particularly those that are used as "containers" (group, column, etc.).

The Auto Layout feature in Figma basically takes care of spacing and alignment of child items inside a frame (a frame in Figma is similar to what we call a group in Gutenberg).

The tool looks like this:

It allows for the setting of horizontal and vertical direction, horizontal and vertical padding, and spacing between child elements.

In practice, it looks like this:

Being able to manipulate these settings on a per-block basis would be very useful when creating custom layouts and patterns.

[ItsJonQ]

Wow 😍

[talldan]

Something in discussion over in #23915 is how to let users incorporate different types of blocks into or alongside the Nav Block.

Horizontal layouts are pretty common on the web for site navigation, a user might want their navigation links on the left and a search form on the right. Something like this seems like it could solve the problem.

Options similar to flexbox's justify-content rule might also be useful (that might be something figma already has options for):
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[talldan]

Also related: #20141

[mtias]

I believe this is mostly already in place in flex based container — new blocks would fit in the horizontal or vertical layout, and they'd inherit the block spacing property. If there are any further improvements to be made we should consider them in new tasks.