Group Block: Add a ‘display horizontal’ option

[rickybanister]

When building patterns or trying to achieve a layout with multiple elements arranged horizontally it would help to have a parent block that would automatically arrange its children on a single line. Columns can be used to arrange things side-by-side, but they add quite a lot of extra nesting if you only need to arrange one set of blocks.

We could leverage the Group block and add a ‘display horizontally’ or ‘act as a row’ option to it. It would wrap its children and act as a ‘flex container’ (display:flex; flex-direction:row;). Further flex parameters could be optional to align and distribute objects.

The benefits:

Instead of the complexity and nesting of the first image below, one could achieve a simple horizontal layout like in the second image.

Another benefit would be simplifying the number of areas where a child block could potentially be added.

The width of the block and its contents would work a little different than columns, which have specified percentage widths. The wrapping block itself would be the full width of its container, but its contents will vary. We should embrace that and provide all the alignment/distribution attributes afforded by flex.

[iamtakashi]

It'd be useful for headers for sure.

A hover revealing appender with a nice animation applied to the rest of the elements would be cool :)

[shaunandrews]

Seems related to #21494

[simison]

@ItsJonQ's Flex or Z/V/HStack components could make an interesting technical basis for something like this.

[ItsJonQ]

@simison Indeed! Simplifying the CSS flexbox API into a component to accommodate common use-cases why I created the Flex component :)

@wordpress/components has this component btw:
https://github.com/WordPress/gutenberg/tree/master/packages/components/src/flex

Mileage may vary with that for the above use-cases. It should be able to do it though.

The layout components I have planned for the G2 components are a lot... "smarter"? (if that makes sense), with better defaults + layout detection mechanism:

ItsJonQ/g2#22

[ianstewart]

@alaczek shared an example in another issue that might be a related use for this.

[bongojules]

Would really welcome this feature.

Using flex to display grouped items horizontally (flex items that can simply wrap onto a new row when they run out of space) is a common use case and it would be great if this could be reflected by the gutenberg editor... embracing the alignment/distribution attributes afforded by flex instead of stacking grouped items vertically or separating them into columns (that don't behave in the same way).

[scruffian]

This would be very useful for themes

[youknowriad]

If some developer want to give this a try, we now have an experimental "layout" prop for InnerBlocks and a "layout" attribute in the Group block, meaning that the technical solution for this could like this:

• Introduce a new type of layout (called "flex" maybe).
• Add a UI to switch the layout type (in the existing layout panel) for the group block.
• Generate the styles properly in LayoutStyle and the server layout block support.
• Hide alignments for blocks inside containers with a "flex" type.
• Potentially find a way to remove/reset the "align" attribute for blocks when they move (drag and drop or other) between containers with a different layout type and config.