How and When to Use the Gutenberg Group Block

How to Use the Gutenberg Group Block

1. Individual Blocks Into Group Block

The simplest way to begin is by using individual blocks as needed. Let’s say you have a Heading block followed by 3 Paragraph blocks. Select all 4 blocks. The toolbar now shows the option to group them. You’ll see the group icon in the toolbar itself, as well as in the dropdown menu for “Transform To” and “Options“:

2. List View

Using the same approach as method #1 above, start with the individual blocks you need. We’ll continue with the example of a Heading block and 3 Paragraph blocks. Instead of selecting the 4 blocks in the editor area, open up the List View (3 lines at top left of the Editor) and select them there. Next, click on the Toolbar options (3 vertical dots) and click on “Group“.

What’s really cool about the List View is that it provides a visual representation of the blocks in an outline format. When there are a lot of blocks grouped together, the List View helps you find a specific block.

3. Add Group Block First

You can use the Group block to begin a new section, then add other blocks inside it. Choose one of the following options for “Add block“:

• Type a backslash “/” at the start of a new paragraph. If you see the Group block in the short list, great! Otherwise, type the letter “g” or “group” after the backslash to filter the block list and select “Group“.
• Click on the plus (+) sign to display the abbreviated list of common blocks, which normally includes the Group block. If you don’t see the Group block here, type “group” in the search field OR click on “Browse all” to display the full list.

• Use the “Toggle block inserter” plus (+) sign at the top left of Editor to display the entire list of blocks. Browse through the list (it’s in the Design section) or type “group” in the search field.

Insert Other Blocks into the Group

Now you can start inserting other blocks into the Group block. Any type of block can be added or moved into a Group block. We’ll continue with our original example of a Heading block and 3 Paragraph blocks.

METHOD 1 – Add New Blocks

1. Select the Group block.
2. Add block by clicking the plus “+” sign. Choose the Heading block, then type the head.
3. Insert additional blocks with either a hard return or by clicking the plus “+” sign.

METHOD 2 – Select and Copy, then Paste into Group Block

Select the desired blocks. Go to the options icon (3 dots) in either the Toolbar or List View, then click on “Copy blocks“.

Next, you’ll paste the copied blocks inside the Group block. The technique is simple.

1. Select the Group block.
2. Add a paragraph block by clicking the plus “+” sign.
3. Paste the copied blocks. It doesn’t matter if the copied blocks are paragraphs or not. Whatever you copied will be pasted inside the group block!

METHOD 3 – Click and Drag into Group Block

This method can be used in the Editor area or in the List View. In the Editor, it’s best to configure the Toolbar so that it sits above the block you’re working on (rather than in the static, sticky position at the top of the Editor): this gives you access to the Drag tool. Once you’ve selected the blocks you want, drag them into the Group block. Hover above the 6-dotted grid in the toolbar to activate the Drag tool.

Moving the Gutenberg Blocks

The Moving Handles will allow you to reposition the individual or grouped blocks up or down as usual, one block at a time. However, the Moving Handles can’t move blocks from the outside to the inside of a Group block. Nor can the handles move blocks from the inside to outside of a Group block.

Insert Other Blocks BEFORE or AFTER the Group

You can add blocks before or after the grouped set, too. Just be sure you’ve selected the Group block! The List View can help avoid confusion. Click on the options icon (3 dots) and select “Insert before (or after)“. Alternatively, hover above or underneath the grouped set and click on the plus “+” sign.

Ungroup

If you decide to unlink the blocks, you can separate them at any time! Select the group, go to Toolbar options (3 vertical dots), and click on “Ungroup“.

When to Use the Gutenberg Group Block

There are many advantages to grouping 2 or more blocks. Here are my top 4:

1. Easily move the group to a new position on the page/post
2. Apply styles to the entire group (for example, background color)
3. Very useful for containers with complex layouts
4. Can be saved as Reusable

1. Easily Move Elements – My Calendar Page

I began using the Group block on the Calendar page in my blog. The listings became a bit unwieldy, so I decided to group blocks together for easier duplication and repositioning. Below, I illustrate the List View before and after grouping. Notice how consolidated everything gets in the list after grouping:

2. Apply Styles to the Set

Rather than styling each individual block, you can apply certain shared attributes to the entire set. I have found this feature a bit quirky. Custom theme styles, for instance, will override styles you attempt to apply to a group. I’m hoping that the kinks are ironed out as the feature evolves. But, for now, I recommend using the Kadence plugin, which provides a Section block with many style options. You still might need to style individual blocks within a group and/or section to get the results you want.

Below is a comparison of heading color, text color, and background color applied individually vs. the group:

• Heading color = blue
• Text color = purple
• Background color = yellow

After inserting a Section block, I duplicated the Heading and 2 Paragraphs and grouped them. I then moved the group into the section. Here are the settings I used for the section and the results:

Notice that there are no gaps between the heads and paragraphs.

3. Complex Layouts

The following layout (“Developer Tip“) is relatively complex, yet readily achieved using a group inside the Section block.

The List View shows its structure:

4. Reusable Blocks

There comes a time when you realize that it would be prudent to save a block so that you can reuse it. There’s a tool for that! We’ll return to my Calendar page for our example.

• Select the Group that you want to save as reusable.
• Go to the Toolbar options and click on “Create Reusable block“.

• Name the Reusable block (Calendar entry in our example)

• Add block wherever you want the new block
• Be sure to Browse all
• Click on the Reusable tab and select the block you want (Calendar item)

IMPORTANT NOTE on Editing Reusable Blocks

If you use a Reusable block exactly as is, all is well. However, if you edit it in any way, you will also be changing the saved version of it in the Reusable blocks area. BEFORE YOU EDIT ANYTHING, be sure you Convert to regular blocks!

Toolbar options > Convert to regular block

Video Tutorial

If you prefer learning by watching, check out my video tutorial that shows you how and when to use the Gutenberg group block.

Related Posts

WordPress Maintenance – The Essentials
Beginner’s Guide to Gutenberg Blocks
Installing WordPress Plugins
How Do I Install a WordPress Theme?