Blocks, Design Blocks

Blocks » Group Block

The Group block is a block that groups other blocks together inside one container. Think of it as a “parent” block that can hold multiple “child” blocks within it.

Table of Contents

Insert a Group Block

In order to add a Group block, click on the + block inserter icon to open the block library and select the Group block:

Group Block Layout and Demo

For more, visit our detailed instructions on adding blocks.

After inserting a Group block, a block inserter icon will be displayed to allow you to add new blocks inside that Group block.

Group block inserted
Group block inserted

Click the + icon to add blocks inside of the Group block

↑ Table of Contents ↑

After adding blocks inside a Group block, the Group block itself no longer shows. If you need to select the Group block again to access its settings, you can use the List View option at the top of the editor screen.

The List View option expanded to show the different blocks on the page, with the Group block highlighted.
Use the List View to select the Group block again

↑ Table of Contents ↑

Common Uses For the Group Block

The Group block has many uses. One popular use is to group together a set of columns and add a background color to distinguish it visually.

Grouping together a Column block with a background color

If you find yourself using the same set of blocks together quite frequently, you can group them together and save the Group block as a reusable block. This lets you quickly and easily insert the same set of blocks again all at once, instead of adding each block one at a time.

Group multiple blocks together and reuse them later
Group multiple blocks together and reuse them later

↑ Table of Contents ↑

Block Toolbar

In order to reveal the block toolbar, you can click on the Group block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The Group block offers the following options in its toolbar:

The Group block toolbar, with icons for moving the block, changing alingment, and the More Options menu.
Group block toolbar

The icons on the Group block toolbar, starting from the left, are:

  • Change block type.
  • Drag the block.
  • Move the block up or down.
  • Align to wide or full-width.
  • More block settings.

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ (⚙️)icon next to the Publish button.

Block Settings
Block Settings

↑ Table of Contents ↑

Layout Settings

Layout: Toggle the option on for “Inner blocks use content width” to allow the inner blocks to use the content width set by the Group block. For example, setting the Group block to Full width and inner block to Full width ensures the inner block takes the full width of the page or post content.

↑ Table of Contents ↑

Color Settings

Text, Background, and Link colors can be set on a Group block, allowing you to call attention to important content.

Group Block Color Settings
Color Settings

↑ Table of Contents ↑

Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

↑ Table of Contents ↑

Dimensions

Padding is empty space within the border of a block, which can bring clarity to your content and adjust the balance of the page’s layout.

You can customize the padding in a group block on supported themes. Select the Group block and in the block’s sidebar options go to the Dimensions section and type a value in Padding.

If you click the unlink icon, you can add different padding values for your group block’s upper, down, left, and right spaces.

Adding Padding to the Grouped block

↑ Table of Contents ↑

Grouping Existing Blocks

You can group existing blocks on your page or post.

First, select the block or blocks you wish to group. You can select multiple blocks by clicking and dragging or by holding down the “shift” key and clicking on each of them (they need to be next to each other).

The block toolbar will appear. Select the Group icon.

How to group existing blocks together
Width Options within a Group block

When you add existing blocks to a Group block the wide and full-width alignment options move to the Group block. The individual blocks (like an Image block for example) will no longer have the wide or full-width options in the block’s toolbar.

Set the alignment of an individual block to full or wide width before you add them to the Group block. If you have already added blocks to a Group block, you can un-group them, then set their width, then re-group them.

↑ Table of Contents ↑

Ungrouping Existing Blocks

You may need to ungroup existing blocks in order to modify the alignment of the individual blocks.

  1. Click List View at the top of the Editor and select the Group block.
  2. Click on the More Options icon in the block toolbar.
  3. Select the Ungroup option.

↑ Table of Contents ↑

Advanced

The HTML Anchor is a useful tool for creating Page Jumps. You can also add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Advanced options to add HTML anchor and additional CSS class(es)
Advanced Settings

Not quite what you're looking for?

Get Help