WordPress Block Editor – Group Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

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.

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.

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

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

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.

Here, for example, we’ve added a Heading block inside the 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.

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

You can add as many blocks as you like to 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.

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.

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.

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

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

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 Tools, Options & Settings

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

• Group Block Editor
• Group Block Settings

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 Block Tool
• Move Block Up and Down Tool
• Change Alignment Tool
  • Wide width – makes the block stick out on either side of regular content.
  • Full width – makes the block stretch over the entire width of the browser window (regular content remains within margins on either side).
• More Options – See How To Use Blocks to learn how to use this section.

Group Block Settings

Group block settings include:

• Block description area
• Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, Default, Borders, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• 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)
  • Link Color
• Spacing
  • Padding – Set padding values for your cover image or video text. Select a unit from the drop-down menu:
    • PX (Pixels)
    • EM (Font size) 
    • REM (Root em)
    • VH (Viewport Height)
    • VW (Viewport Width)
  • Link/Unlink sides
    • Link sides –  Set up uniform padding values for the left, right, top, and bottom sides of your cover image or video text.
    • Unlink sides – Set up different padding values for the left, right, top, and bottom sides of your cover image or video text.
    • Reset – Resets padding values to default (no padding).

  Advanced Settings

  • HTML Anchor – Create a unique web address to send users directly to the block 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:

• Columns block
• Reusable block

Note: You can also select a style for your Group block from this menu.

Installing plugins or themes on your site may also add new functionality, options, or settings to a Group 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

***

Updated: July 5th, 2024