The spacer block provides an easy way to insert blank areas with a customizable height between elements and toggle the visibility of it within the breakpoints of the grid system.
Adding block
To add a spacer, click on the ⊕
Block Inserter icon and select the “Spacer” block.

Alternatively, you can start typing /spacer
in a new paragraph block, then press enter.
Editing block
Once you add the spacer block, you may type start dragging the double arrow icon to up or down to make the height bigger or smaller, respectively.
Block interface
Although most blocks come with unique and block-specific controls, the spacer block is pretty straightforward and has a few visibility controls along with the “More Options” control available to config.

Sidebar settings
Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

Spacer settings
On this tab, you can adjust the height (in pixels) of the space you want by typing the number or dragging the slider range right or left to make the height bigger or smaller, respectively.

Visibility settings
The responsive visibility settings enable you to hide the spacer block from the view at any given or chosen viewport(s).

Color settings
On this tab, you can view color suggestions, refine with the custom color picker, and apply solid background color changes to your spacer block.

Advanced
The advanced tab lets you to define an HTML anchor name or add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.
The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as an ID to the spacer component tag.

Last updated: 3 years ago