Understanding the Group Block in WordPress

WordPress introduced Block Editor with roll out of v5.3 and along with it, users were introduced to a whole new block-based content creationg interface. Block Editor introduced blocks which the users can then add to the interface in order to create content. WordPress provided a range of in-built blocks such as the heading block. image block, buttons block and many others. These blocks are known as core blocks. You can check out the full list of core block WordPress offers on their Codex page. One of these blocks is the Group block. In this article, we are going to discuss the core blocks and understand just what the Group block is and how it is proving exceedingly useful in creating page layouts in WordPress.

The Group Block in WordPress

After WordPress introduced Block Editor in verdion 5.0, users were now able to add blocks to their pages to add content. But there was still a requirement for grouping the blocks together to create moe complex layouts (something similar to the Flexbox Container in Elementor). Finally, WordPress introduced the Group block in WordPress 5.3. This blocks provided the ability to group blocks and apply styles and settings to these groups to create new layouts and interfaces.

How to add the Group Block to a Page?

We can either add a new Group Block or make a Group Block out of the existing blocks on a page. Let’s a brief look at both of these scenarios –

Adding a new Group Block

Technically, a new group block is added from the inserter but from the user’s point of view, there are a couple of ways we can access the inserter. The first way is by clicking the blue icon at the top left of the editor area. It looks like this –

Clicking on the icon opens up the inserter panel and on doing a simple search you can find the Group Block –

Also, you can access the inserter from within the content area. In case you are adding content, you should be able to see a block inserter icon to the right of the edit area. Clicking it should open an instance of the inserter like so –

When you click on the group block icon, It adds the Group Block to the Editor. It should look something like this –

As you can see, we can choose the block layout from a range of different options. There 4 options, we can choose from – Group, Row, Stack and Grid. In case we select an option, the editor adds the respective layout wrapped in the group block wrapper. For our example, let’s we add the stack layout. It should look something like this –

Here, the blocks are going to be added in a row. Similarly, for the stack layout, inner blocks will be stacked one above the other (a column layout). In the grid layout, the blocks align in a grid layout.

In this scenario, we were adding a new Group Block. Now let’s take a look at how to make a Group Block out of the existing blocks.

Creating a Group Block from existing blocks

Suppose we have some blocks in our content and want to to make a group out of them. For our article, I’m taking a title, a sub-heading and a description. Initially, it looks like this –

Currently, these are three different blocks. In order to convert these into a single Group Block, select all the blocks, click on the “group” icon at the top-left of the selection and select the “Group” option –

You’ll notice all the selected blocks get wrapped in the Group block –

There is another way of adding the blocks in a Group block. After selecting all the blocks, click on the navigation icon at the right of the toolbar and select the “group” option –

Our blocks will be grouped together inside the “Group” block.

Since we have now seen how to add the Group Block, let’s go through the settings of this block.

Settings of the Group Block

To access settings of the group block, ewe head over to the Inspector Panel for the Group block. It is the sidebar area to the right of the editor when the block is selected. It should look something like this –

In the image above, I’ve shared two types of sidebar layouts that might come up for the Group Block. One is for “layout” settings enabled and one with the “layout” settings disabled. Let’s see what this means.

Layout Controls

WordPress Themes have the option to set the default content width for all of its content. In classic themes, it was done using setting the $content_width global variable but has been replaced in block themes by layout settings in theme.json. Basically, you just set can declare the content and wide width for a theme in theme.json like so –

Here, we have set the contentSize  and wideSize  properties in theme.json. If a theme has these settings, the Group Block settings on the right in the above image should show up. In case they are not defined, you would be seeing the settings from the left of the image. You can read more about this in this article. This behaviour happens for two other blocks (as far as I know) – Query Block and Columns Block.

In case we have layout settings for the group block, we get the following settings for the Group Block –

Let’s go through these settings. First, we have the toggle control labelled “”Inner blocks use content width”. By enabling this, the blocks contained inside the Group Block will have the content width mentioned above in theme.json. In our case, it’s 1200px.

In case we need to set a different width for the inner blocks, we can do that with the “CONTENT” and “WIDE” input fields present below the toggle control.

Next is the “Justification” control. We have the option to justify the blocks inside the Group Block.

Position Controls

After the Layout controls, we have the position controls. By default, we have the option to make the block sticky. This can be further customized

Advanced Controls

It is the standard Panel for every block. We have the option to add custom HTML anchor, custom classes to the block and define the tag for the block.

Color and Typography Controls

By default, the Group Block contains Color and Typography control through which we can control the colors and typography of the inner blocks. When the layout settings, are enabled, these settings get moved to the “style” tab in the Inspector Panel.

Conclusion

So, that was it! We discussed a lot of stuff about the Group block, what it is and what do the different settings mean. By now, you should have a good idea about its functioning and how it plays an important role in setting up layouts in a page.

Hope you were able to learn something new in this article. I f you liked it, you should definitely check out our blog where we share more insights in WordPress and Web Development in general on a regular basis. See you in the next article.