Group Block

The Gallery Block lets you display multiple images in a rich gallery …

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Block Editor – Group Block

WordPress Block Editor - Group Block

This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.

***

Group Block – Description

The Group block lets you group other blocks together inside one container, like a parent block holding multiple child blocks within it.

Group block.
Group blocks together in your content using the Group block.

The main benefits of using the Group block are:

  • You can keep an entire group of blocks together when moving the block around in your content.
  • You can apply the same color settings to the entire group of blocks in one go.

How To Use The Group Block

In this section, we’ll cover:

  • How to add a Group block to your content.
  • How to edit and configure your Group block and block settings.
  • How to remove a Group block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Group Block

To add a Group block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Group block (in Most Used or Design section),
    • Add the Group block in the Content Area.
  • Insert and position new blocks within the block.
  • Use the tools in the Group Block Editor or Block Settings section to customize your Group block.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Group block.

Add Block tool - Group block.
Use the Add Block tool to add a Group block to your posts and pages.

Or, select a Group block using the Inserter tool in the Content Area.

Inserter tool - Group block.
Add a group block to your content using the Inserter tool.

Using either of the above methods will add a Group block to your content.

Group block (no other blocks uploaded).
Group block (no other blocks uploaded).

Info

As mentioned earlier, the Group block is an empty container that allows you to add other blocks within it.

When you add a Group block to your content, all you will see is an empty block with an Insert tool.

Click on the Inserter tool to begin adding other blocks to your group.

Group block - Inserter tool.
Click on the Group block’s Inserter tool to add other blocks to your group.

Here, for example, we’ve added a Heading block inside the Group block.

Heading block added to a Group block.
A Heading block added to a Group block.

To continue adding new blocks to the Group block, make sure that you are working inside the Group block (i.e. the parent block).

To access the parent Group block, hover over any child block icon to bring up the parent Group icon, then click on it.

You will see that the Inserter tool appears inside the Group block’s container. Click on the Inserter tool to add new blocks to the Group block.

Group block Inserter tool.
Add another block within the Group block.

Repeat this process to continue adding new blocks to the Group block.

Select parent Group block tool.
Make sure you are working within the parent Group block when adding new blocks.

You can add as many blocks as you like to a Group block.

Group block.
All of the above blocks are contained within a Group block.

Alternatively, you can create a Group block by adding new blocks to your content, then selecting these and using the ‘Change block type or style’ tool to transform all of your selected blocks into a Group block.

Create a Group block from selected blocks.
Create a Group block from selected blocks.

After adding a Group block to your content, you can:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit Your Group Block

Use the Group Block Editor to move the entire group of blocks inside the Group block using the Drag tool or the Up and Down arrows (if you need help, see our tutorial on How To Use Blocks).

Use the Group Block Settings to apply a common color theme to all of the blocks inside your group. For example, you can group a set of columns or combine blocks together to create forms or reports, then add a background color to all grouped blocks.

Group block - Color settings
Apply the same color theme to all blocks inside your group.

If you frequently use the same set of blocks together, you can also group these together and save the entire Group block as a Reusable Block.

tip

The easiest way to view the blocks inside the Group block is to use the Outline tool in the Editing Toolbar.

Outline tool - Group block.
Use the Outline tool to view all of the blocks inside a Group block.

Use the Outline tool to easily select and edit blocks inside the Group block.

Outline tool - selecting blocks to edit.
Edit blocks inside a Group block using the Outline tool.

How To Remove A Group Block

To delete or remove a Group block from your content:

  • Click inside the Group block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove block’.
  • This will remove the Group block from your content.
Group block: More Options tool - Remove block.
Use the More Options menu to remove a Group block from your content.

Group Block Tools, Options & Settings

The Group block includes tools, options, and settings for:

  • Group Block Editor
  • Group Block Settings

Group Block Editor

Group block editor.
Group block editor.

The Group Block Editor includes tools that let you perform the following operations:

  • Change Block Type (See ‘Group Block – Additional Info’ section below.)
  • Drag & Drop Tool
  • Move Up and Down Tool
  • More Options – See How To Use Blocks to learn how to use this section.

Group Block Settings

Group block settings.
Group block settings.

Group Block settings include:

  • Block description area
  • Color Settings – Select from the preset color palette or add a custom color using hexadecimal or RGB values. Click the Reset button to restore the default text color.
    • Text Color
    • Background Color (Solid/Gradient)
  • Advanced Settings
    • HTML Anchor – Create a unique web address to send users directly to a section of your page using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
    • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Group Block – Additional Info

You can convert a Group block into the following block types:

Group block - Change block type or style.
Change the Group block into other block types.

Installing plugins or themes on your site may also add new functionality, options, or settings to a Group block.

Sample post with Group block.
Use the Group block to combine different blocks into a single block.

Congratulations! Now you know how to use the WordPress content editor’s Group block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

***

We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.

For a white label version of this tutorial visit WPTrainingManual.com.
Originally published as Group Block.