Introduction
The group block in WordPress is a block type that will allow you to place additional blocks within. It can be useful for creating layouts or for organizing your content. The group block can contain any other block type, including text, images, videos, and more. The entire group can then be styled, positioned, and deleted as a single entity.
Group Heading
Group Subheading
The ocean stretched out before me, a vast expanse of blue and green. The waves were gentle today, rolling in and out with a soothing rhythm. I sat on the sandy shore, watching as the seagulls flew overhead and the crabs scuttled across the sand. The salty air filled my lungs, and I closed my eyes, letting the sun warm my face. It was a perfect day at the beach.
Settings and Properties
Group align setting
The width of your group is determined in the Align property settings.
- None: This will inherit the default Content width settings of your theme(example: 650px).
- Wide width: This will inherit the width for Wide that is used in your theme(example 1140px).
- Full width: This will fill the screen or the parent container it is placed within.
The default settings can generally be found in your theme’s Customizer. If you are using Twenty Twenty-Three theme, these default settings are edited in the Site Editor > Styles > Layout.
Group layout settings
By default, the child blocks inherit the full width of the parent group. This behavior can be edited in the Layout tab in the settings.
By selecting the toggle switch in the Layout tab, you can then set the width of the child blocks as desired for you design. You may use PX, %, EM, REM, VW, or VH measurement units.
When editing the width settings, the properties will automatically inherit the values of the other property. You may set a different value for the properties by manually entering the desired value in each of the fields.
You may also set the Justification of the child blocks to Left, Center, or Right by selecting the corresponding icon.
Pros and Cons
What are the advantages?
Groups are the simplest way to create sections on your website. You can set a common color scheme for the background and text within it. This will save time as opposed to setting the styling of each child block.
What are the disadvantages?
The group displays your child blocks vertically on the screen. It does not allow you to place items side by side horizontally (without using CSS). While this may be perfectly acceptable for mobile layouts, you may find it a bit limiting for desktop design. You will need to use columns and or rows within the group for greater control.
Need more control?
While the WordPress block editor is much more powerful than it was even a few years ago, it still has limitations as a design tool. It is still best used for content. Many web creators choose a page builder such as Elementor to have a much greater control over the design of their website. Using the Elementor flexbox container widget, rather than the group block, will provide you with the ability to design differently for desktop, tablet, and mobile.