| WordPress |

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.

gutenberg groups block

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).

group1

  • Click on the + sign 
  • Add a Group Block.

group2

  • 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.

group3

  • Type your content in the paragraph block.
  • Hit "Return" key on your keyboard after you are finished.

group5c

  • 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".

group6

 

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?

group7

  • Click the + sign located below the List Block.  
  • Add an Image Block.

groupIMAGE

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


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.