Stack Block

Go back to the list of Blocks

Use the Stack block to arrange blocks vertically. 

Click the (+) icon to open the block inserter pop-up window and search for the Stack block. 

You can also use the keyboard shortcut /stack-block to quickly insert a Stack block.

Detailed instructions on adding blocks can be found here.

Block toolbar

To view the block toolbar, click on the block, and the toolbar will be displayed.

Every block comes with unique toolbar icons. These block-specific controls allow you to manipulate the block right in the editor.

The Stack block shows six buttons in the block toolbar:

• Transform to
• Drag
• Move up/down
• Change items justification
• Change alignment
• More options

Transform to

Click on the Transform button to convert the Stack block into Quote, Columns, or Cover blocks. It’s also possible to unwrap the Stack block.  

Drag icon

To drag and drop the block to a new location on the page template, click and hold the rectangle of dots, then drag it to the new location. The blue separator line indicates where the block will be placed. Release the left mouse button when you find the new location to place the block.

Move arrows

The up and down arrow icons can be used to move the block up and down on the page.

Detailed instructions on moving a block within the editor can be found here

Change items justification 

Click the Change items justification button in the Block toolbar to display the justification drop-down. You can justify the block text to the left, make it center-justified or align it to the right.

Change alignment

Use the change alignment tool to change the width of the Stack block. The following is a list of the block width options:

• None
• Wide width
• Full width

More options

The More option on a block toolbar gives you more features to customize the block. 

• Show/Hide more settings opens or closes the block settings panel on the editor’s sidebar. Its functionality is similar to clicking the cog icon next to the Publish button.
• Copy block adds the Stack block to the clipboard. Then, you can paste it anywhere you want in the block editor.
• Duplicate creates a copy of the selected block that appears after the current block.
• Insert Before inserts a new block before the selected block(s).
• Insert After inserts a new block after the selected block(s).
• Move to lets you use a blue line on the editor to indicate the new position for the selected block. Use your keyboard’s up and down arrows to move the blue line. When the line is in the desired position, press Enter to move the selected block to that position.
• Lock lets you prevent users from moving or deleting the selected block. A pop-up window will appear to set the block locking attribute to the selected block. You can opt to disable movement, prevent removal, or both for the selected block.
• Create Reusable block lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.
• Group allows you to create a group of blocks and treat them as a unit. You can, for instance, add a common background color or other blocks to the group.
• Remove Stack deletes the selected block from the content.

Block settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.

Here are the options for the Stack block:

Settings

Click Group or Row button in the Block Settings to transform the Stack block to Group or Row blocks. 

Layout

The Stack block provides Layout settings options to change the justification or orientation of the text and to wrap to multiple lines.

For details, refer to this support article: Layout settings overview

Color

The Stack block provides Color settings options to change the text, background, and link colors.

For details, refer to this support article: Color settings overview

Typography

The Stack block provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size.

For details, refer to this support article: Typography settings overview

Dimensions

The Stack block provides dimension settings options to add padding, margin, and block spacing.

For details, refer to this support article: Dimension settings overview

Border

The Stack block provides border settings options to add border color, width, and radius.

For details refer to this support article: Border settings overview

Advanced

The Advanced tab lets you add HTML anchor and CSS class(es) to your block.

HTML element lets you choose the HTML element you want to be used for the Stack block’s wrapper in the HTML code.

HTML anchor allows you to make a unique web address just for this block, Then, you’ll be able to link directly to this section of your page. This can be helpful for longer pages where visitors might want to click on a link to go directly to a specific section.

The Additional CSS class(es) lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.