Group Block

What is Group Block in Gutenberg WordPress?

Using the Gutenberg editor, you work with blocks when you build a page or post in WordPress. Each block contains text, images, buttons, videos, and more. Sometimes, you must move, style, or arrange many blocks together. That’s where the Group block comes in.

The Group block lets you bundle multiple blocks into one container. You can then style or move them as a single unit. This makes your layout easier to manage and keeps your design clean and flexible. In this guide, I will show you the Group block, how to use it, and why it’s helpful.

What Does the Group Block Do?

The Group block wraps other blocks inside one container. It acts like a folder. You place blocks into this folder and manage them together.

For example, you can add a heading, a paragraph, and a button. Instead of styling or moving each one separately, you group them. Now, you can change the background, spacing, or layout for all of them simultaneously.

How to Add a Group Block

Adding a Group block is simple. Follow these steps:

  1. Open a page or post in the block editor
  2. Click the plus (+) icon to add a new block.
  3. Search for Group
  4. Click on Group to add it to your page.
  5. Now click inside the Group block to add other blocks like headings, text, or images.

You can also select existing blocks and group them.

How to Group Existing Blocks

If you already have blocks and want to group them, do this:

  1. Hold down Shift and click on the blocks you want to group
  2. Once selected, click the three-dot menu in the block toolbar.
  3. Click Group
  4. The blocks now sit inside a Group block.

You can now style or move them as one.

What Can You Do with a Group Block?

The Group block gives you many layout and design options. You can:

1. Change Background Color

Select the Group block and choose a background color in the settings panel. All blocks inside will sit on this color.

2. Add Padding and Spacing

You can add space inside or around the Group block. This makes the layout look neat.

3. Add a Border or Rounded Corners

You can add a border, change its color, or round the corners in the settings.

4. Use Group with Columns or Rows

You can nest a Group inside a Column or Row. Or add Columns inside a Group. This helps create complex but easy-to-manage layouts.

5. Reuse the Group

You can save the Group block as a Reusable Block. Then, you can use it on other pages without rebuilding it.

Common Uses for the Group Block

You can use the Group block in many ways. Here are some examples:

1. Call-to-Action Section

Group a heading, text, and button. Style them together. Add a background and spacing.

2. Hero Section

Group an image and a welcome message at the top of a page.

3. Testimonials or Reviews

Group text and star ratings for each customer quote.

4. About Section

Group an image on one side and text on the other.

5. Footer Area

Group menus, contact info, and social links into one block.

Group Block vs. Other Layout Blocks

WordPress has other layout blocks like Columns, Rows, and Stack. How does the Group block compare?

  • Group Block: Basic container. Suitable for wrapping any set of blocks.
  • Columns Block: Splits content side by side. Use when you need two or more vertical sections.
  • Row Block: Aligns blocks in a row. Use when blocks should sit next to each other horizontally.
  • Stack Block: Aligns blocks in a vertical stack with spacing. It’s suitable for mobile layouts.

You can use the Group block alone or with these layout tools for complete control.

How to Style the Group Block

After selecting the Group block, go to the right sidebar. You will see block settings.

Here, you can:

  • Set background color or gradient
  • Add text color for inside blocks.
  • Change padding and margin.
  • Add a border and adjust the corner radius.
  • Choose a layout (wide, full-width, or standard).
  • Set typography and font size if needed.

This makes your design look clean and consistent.

Conclusion

The Group block in WordPress is a powerful tool for anyone using the Gutenberg editor. It helps you organize, style, and control multiple blocks at once. You can use it to build clean sections, improve layout, and save time.

Once you get comfortable with it, your page designs will look better and feel more straightforward to manage. Whether you build a blog, a business site, or a landing page, the Group block will help you do it better.

Join us and other site creators to share your latest project or get a quick advice on website building.

Live Composer is free and open-source. We invite all the users and developers to join us in plugin development.

It's super easy to create designs or extensions for Live Composer. Sell your add-ons to 30K+ plugin users.