How to Use the Group Block in Gutenberg WordPress
I’ve been using (and enjoying) Gutenberg more and more, and I’ve learned to work around its eccentricities and in many way it has made my blogging faster and easier. The Reusable blocks feature has been particularly useful. I’m able to create an image with a caption, or a list of useful links, and quickly drop it into any post. In combination with a plugin such as Advanced Gutenberg, you can create really powerful layouts for WordPress.
Gutenberg 5.5 introduced a Group Block making Reusable blocks even better.
A Group Block can house other blocks together inside one container. Think of it as a “parent” block that can hold multiple “child” blocks within it. Let’s get started.
- Add a new “Post”.
- Type in a title. (This is not and will not be part of the Group Block).
- Click on the + sign
- Add a Group Block.
- Click on + sign in center of the Group Block.
- Add a Paragraph Block.
You will notice that the Group Block seems to disappear the second you select the Paragraph Block, but it has not. Don’t worry. I will show you where to find it in a moment.
- Type your content in the paragraph block.
- Hit “Return” key on your keyboard after you are finished.
- Click the + sign to the right.
- Add a List Block.
- Type a few items to create a list (ex. one, two, three)
You will remember we talked about the illusion of the Group Block disappearing. Trust me, your items are still in a Group Block, and I’ll show you where to find them now.
- Click on the Block Navigation button at the top of your screen. Notice the “children” attached to the Group icon?
- Click on the word “Group”.
You will now notice that the Group Block outline has returned on your page. The vertical, dark grey bar on the left side of the box shows you that all the “children” are present.
- Locate the + signs underneath each existing child block in this group.
If you select the one underneath the Paragraph block, then the block you add will appear directly after the Paragraph Block. If you select the + sign underneath the List Block, then your next block will show up after the List Block. Make sense?
- Click the + sign located below the List Block.
- Add an Image Block.
After you upload an image you will find it located inside the group and after the List Block. Perfect!
Remember, any time that you lose sight of the Group Block, simply click the Block Navigation button at the top of your screen and click on the word “Group.”
To delete a Group Block, simply click the 3 vertical dots and select Remove Block from the dropdown menu.
More New Gutenberg Goodness
- How to embed Twitch videos in Gutenberg
- How to embed Wistia videos in Gutenberg
- How to Embed Google Docs in WordPress Gutenberg
{snippet gutenbergvideo}
Thanks for this post! I’m on WordPress 5.2.2 but the Group block isn’t showing… Is there any way to enable it? Has it been postponed to a future update?
Install the Gutenberg plugin. The Gutenberg plugin always has the latest features. WordPress usually waits for the latest features to be fully fleshed out before they integrate it in to the core.
I did this and it worked great! LOVE the new features I’ve unlocked with this in 5.2. Not only do I have access to Group containers, but the whole UI for moving things around seems to have been dramatically improved, so moving them around is much easier too.
Loving the progress on Gutenberg!
Koyali, you may update WordPress for 5.3.2 and there you will already have the Group Block.
Having activated a group, how do I get rid of it again? That does not seem to be explained anywhere…
Try this: Click the + sign to “add a block” to any post. Scroll all the way down to the bottom of the list where you will find the “Manage All Reusable Blocks” link. Simply click on that link and then pick the block you wish to delete. You will see the options for that particular block underneath it’s title: Edit | Trash | Export. That should do it.
Also, if you were refering to deleting the group from your post, simply click the 3 dots to reveal the delete option.
Hi there I’m trying to create a group block which has a background colour, and three columns of headers and paragraphs. I can make the main background block fullscreen width, but the columns are clustered more in the middle which is frustrating, as I need them wider. also don’t seem to be able to copy the entire block to copy and paste over to other pages. I’d be really grateful for any tips
Your title says “How to….” but it doesn’t teach how to do anything. I’ve been looking for a tutorial to use the group block and got hopeful when I saw your title, but still can’t see how it works. I keep clicking on it but it only allows me to put one thing in the box. Any chance you can give a little more how to?
Jennifer, I have just updated this post for two reasons: 1) to reflect the newest version of Gutenberg, and 2) to be more instructional. Please read it again and see if this helps answer your questions. Thank you for your feedback!
Agreed with Jennifer that I cannot get this working. No matter how I attempt to “add” a new block to the group it will not nest under the group. Seems I need to sign up here before having screenshot upload privileges so I’ll just leave this text. I successfully created a group with an image as a child block but I simply have not been able to nest another block.
theJett, I tried to recreate your scenario: I created a new post and added the group block by clicking the + sign. Next I clicked on the + sign in the center of the group block and added an image block into the group. I selected an image from my media library. I clicked on the image and then HIT RETURN, which made [u]another[/u] + sign appear under the lower right-hand corner of the image. I clicked on that + sign and then selected a List group which appeared. I filled out 2 bullet points. Now, It may appear as if these 2 things are not in the same group, because you don’t see the solid bar down the left side of both items (image and list); however if you click on the Block Navigation icon at the top of your screen you will see 2 things: 1) that image and list are both underneath Group, and 2) if you click on the word Group, the solid line along the left side that illustrates these 2 items are in the same group. It is SUPER important that you remember to hit the RETURN button for every block you wish to add to the Group block; otherwise, your items will not be in the same group. Hope this helps.
How to add a class to: wp-block-group__inner-container ?
I can add a class for: wp-block-group , but not the inner in worpress editor.
I want to put two
in this group and then use Display: flex, but I can’t find how to add this flex to the inner container.
you may simply style it in your external css like that, it seems the only way:
.my-class > . wp-block-group__inner-container {
display: flex;
…
}
Once you have made a group and have moved on, is there a way to copy/move a block out of a group or into a group?
This seems to be missing functionality.
Ofcourse you can do everything you did again, but copying and pasting blocks would solve this, if not a drag and drop.
Maybe, I am just dumb, but I cannot find how to do it.
You can use Reusable Blocks for that.
Make group -> save group as a Reusable Block -> use it when you need it. Don’t forget to convert to convert to regular block.
Just search on youtube: WordPress Reusable Block
But if you need to use this group in the same post than you can jus copy or duplicate it by hit three dots on the all group block.
this is a weak tutorial. I can’t imagine what is was like before you made it ‘instructional’. You didn’t explain what are the benefits and disadvantages of using blocks, when they should be used, when not. How they fare against columns, sections, etc.
Thanks for your feedback, Rob! All great ideas for use in an outline for a class or book; however, our Blogs are meant to be short snippets taken from a larger picture that would include things such as you have described. So for this, we only wanted to demonstrate how you could use the group block if you so desired – and nothing more.