What Is the Group Block in Gutenberg WordPress

The Group block is a container in the WordPress block editor. It wraps other blocks, such as headings, paragraphs, images and buttons, into one unit so you can move, style and space them together. Row and Stack are versions of the same block that lay their contents out horizontally or vertically, and Grid does the same in columns and rows.

What the Group block does

WordPress describes the Group block as a way to gather blocks in a layout container. You put blocks inside it, and the group then carries settings that apply to the whole set: background, padding, border, text colour, width and more.

Without a group, each block sits alone on the page. If you want a coloured band behind a heading, a paragraph and a button, you would have to style each block separately and hope the spacing lines up. With a group, you style the band once.

The Group block is part of the core editor, so you do not need a plugin. It works in posts, pages, templates, template parts and patterns.

How to add a Group block

Insert an empty group

1. Open a post or page in the block editor.
2. Select the Block Inserter (the plus button) and search for Group. You can also type /group on a new line and press Enter.
3. Click the inserter inside the group to add blocks.

Wrap blocks you already have

1. Select several blocks. Drag across them, or hold Shift and click each one.
2. Choose the Group option in the block toolbar, or open the three-dot menu and pick Group.
3. Or use the shortcut: Ctrl + G on Windows, Command + G on Mac.

To undo it, select the group and choose Ungroup from the same menu. The blocks stay where they are and the wrapper disappears.

Group, Row, Stack and Grid

When you add a Group block, you can choose between variations. The WordPress documentation lists Group, Row, Stack and Grid, and notes that they are all types of the Group block with a different layout by default.

Variation	What it does	Use it for
Group	Wraps blocks with the default layout from your theme or the block settings	A section with a background, such as a call to action
Row	Places blocks in a single horizontal line	An icon next to text, a logo strip, buttons side by side
Stack	Places blocks in a vertical line	A card with a title, text and a button, one under the other
Grid	Places blocks in columns and rows	A set of cards or features in a grid

You can switch between them later. The Row block toolbar has a Transform to option for converting it to Group, Stack, Grid, Cover, Columns or Details, and the block settings also let you switch between Group, Stack and Grid.

Group block settings

Select the group and open the Settings sidebar to see its options. Which ones you see depends on your theme and your WordPress version.

Alignment and width

The toolbar has an alignment control with None, Wide width and Full width. None is the default content width. Wide and full width only work if your theme supports them.

Layout

The Layout panel controls how the blocks inside the group are arranged. There you will find:

• Inner blocks use content width. Turn it off and nested blocks fill the width of the group. Turn it on and they follow the content width, with options for wide width.
• Content width and wide width. You can set these in PX, %, EM, REM, VW or VH.
• Justification. Align the child blocks left, centre or right.
• Orientation. Show child blocks side by side or stacked.
• Wrapping. Allow child blocks to wrap onto new lines on small screens. This is on by default, and turning it off keeps everything on one line regardless of screen width.

The layout settings sit on the parent. To reach them from a child block, select the child and click the parent icon at the start of the block toolbar, or use List View.

Dimensions

Dimensions control padding, margin and the gap between the blocks inside. Use padding to push content away from the edge of a coloured background. Use block spacing to set the distance between the children.

Colour, background and typography

You can set text colour, a background colour or gradient, and a background image. Typography settings on the group apply to the blocks inside it. The Elements panel lets you change link, button and heading colours for everything nested in the group.

Border and shadow

Add a border with a colour, width, radius and style, or a shadow, to make a group read as a card.

Position

A top-level Group block can be set to sticky, so it stays at the top of the window while the page scrolls. The setting is not available for a group nested inside another block.

The HTML element setting

By default a group is wrapped in a div. In the Advanced section, the HTML element setting lets you choose a different wrapper. The Group block offers div, header, main, section, article, aside and footer.

WordPress says this helps you optimise content for screen readers and improve accessibility. A few rules of thumb:

• Use section for a themed chunk of content that has its own heading.
• Use article for a self-contained piece, such as a card for a post or a testimonial.
• Use aside for side content related to the main content.
• Use header and footer for the top and bottom of the page, or of a section.
• Use main once per page, for the main content. In a block theme, the template usually already provides it.

The same Advanced panel has an HTML anchor, which gives the group its own address so you can link straight to it, and a field for extra CSS classes. Both are handy for long pages.

What the group looks like in the page source

You do not need to write this by hand, but it helps to see what the editor saves. A group containing a heading and a paragraph is stored like this.

<!-- wp:group {"tagName":"section","layout":{"type":"constrained"}} -->
<section class="wp-block-group">
  <!-- wp:heading -->
  <h2 class="wp-block-heading">Our mission</h2>
  <!-- /wp:heading -->

  <!-- wp:paragraph -->
  <p>One short paragraph about the mission.</p>
  <!-- /wp:paragraph -->
</section>
<!-- /wp:group -->

The comment holds the block settings, including the HTML element you chose and the layout type. The HTML between the comments is what visitors receive. A Row looks the same except that its layout type is flex with a horizontal orientation, and a Stack is flex with a vertical orientation.

Practical ways to use a Group block

A call-to-action band

Group a heading, a short paragraph and a button. Give the group a background colour, add padding and set it to full width. You now have a band you can copy to other pages.

A card

Use a Stack with an image, a title, a line of text and a button. Add a border or shadow and a radius. Put several cards inside a Grid for a features section.

A header row

Use a Row with a logo, a menu and a button. Set the justification to space between items so the logo sits on the left and the button on the right.

A highlighted note

Wrap a paragraph in a group, add a background colour and a left border, and you have a callout box for tips and warnings.

A reusable pattern

Once a group looks right, save it as a pattern, then insert it anywhere. Because the group holds the styling, the pattern stays consistent across pages.

Group block and accessibility

A group on its own does not change what a screen reader announces, because a plain div carries no meaning. The accessibility gain comes from the HTML element setting and from a clear heading structure inside each group. Keep one heading level order across the page, give each section its own heading, and check that colour contrast between your text and the group’s background is high enough to read.

Best practices

• Group related content only. A heading, its text and its button belong together. A whole page in one group does not help.
• Do not nest more than you need. Each extra level adds markup and makes the List View harder to read. Name your groups in List View if a page gets long.
• Style the group, not each child. If every block inside needs the same padding, set it once on the group.
• Choose Row, Stack or Grid at the start. It is faster than fixing the layout later.
• Test on a phone. A Row that looks neat on a desktop can wrap awkwardly on a small screen, so check it, and keep wrapping on unless you have a reason to turn it off.
• Prefer theme styles. If your theme defines styles and spacing, use them first, so your pages stay consistent when you change the design.

Common problems

The group will not go full width. The alignment option only appears if your theme supports wide and full width. Check the theme, or place the group at the top level of the content rather than inside another block.

The blocks inside are too narrow. Look at the Layout panel and toggle Inner blocks use content width. Turning it off lets the children fill the group.

I cannot find the sticky setting. It is only available on top-level groups.

The settings I see differ from this guide. The editor changes between WordPress versions and themes add their own options. The documentation on wordpress.org tracks the current release.

For preview problems on shared pages, see our post on which image WordPress shows on preview. If you are comfortable with code and want to change how blocks render, read what WordPress hooks are. Before you rebuild a page, take a backup, and our guide to the best backup plugins for WordPress can help.

Frequently asked questions

What is the Group block in Gutenberg?

The Group block is a container that holds other blocks so you can style and arrange them as one unit. It supports background, padding, border, typography and layout settings, and it is part of the core editor.

What is the difference between Group, Row and Stack?

They are the same block with different default layouts. Group wraps content in the default layout, Row places blocks in one horizontal line, and Stack places them in a vertical line.

How do I group blocks in WordPress?

Select the blocks, then choose Group from the block toolbar or the three-dot menu. The shortcut is Ctrl + G on Windows and Command + G on Mac.

How do I ungroup blocks?

Select the group, open the three-dot menu in the toolbar and choose Ungroup. The blocks stay in place and the wrapper is removed.

Can I change the HTML tag of a Group block?

Yes. In the Advanced section, use the HTML element setting to choose div, header, main, section, article, aside or footer. This helps screen readers understand the page structure.

Can I put a Group block inside another Group block?

Yes. Groups can be nested. Keep nesting shallow, because each level adds markup and complicates editing.

Why can I not make my group sticky?

Sticky positioning is only available for top-level Group blocks. A group inside another block does not show the Position setting.

Do I need a plugin to use the Group block?

No. It ships with WordPress. Some themes add extra styles or options for it, but the block works without them.

Next steps

Open a draft page, add a Group, and put a heading, a paragraph and a button inside it. Switch it between Group, Row and Stack, and watch what the Layout panel does. Then try a Grid of three cards to see how Group, Stack and Grid work together.