The Group block can be very useful in helping to create attractive and interesting page layouts.
You can start by inserting a Group block and then adding the desired blocks inside the group. Or you can transform an existing block into a Group block – this has the effect of wrapping the current block inside the group and can be very convenient if you have started to write content and then decided that you want to improve the layout.
Group Block
Group Example
This content is inside a Group block (class wp-block-group). Any blocks can be added inside the group block – this group block contains a heading and some paragraphs.
One common use case for a Group block is to group content together within a border or coloured background. It is usually good design practice to add some padding, to prevent text from nudging up against the edges of the block.
Full Width Group – Inner Blocks at Content Width
This group is set to Full width, with a coloured background and some padding. The inner content stays at the content width by default, based on the Inner blocks use content width setting.
The site content and wide width settings are used for nested blocks; if desired, specific values can be entered in the content and wide fields to cause different widths to be used.
All of the usual settings – colour, typography, dimensions (margin and padding), and also border – are available for the group block. In addition, there is a justification setting, which allows the content to be set to the left, right or centred (centred is the default and is the most commonly desirable option).
Full Width Group – Inner Blocks Unrestricted
This group is similar to the one above, but with the Content Width restriction for inner blocks set Off.
The inner content will expand to fill the available space – one consequence may be that text lines are very long and become hard to read as a result – it is always worth checking content on various sizes of browser window – large, smaller and on mobile devices – to ensure that content looks good and is readable. Some left and right padding may be added automatically as part of the theme’s styling, or padding can be added in the group block’s settings.
Group with Left-Aligned Image
This content is inside a content-width Group (content-width is the default setting).
If an image is left- or right-aligned, it is often handy to wrap the image and accompanying text in a group, to prevent the image from “floating off” to the far left or right of the browser window.
Background colour (with no padding, in this case) has been set on this group, to make it clear where the group starts and ends.
Group, Row or Stack
Row and Stack are variations of the Group block. You can transform a Group into a Row or a Stack (and back again), in the settings.
Row
The Row block displays all of the content horizontally within the row. Content can be left, centred or right justified, or spaced out, as shown in the animation below.
Stack
The Stack block displays all of the inner content vertically. While this initially appears very similar to the same set of content in a normal Group block, it is styled with flexbox, which allows for some useful styling alternatives, such as with spacing.
With Group, Row and Stack blocks, there are many combinations and variations of styling. If you can’t achieve what you are aiming for with a standard Group block, try transforming into a Row or a Stack, and playing around with the settings.
Layouts
Groups, Rows, Columns, colour and images can be combined to achieve some very attractive page layouts.
Note that this section uses some additional CSS styling, to improve layout on mobile devices.
Group and Columns blocks, along with Cover Image and Media & Text, are the blocks which are most useful in building page layouts.
More Information
For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting. Or read more about Page Layout with the Block Editor.