Group blocks in WordPress

In WordPress, there are three primary layout choices when combining multiple blocks: Stack, Row, and Group.

Understanding the intricacies of block layouts in WordPress helps to make cohesive and attractive content.

Layout choices

1. Stack layout: This layout arranges blocks vertically, one on top of the other. It ensures a linear flow for the content, stacking elements like paragraphs, images, or headers.
2. Row layout: The Row layout organizes blocks horizontally, placing them side by side. Ideal for creating columns or aligning content like images, text, or buttons in a straight line.
3. Group layout: The Group option serves as a container for multiple blocks. Unlike Stack and Row, which define how blocks are arranged within, the Group option merely groups them without imposing a specific layout.

Once blocks are grouped, they can be styled or moved together, but users will still need to decide on an inner layout, like using Stack or Row within the Group.

Difference between Stack, Row, and Group

While Stack focuses on vertical arrangement and Row emphasizes horizontal alignment, the Group serves as a flexible container without a preset layout. It’s a way to bundle blocks for combined styling or positioning.

Group multiple blocks together

To group blocks in WordPress editor:

1. Ensure the Document Overview icon is active in the Editor’s top bar.
2. Navigate to the List View tab within the Document Overview.
3. Select the desired starting block by clicking on it.
4. To include additional blocks in the selection, hold the Shift key and click on the next block. This action includes both clicked blocks and any in between.
5. Upon selecting the blocks, a toolbar appears at the top. Users can choose among three options for layout:
   • For vertical stacking, click on the Stack icon.
   • For horizontal alignment, choose the Row icon.
   • To group without a specific arrangement, select the Group icon.
6. Depending on the choice, the blocks are grouped into a Stack, Row, or Group block.

Adjust spacing between grouped blocks

1. In the List View, highlight the Stack, Row, or Group block recently created.
2. With the block highlighted, the right sidebar presents block-specific settings. If this sidebar isn’t visible, click the Settings icon in the top-right corner (represented by a square split into two uneven columns).
3. Navigate to the Styles tab within the Block settings.
4. Within Styles, under Dimensions, the Block Spacing option is available.
5. Use the available options to adjust spacing as needed.

Remember, before finalizing the content layout, consider which of the three options — Stack, Row, or Group — best serves the design goals and content flow.