The Group block allows you to group different blocks together and customize to your liking, including setting custom background colors, spacing, and more.
Example Group Block
To add a group block, click on the Block Inserter icon.
You can also type /group and hit enter in a new paragraph block to add one quickly.
Detailed instructions on adding blocks can be found here.
Block Toolbar 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 (if the theme supports these alignment styles).
The “Group” block shows three buttons in addition to the “Group” block icon.
- Moving handles
- Change alignment
- More options
The up and down arrow icons can be used to shift a block up and down in your document. Detailed instructions on moving a block within the editor can be found here.
Wide width – Increase the width of the post beyond the content size.
Full width – Extend the block to cover the full width of the screen(if supported by your site’s theme).
Hide Block Settings
The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.
Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.
Duplicate can be used to duplicate selected block.
Insert a new block before the selected block(s).
Insert a new block after the selected block(s).
If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.
Instructions on using “Move To” option to move a block can be found here.
Add to Reusable blocks
Using the “Add to Reusable blocks” option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.
Remove Block: With the “Remove Block” option, you can delete the selected block from your content.
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.
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 here has columns, heading, paragraph, image and button blocks.
Block Settings 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.
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).
This is an advanced option that allows you to add custom content widths to the overall Group block for all blocks assigned to the center or wide columns. In many cases, you won’t need to use this option. When you toggle this option on, it allows the Group block to inherit the options set by your theme. When it’s toggled off, you can customize to your liking.
When the group block is selected, you can see the color settings in the sidebar. You can select the text, background, and link colors to your liking.
This option allows you to set a border around the Group block, including the color, the width, radius, and the style of the border.
The option to control block spacing and padding is enabled for the Group block. You can read more about these settings in the Dimension Controls Overview support page.
The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.
“HTML anchor” allows you to make a unique web address for a particular “Group” block. Then, you’ll be able to link directly to a “Group” block of your page.
The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.