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:

This tutorial demonstrates how to group multiple blocks effectively within your editor

1. Introduction

You will learn to add columns, insert various blocks, and adjust layout settings for a polished design.

2. Open Block Inserter Panel

Click the Block Inserter to access available block options.

3. Select Columns Block

Click Columns to choose a multi-column layout for your content.

4. Skip Initial Prompt

Click Skip to bypass the introductory prompt and proceed.

5. Add New Block

Click Add block to insert a new content block into your layout.

6. Open Block Options

Click here to open additional block options for customization.

7. Open Block Settings

Click here to access settings for the current block.

8. Add Another Block

Click Add block to insert an additional content block within the group.

9. Access Text Block

Click here to select the text block for editing.

10. Enter Text Content

Enter your text content to provide information or description.

11. Adjust the Layout of These Grouped blocks

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.

12. Select Text Block

Click This is a text to focus on the text block for further actions.

13. Confirm Text Block Selection

Click This is a text again to ensure the text block is active.

14. Enable Content Width Setting

Click Inner blocks use content width to adjust the width settings for inner blocks.

15. Activate Content Width

Fill on to enable the content width option for better layout control.

16. Open Content Width Settings

Click Content width to modify the width parameters of the content area.

17. Set Content Width Value

Fill 900 to specify the desired maximum width in pixels for the content.

You have successfully grouped multiple blocks by adding columns, inserting media and text blocks, and configuring content width settings to achieve a cohesive layout. This setup allows for organized content presentation and easy future modifications.