In #33359 we added the possibility for blocks to support multiple layouts: the default "flow" layout and the new "Flex" layout. In the future, we'll be also introducing other layouts like "Grid" or "Absolute positioning container"...

What is a layout?

A layout is a configuration you apply to a container block that changes how its inner blocks are aligned, and also impacts the behavior of these inner blocks (enable/disable some customization options). Right now, we have two types of "layouts" we can apply to container blocks:

• Flow layout: This is the default behavior in HTML, meaning if you apply this to a container block, its children are rendered one after the other vertically without any specific CSS styles (it works just like adding divs inside divs). Blocks inside a flow container can be left/right aligned (float) and in this type of layout, you have the possibility to define a "content size" and a "wide size", by defining these, the inner blocks get centered by default inside the "content size" area and they receive new alignments options (full/wide alignments)

• Flex layout: This is a layout where the container receives a display: flex style. Right now it's opinionated, meaning the inner blocks are positioned horizontally one after the other with a small gap between each block. No alignment options are available for inner blocks inside a "flex container". That said, it is likely that we'll be introducing a number of customizations for this kind of layout. For instance, we could add a config to choose whether the blocks are horizontal or vertical (some argued that flex should be only used for horizontal alignments but it's something we should discuss more). Another option could be the "gap" size, align-items could also be a config option for the layout itself. For the children of this particular layout, we could potentially explore adding positioning tools (like align-self and such).

Layout switching

Generic container blocks like the group are most likely going to require a layout switcher UI to allow users to switch layouts and configure its specific options.

Right now, the initial prototype from #33359 contains a very basic undesigned layout switcher that you can enable by replacing this line with:

"__experimentalLayout": {
	"allowSwitching": true
}

You'll get something like:

This area is going to require a better design/wording...

Refactoring blocks to use declarative layouts

Historically, we've added a number of flex horizontal container blocks over time like: Social Links, Buttons, Columns and Navigation blocks. But we did so in a very ad-hoc way, meaning we just added custom CSS and custom customization options to these blocks. Now that we introduced the "layout" config and the "flex layouts", we should consider refactoring some of these blocks to be more declarative and remove the specific treatment we have right now for these blocks.

One technical issue that needs solving though to do that is that right now, the layout block support renders styles in the editor by using the __experimentalLayout prop of the userInnerBlocksProps call, but in frontend it relies on the layout block attribute. For the editor, the current APIs should be enough but for the frontend, these blocks might not allow users to tweak their "layout", meaning the layout attribute might or might not be necessary. We need to find a declarative way in block.json to define the "default layout" of a container block.

Todo List

In terms of design, we need a couple of explorations:

• Design a good layout switcher.
• What customization options are going to be needed for the Flex layout. Design the flex container config panel.
• Should we allow align-self positioning tools for children of flex containers? How to surface these?

In terms of architecture:

• Refactoring existing horizontal blocks to use the new flex layout.
• Write some architecture documentation for contributors about the layout and layout types.