WordPress Gutenberg: How to Group Multiple Blocks

How to Group Multiple Blocks

Say you’re creating a Services section on a homepage, where you want to present each item with an image, a headline, and a description, all aligned neatly. Grouping blocks can be useful in this scenario as it lets you manage the entire section as one unit.

You can use the Group, Columns, Row, and Stack blocks to group multiple blocks. These options are available in the Design section of the block inserter.

Grouping multiple elements using these design blocks creates indented nested blocks. They refer to blocks placed inside a parent block, creating a structured layout.

For instance, a column block can be a parent containing other blocks like texts and images. These child blocks are indented under the parent block on the editor interface.

Let’s illustrate this process using the columns block as an example:

1. Open the block inserter → Design → Columns.
2. Once inserted, select a pre-designed column variation. Or, skip it to create a custom version.
   
3. Then, click the plus + sign to add blocks inside each column.
   

After that, adjust the layout of these grouped blocks using the alignment options in the toolbar or the sidebar block settings.

The sidebar block settings include the Inner blocks use content width option, which allows the nested inner blocks to conform to the parent block’s content width.