The Group block allows you to group different items together and add a background color or style. You can also group items and save them as a reusable block.

Wake Forest students walk through a tunnel of bright yellow gingko trees on their way to the library, on the campus of Wake Forest University.

To add a group block, click on the Block Inserter icon.

You can also hold down shift and select multiple items, then choose the “Group” option from the menu:

Detailed instructions on adding blocks can be foundĀ here.

Block Toolbar 

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The group block offers standard block options as well as full-width and wide-width options.

Editing the block

The nice thing about the Group block is that you can add any other blocks inside the group block and create a layout of your own. To add blocks to the Group block, click on the add inserter icon inside the Group Block.

Adding Content

Inside the group block, you can add a columns block, cover block or any other available block to create the layout of your choice.

The group block shown above is full-width, has a gray background and contains a wide-width double column with headings, paragraphs and button blocks.

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. 

The “Inner blocks use content width” toggle forces all inner blocks to be the same width as your group, if you would like to set your inner blocks to have their own smaller independent width then leave this off. The “Width” field allows you to set a custom group width.

Style Settings

Note that since the group block has the ability to embed other blocks, if you click specifically on one of the blocks, the settings in the sidebar will change according to the block you added to the group block (e.g. if you added an image inside the group block, when you click on the image the sidebar will display the options from the image block settings).

Color Settings

Here you can choose the text and background colors.

NOTE: Accessibility criteria are built into the new editor to warn you when the text color combination becomes illegible for persons with reading impairments.