The Groupblock allows you to group different blocks together and customize them to your liking, including setting custom background colors, spacing, and more.
Add a block
You can add a Group block in two ways.
Click on the Block Inserter icon and type the word “group”.
Select the icon.
Alternatively, you can type "/group" in a new paragraph block, then click the icon or hit “enter” to add one quickly.
Convert multiple blocks to a Group block
You can also create a group by selecting multiple blocks.
Highlight or select all the blocks you want to group by either dragging your mouse across the blocks you want to group, or hold down the “shift” key and use your navigation arrows or click on multiple blocks.
Click the "Transform to" icon and select "Group".
Alternatively, after selecting the blocks you want to group, click "More Options" and select "Group".
Add content
Inside the Group block, you can add any available block, such as a column block or cover block, to create the layout of your choice.
Click the "+" icon to add a block within the group block
Type in your desired block, then click the icon from the options
Group Block Styles
In the right sidebar of the editor, you will have other options to adjust the appearance of the Group block. If you do not see the sidebar, click on the Settings "cog" icon in the upper right corner.
Color
When the Group block is selected, you can see the color settings in the sidebar.
Go to the "Block" tab to adjust color settings
Select the text, background, and link colors that you prefer; you can select from the color picker window or enter a specific HEX, HSL, or RGB value. You can see the color changes as you select them.
Note: your color selections will impact all blocks that are part of the Group block when using this option.
Border
This option allows you to set a Border around the Group block, including the color, width, radius, and style of the border.
Width - how wide the border will be around the block.
Style - the type of border to be shown, such as a solid or dotted line.
Color - the color of the border.
Radius - how rounded the corners of the border will be; you can adjust this by either sliding the bar to the right to have more rounded corners or by entering in a value. You can also click the "link" button to have the option to adjust each of the radiuses individually.
Dimensions
The option to control Block Spacing and Padding is enabled for the Group block.
Padding - this adjusts the spacing of the blocks inside the Group block; you can enter one value for all four sides using the value field, or you can adjust each side individually by clicking the "link" button. In the value field, you can click on the "px" option to select from a variety of different measurements.
Block Spacing - this adjusts the spacing between blocks within the Group block by entering a number into the value field; you can click on the "px" option to select from a variety of different measurements.
Note: 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. For example, 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.
Every block has specific options in the editor sidebar in addition to the options found in the block toolbar.
Product Documentation
