Group, Row and Stack Blocks

What the three blocks are: Group is a generic container with no layout direction of its own, Row arranges its children horizontally with flexbox, and Stack arranges them vertically with flexbox. A Grid variant exists in newer WordPress versions for children arranged in a true grid rather than a single row or column. Nearly every layout in the block editor is one of these three doing the actual arranging.

Group

Group is the plainest container: it wraps other blocks in a single box and, by default, stacks them vertically using the same constrained layout as the main content area — children are centred against the content or wide width, and vertical space between them comes from block gap rather than manual margin.

Group's job is to be a target for styling: background colour, padding, border, and a width or alignment setting different from its children. It is also the block to reach for when you need a boundary to apply "full width" or "wide" to a whole section at once, rather than to every child inside it individually, and it is the natural place to add custom CSS when a design needs something the block controls do not expose.

Group can be switched internally to a flex layout, at which point it behaves like Row. In practice, most editors leave Group as the default stacking container and use Row or Stack directly, since those two make the intended direction obvious without opening a settings panel to check.

Row

Row lays its children out horizontally, side by side, using flexbox. It exposes controls for the gap between children, horizontal justification (left, centre, right, space-between), vertical alignment, and whether children wrap onto a new line on narrow screens.

Row is the right block for a cluster of items that should read as one horizontal group: a row of logos, a set of buttons, an icon next to a heading. Because it is flex rather than a rigid column grid, children size according to their own content by default rather than being forced into equal fractions — a short button and a long one sit naturally at their own widths unless you explicitly set them to grow or set fixed widths.

Wrapping matters on mobile. A Row with wrapping disabled will force its children into a single line regardless of viewport width, which is a common cause of horizontal overflow on phones; enabling wrap lets children drop to a second line instead, though for anything that must fully restructure — like a navigation bar collapsing to a menu icon — a Row alone is not enough and the theme or a dedicated navigation block is doing the extra work.

Stack

Stack is Row rotated ninety degrees: a flex container arranging children vertically, with the same gap and alignment controls but along the vertical axis. Functionally it overlaps with a default Group, since both stack children top to bottom, but Stack makes flex-specific controls available — such as horizontal alignment of items that are narrower than the container — that a constrained Group layout does not expose.

Stack earns its place inside a Row: a Row arranging two columns side by side, where one of those columns needs its own heading, paragraph and button stacked vertically, is exactly the Stack-inside-Row pattern. Nesting a Stack directly inside another Stack with no Row between them is usually redundant, since a plain Group already stacks by default.

Nesting depth

Two or three levels deep is normal and reads fine in code: a Row containing two Stacks, each Stack containing a Heading and a Paragraph, is a completely ordinary structure. Problems start around four or five levels, for two reasons. Editing becomes harder because selecting the block you actually want to change means clicking through several ancestor containers first, using the block list or breadcrumb rather than clicking directly on the canvas — one contributor, among others, to a block editor that stops responding. And every added container is a potential source of unwanted spacing or width constraints, since each one has its own padding, margin and block gap settings that can compound in ways that are hard to trace back to their source.

If a layout needs many nested containers to express something simple, it is worth asking whether a single container with the right settings could do the same job, rather than adding another wrapper to fix what the previous wrapper introduced.

Background and padding on the container, not the child

A common mistake is colouring or padding each child block individually to fake a section background, rather than applying it once to the Group, Row or Stack that wraps them. Padding on the container creates consistent space around the whole cluster; padding on each child creates uneven gaps wherever children differ in height or content. The same applies to background colour — set on the container, it reads as one coherent section; set on each child, seams appear between them.

Selecting a parent block

Clicking directly on nested content usually selects the innermost block, which is correct for editing text but wrong for adjusting the container's padding or background. Use the "Select parent block" arrow in the block toolbar, or open the List View panel and click the ancestor container by name. This is the fastest way to reach the right level in a deeply nested layout without repeatedly clicking just outside the content and hoping to land on the right box.

When to use Columns instead

Choose Columns over Row when each side of the layout needs an independently configurable width — a 70/30 split between a text column and a sidebar, for instance — because Column blocks carry their own width setting in a way Row's flex children do not by default. Row is the better fit when children should size to their own content and the exact split does not need to be pinned to a percentage. What is a block in WordPress covers block-level building blocks generally, and how a theme's own layout choices interact with them is worth knowing before restructuring a page, as in customising a WordPress theme.

Common mistakes

• Using Group for everything. Row or Stack states the layout direction explicitly and exposes controls Group's default layout does not.
• Colouring or padding individual children. Apply background and spacing to the container once.
• Nesting five or six containers deep. Each layer adds spacing and width rules that are hard to trace later.
• Forgetting wrap on Row. A non-wrapping Row causes horizontal overflow on narrow screens.
• Reaching for Columns when Row would do. Columns adds complexity that is only needed when each side truly needs its own independent width.

Verify

Open the List View panel on a page with a layout that looks wrong and read the actual nesting — it is usually deeper or shallower than expected. Select the outer container directly with "Select parent block" and confirm padding and background sit there rather than scattered across children. Check the page on a narrow viewport to confirm Row blocks wrap instead of forcing horizontal scroll.