Group Block

The Group, Row, Stack, and Grid blocks are useful tools for building well-structured pages in WordPress. They let you organize content into sections — making it easier to move, duplicate, and manage groups of blocks as a single unit. These blocks are also a go-to solution for creating visual sections, helping you apply branded backgrounds and maintain consistent styling across your page.

Start here: watch the walkthrough (6 minutes)

Why use the Group block

Use the Group block when you want to create a clear, consistent section of a page — especially when you need to apply styling across multiple blocks at once.

In addition to the standard Group block, WordPress includes Row, Stack, and Grid variations. These work the same way (they contain nested blocks), but each variation controls layout differently. You can add any of them directly from the block inserter, and you can switch between them at any time without recreating your content.

Common uses include:

Creating visual page sections using Styles (branded background + automatic text color)
Adding background images behind a section
Grouping blocks so they can be moved, duplicated, or reused together
Controlling section padding, margin, and block spacing
Building structured layouts using Row, Stack, or Grid
Keeping complex layouts organized (including Groups inside other Groups)

In most cases, the default Group layout is the best starting point. When you need more control over alignment or multi-item layout behavior, Row, Stack, or Grid can be a better fit.

How to use the block

Start by adding a Group, Row, Stack, or Grid block to the page. Learn how to add blocks.

Once the block is added, editors typically:

Add blocks inside the container
Use List View to understand what’s inside (and select nested blocks easily)
Apply a Style to create a consistent section theme
Adjust spacing (Padding, Margin, Block spacing) as needed
Switch the layout type (Group ↔ Row ↔ Stack ↔ Grid) when the design calls for it

Switching between Group, Row, Stack, and Grid

You can switch between layout variations from the block settings sidebar. This is useful when you want to change layout behavior but keep the same content inside the container.

The block toolbar appears above the selected block.

Block width

Controls how wide the container is within the page layout. Full width is commonly used to create full-width sections, especially when applying a background color theme.

Justification

Controls the horizontal alignment of the blocks inside the container. This is especially useful for Row and Stack layouts when you want content aligned left, centered, or spaced evenly.

Vertical alignment (Row and Stack only)

Controls the vertical alignment of items within the Row or Stack layout (top, center, bottom).

Block settings

Block settings appear in the right sidebar while the block is selected.

Layout type

When adding a new block, you can choose a layout type (Group, Row, Stack, or Grid). You can also switch between types at any time from the sidebar.

Group: General-purpose container (best default option)
Row: Blocks flow horizontally in a row (good for small sets of items)
Stack: Blocks flow vertically (useful for consistent vertical spacing)
Grid: Block align into a grid system (best for card-style layouts, galleries, and repeated content)

Inner blocks use content width (Group only)

When this setting enabled, the blocks inside the Group will use the default content width for your site, even if the Group itself is wider (such as full width). You can also enter a custom width value (px, %, rem) to override the default content width. This is helpful for layouts like a full-width background color section with content constrained to a readable width.

When this setting is disabled, inner blocks can expand to the full width of the Group container.

Allow to wrap to multiple lines (Row and Stack only)

Controls whether items inside the Row or Stack can wrap to a new line when space is limited.

This is useful when:

A row contains multiple buttons, badges, or links
Content needs to remain responsive without overflowing

Grid item position (Grid only)

Controls how the Grid determines its structure. Auto layouts are often the most responsive and flexible choice.

Auto: Uses an automatic grid layout. You can set a target column width, and the grid will arrange items automatically.
Manual: Lets you set a specific number of columns.

Has transparent background

Removes the background color from the block. This can be useful when using a Group inside another section that already has a background color or image, or if the Group is used for structure and spacing only, not visual styling

Block styles

The Styles tab in the block settings sidebar contains most of the design controls for Group, Row, Stack, and Grid.

Styles (color themes)

This is the most common reason editors use the Group block. Style options apply a background color and automatically adjust text color for all content inside the section so it remains readable and consistent. Use Styles when you want a section to visually stand apart from surrounding content.

Available options often customized for your brand and include: White, Light, Dark, Brand

Text color

Overrides text color inside the section. Use Styles first when possible. Manual text color overrides can make sections harder to keep consistent.

Background color

Overrides the background color. Use Styles first when possible.

Background image

Adds an image behind the section content.

After adding a background image, additional controls are available by clicking on the image file name in the sidebar.

Focal point (sets where the image is centered)
Position (left/top percentage controls)
Fixed background (keeps the background fixed while scrolling)
Size
- Cover (fills the area)
- Contain (fits inside the area)
- Tile (repeats)

Background images are powerful, but readability comes first. Make sure text remains legible against the image and any overlay colors. The Cover block is often a better choice when using image backgrounds.

A common use case is adding a PNG with a transparent background (such as a shape, texture, pattern, or brand graphic) on top of a background color. This lets you create branded sections with subtle visual interest without needing a full photo background.

Dimensions

Padding – Adds space inside the block, around its inner blocks. This is commonly used for section breathing room.

Margin – Adds space outside the block, separating it from surrounding content.

Block spacing – Controls spacing between the inner blocks inside the block. This is one of the most useful settings for building clean, consistent sections without inserting Spacer blocks or empty blocks.

Accessibility and content structure

Group, Row, Stack, and Grid primarily affect layout, not meaning — but structure still matters.

Make sure the content order inside the block makes sense when read top-to-bottom (especially for responsive layouts).
Use proper headings so page structure stays clear.
When applying background images or dark themes, ensure text remains readable with sufficient contrast.

HTML Element (advanced)

In Block settings, under the Advanced section, you may see an HTML Element setting with options: <div> (default), <header>, <footer>, <section>, <article>, <aside>

This setting adds semantic meaning to the container, which can help define page structure for accessibility tools and assistive technologies. This option is mainly used when building templates to define the overall structure of a page.

For content editors building page or post content, the default <div> is appropriate in nearly all cases, and this setting generally does not need to be changed.

Tips for editors

Use List View to work confidently

Groups often contain multiple nested blocks. List View helps you see what’s inside the Group, select the right block quickly, and drag blocks in and out of a Group without breaking the layout.

Rename Groups in List View

When layouts get complex, renaming Group blocks in List View makes it much easier to navigate a page (for example: “Hero section”, “Card grid”, “FAQ section”). This is only visible to editors, and purely for content organization. It can be especially useful when returning to edit a page later.

Start with Patterns when possible

Many Patterns already include well-configured Groups with spacing and styles applied. Reusing these Patterns can save time and keep design consistent.

Nest Groups intentionally

Groups can be nested inside other Groups. This is normal — but avoid over-nesting unless it’s helping you control layout or styling in a meaningful way.

Use Styles for section themes

If you want a section to have a consistent background + text color treatment, use Styles first instead of manually changing colors block-by-block.

Please note that your block may have customizations affecting functionality, appearance, or settings.