Blocks, Design Blocks

Blocks » Row and Stack Blocks

The Row block and the Stack block are a design block type that allows you to insert multiple blocks in a row (or column with the Stack block) and space them out evenly. You can use the Row or Stack block to create separators or add various elements on the same line as if included in columns.

Table of Contents

Add the Row or Stack Block

Click on the + Block Inserter icon to add the Row block and search for Row for the Row block, or Stack for the Stack block. Click it to add the block to the post or page.

Clicking on the Block Inserter and searching for Row, then clicking on the Row block to insert the Row block into the editor.

💡

Using your keyboard, you can also type /row on a new line and press enter to add a new Row block, or /stack to add a new Stack block.

For more, visit our detailed instructions on adding blocks.

↑ Table of Contents ↑

Block Toolbar

When you click on the block, a toolbar of options will appear:

The Row block toolbar that appears above the Row block with icons for block type, move block, and more described below.
The Row block Toolbar
The Stack block toolbar that appears above the Stack block with icons for block type, move block, and more described below.
The Stack block Toolbar

The Row block has the following options in its toolbar:

  • Change block type or style.
  • Drag the block.
  • Move the block up or down.
  • Change items justification: left, center, right, and space between items.
  • Change alignment: none, wide width, full width.
  • More Options.

The Stack block has the following options in its toolbar:

  • Change block type or style.
  • Drag the block.
  • Move the block up or down.
  • Change items justification: left, center, right.
  • Change alignment: none, wide width, full width.
  • More Options.

📌

If you do not see the option to change the width of the block to wide or full-width and your theme supports these options, it is possible the block has been added to a Group block. You can learn more about the Group block here.

↑ Table of Contents ↑

Block Settings

When you click on the block, you will find additional block settings in the right sidebar. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Block settings
Arrangement

The Row block can be converted into a Group block or a Stack block. The Stack block can be converted into a Group block or a Row block.

The Block Settings sidebar showing the option to switch from row to stacked to group.
Layout

In the Layout section, you can set the justification of the rows or stacked blocks. Choose from left, center, right, or justified to set the row alignment. The Orientation option allows you to switch from rows to stacked.

The Stack block does not include the option to set the content to justified. This option appears in the Row block as a way to align the rows evenly.

Additionally, you can toggle on or off the possibility of wrapping your content to multiple lines.

The Layout section of the Block Settings sidebar, with the options to set justification, orientation and wrap options.

The Color section allows you to modify the color of the text, background, and links in your Row block, or your Stack block.

Click the three dots in the Color section to add the option to modify the links.

The Color settings in the Block Settings sidebar for Text and Background colors.

For the text and the links: by clicking on the checkered area, you can pick any custom color, or you can select one of the pre-selected colors in the Theme or Default sections underneath.

The Color option in the Block Settings sidebar with text highlighted and the color picker to the right.

For the background, in addition to the color settings similar to the ones for the text (above), you can opt between a solid color or a gradient (a mix of two or more colors, displayed using a certain pattern (from lighter to darker, or one color blending into the other).

The gradient settings for setting a background color in the Block Settings sidebar.
Dimensions

Dimensions allow you to set the padding – the space around the elements in your Row block. This option is particularly relevant when you use a background color.

Padding can have one value for all four sides – by adding a value in the field under Padding

Dimensions settings Row Block WordPress.com

Alternatively, padding can have separate values for each of the sides. Click the link icon to display the options for adding padding to each side individually. The figures shown here run clockwise, from top, right, bottom, left. You can access this view by clicking on the blue link icon shown in the previous image.

The Stack block does not include the option to set the dimensions since the blocks within are stacked and the dimensions can be set through the individual block or by using the Spacer block.

Dimensions options Row block WordPress.com

↑ Table of Contents ↑

Add Multiple Blocks to a Row or Stack

First, select the block or blocks you wish to add to a Row block. You can select multiple blocks by clicking and dragging or by holding down the “shift” key and clicking on each of them (they need to be next to each other).

The block toolbar will appear. Select the Row or Stack icon from the toolbar. The image below points to the Row block icon, the icon directly to the right is the Stack block icon.

The options once selecting multiple blocks to set them as a Row block.

↑ Table of Contents ↑

Ungrouping Existing Blocks

You may need to ungroup existing blocks in order to modify the alignment of the individual blocks.

  1. Click List View at the top of the Editor and select the Row block or the Stack block.
  2. Click on the More Options icon in the block toolbar.
  3. Select the Ungroup option.
The option to ungroup a row block.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS to style the block. Learn more about adding additional CSS classes to blocks.

Recipe block - Advanced Settings
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help