Spacer Block

The Spacer Block lets you add white space between blocks and customize its height …

WordPress Gutenberg Blocks – Spacer

WordPress Gutenberg - Spacer Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Spacer Block Description

The Spacer Block lets you add white space between blocks and customize its height.

***

Add spaces to WordPress using the Spacer Block

(Add spaces to WordPress using the Spacer Block)

How To Use The Spacer Block

To add a Spacer Block:

  • Select a place in your content to add a spacer block (i.e. before or after), then either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Spacer’ block (in Most Used or Layout Elements section), or
    • Add the ‘Spacer’ block in the Content Area.
  • Use the tools in the Spacer Block Editor or Block Settings section to adjust your space.

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Spacer’ block …

'Add Block' Tool - Add Spacer Block

(‘Add Block’ Tool – Add Spacer Block)

Or, select a Spacer Block in the Content Area

Add a Spacer Block from the Content Area

(Add a Spacer Block from the Content Area)

After adding a Spacer Block, you can:

  • Edit the block to adjust the space.
  • Save, publish, or update your post or page.

How To Edit A Spacer Block

To edit a Spacer Block:

  • Click inside the Spacer Block to select it.
  • Use the Block Editor tools to adjust the spacing using the resizing handle.
  • Use the Block Settings to adjust the spacing by entering a height in pixels in the ‘Spacer Settings’ section.

Edit a Spacer Block

(Edit a Spacer Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Spacer Block

To delete or remove a spacer block:

  • Click inside the Spacer Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Spacer Block

(Remove a Spacer Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • You can also convert Spacer Blocks into Reusable Blocks.

Spacer Block Tools, Options & Settings

The Spacer Block includes tools, options, and settings for:

  • Spacer Block Editor
  • Spacer Block Settings

Spacer Block Editor

Spacer Block Editor

(Spacer Block Editor)

The Spacer Block Editor displays:

  • Block Type (See ‘Spacer Block – Additional Info’ section below.)
  • More Options

Spacer Block Settings

Spacer Block Settings

(Spacer Block Settings)

Spacer Block settings include:

  • Block description area
  • Spacer Settings
    • Adjust spacing height in pixels.
  • Advanced Settings
    • Additional CSS Class

Spacer Block – Additional Info

  • The Spacer Block cannot be converted into other block types.
  • Installing plugins or themes on your site may add new functionality, options, or settings to Spacer Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Spacer Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

Originally published as Spacer Block.