How to Use the Group Block

The Group Block in the Gutenberg editor is used to group multiple blocks into a single container, allowing content managers to treat multiple blocks as a single entity. So learning to use the group block will pay dividends in creating more complex layouts and designs and organizing content into sections or group-related elements. This post will look at common scenarios for using the group block as effectively as possible.

What is the Group Block?

While the Group block is technically a block, it requires a different process than what is used with the other blocks. It can be resized, re-positioned, and styled as needed, and its contents can be edited or rearranged as desired.

Scenario: Creating a Sidebar Group

Website real estate, or lack thereof, is real. We want to be able to fine-tune the spacing between the headings and the content they describe or separate. While you want to give your headers space, the default block settings often offer too much space and make the sidebar look more than a little wonky.

When I first built the sidebar on this blog, I placed a Headline block followed by the Latest Posts block outside a group or container. While I could make it look passable, it did not look cohesive and well-balanced. Using the Group block has solved this issue. As an example, we’ll look at this blog’s right sidebar. Below I walk you through the creation of a group, the addition of a Headline and Latest Posts widget, and the steps I followed to create it.

• From the dashboard, navigate to Appearance > Widgets.
• On the widgets page, expand the Right Sidebar widget.
• Click Add a Block + and select the Group block from the block options.
• Once the Group block is added, click the + again to add the Headline widget.
• Give the Headline widget a title.
• Select the Group icon and click the small + on the lower right of the Group block area.
• Select the Latest Posts block.
• Configure it with the date and preferred featured image.
• Preview a page that will use the Right Sidebar widget.

Scenario: Creating a 2-Column Content Group

In our second scenario, we’ll look at creating a responsive two-column content layout. More often than not, I opt for this approach for smaller tables over using the native Table block for three reasons; First, you can create a responsive group that will resize to almost any technology. Second, you have many more options to fine-tune the layout and design to meet specific requirements. Third, the native Table block is not necessarily easy to work with. For larger tables with sorting and export options, TablePress is the better option.

Below is our example. To install this on your website, follow the instructions below:

1. Download the JSON file and save it to your local system.
2. Open your WordPress dashboard.
3. Create a new page.
4. From the newly created page, click the three ellipses in the top right corner of the browser and select the option Manage Reusable blocks.
5. On the Reusable blocks page, click the blue Import from JSON button.
6. Navigate to the JSON file you downloaded in step 1 and import it into your website.
7. Once in your Reusable blocks, you can add the block from the block inserter > Reusable Blocks
8. Once placed on a page, convert the reusable block to a standard block so your edits will only be applied to the block instance on the page.

Additional Resources

Official Group Block Documentation
https://wordpress.org/documentation/article/group-block/