Using Spacer Blocks is one of the quickest and easiest ways to add an adjustable amount of space between WordPress blocks. The user doesn’t have know any code. The block is intuitive and has very simple controls for changing the height and basic styling.
Use the Spacer Block to Add Space Between Blocks
We’ll start with adding a block after a selected block, using the Toolbar.
OPTION 1 – “Add after” Using Toolbar
- Select a block
- Click on the Toolbar > Options (3 vertical dots)
- Click on “Add after“
- An empty default block appears with the prompt “Type / to choose a block“
- Type “/spacer” in the empty default block and choose the Spacer Block
- Adjust sizing with bottom block handle.
The default height is 100px. You can readily adjust the height by dragging the bottom handle up or down.
OPTION 2 – “Add before” Using List View
Using the List View and “Add before” are options, too.
- Open up the List View: 3 horizontal bars on top left of window
- Select a block
- Click on the Options (3 vertical dots)
- Click on “Add before”
- Adjust the default height of 100px by going to the Block Settings area in the right sidebar. Click on the “px” to change to “%“, “em“, “rem“, “vw“, or “vh” measurements. You can type in a new number into the Block Settings height field. Or drag the slider until you get the number you want. As you drag, you can see the measurement change in the Block Settings height area.
Spacer Block Styles Tab
The Block Styles tab is fairly limited for the Spacer Block. It provides access only to margins. The default is a top margin of 1.5rem.
But, you can change the margin in several ways:
- Drag the slider – increases the margin for top AND bottom
- Set Custom Size
– choose a different measurement
– use the slider to change the size OR type the exact number in the dimensions field
- Margin Options – choose vertical, top, bottom, or custom (top and bottom can differ from one another)
Transform Spacer Block to Group Block for New Options
Once a Spacer Block is converted to a Group Block, many more styling options open up.
- Select the Spacer Block
- In the Toolbar, click on the Spacer icon
- Click on “Group“
The Spacer Block is placed inside a Group Block, which offers a new set of options. With the Group Block selected, you’ll see lots of goodies in the Styles and Block Settings tabs.
STYLES – Add Background Color
The Styles area is now expanded to include Color, Typography, Dimensions, Margin, Block Spacing, Border, and Radius. You can do several cool things with the Background color. Let’s dive in!
- Be sure you have the Group Block selected, not the Spacer Block!
- In the Styles > Color section, click on Background
- A preset list of colors will pop up. You can select from this list or choose your own color.
- In the toolbar, click on Align and choose either Wide width or Full width
- Save or Update post or page
- View on frontend
The Group gathers blocks in a container that can be changed to a flex layout: row or stack. Layout and position can also be modified. We’ll explore all of this further in a future blog post!
Benefits of Spacer Block
- Quickly add some empty space between blocks
- Users do not have to know any code
- Easily adjustable
When to use CSS instead of Spacer Block
Most of the spacing in a website should be separate from the content, and is handled in the theme’s style sheet(s). If you find yourself using Spacer Blocks repeatedly in specific situations, it’s best to modify the style sheet. You can either create a new class to apply to those situations and/or edit the block styling itself.
From a technical viewpoint, the Spacer block is not an ideal method of spacing. It adds an empty
<div>to the document output, just to create whitespace. This breaks every good web design standard out there, especially the separation of content and style.
However, it is arguably the most intuitive spacing tool in WordPress. From a user-experience standpoint, it’s easier to recommend users place Spacer blocks wherever they need them than to teach new users, especially, to configure spacing block by block.— Justin Tadlock, Everything you need to know about spacing in block themes
If you prefer learning by watching, check out my video tutorial that shows you the ins and outs of the Spacer Block.