Spacer Block

The Spacer block adds empty space between blocks. It’s used to create intentional vertical or horizontal spacing within a layout. While simple, the Spacer block plays an important role in maintaining clean, consistent spacing across a page.

Start here: watch the walkthrough (5 minutes)

Why use the Spacer block

Use the Spacer block when you want to:

  • Add vertical space between sections or blocks
  • Create breathing room in dense layouts
  • Maintain consistent spacing that follows your design system
  • Adjust layout without adding decorative elements

The Spacer block controls layout spacing only — it does not add visible content or structure.

How to use the block

Start by adding the Spacer block to the page. Learn how to add blocks.

Once the block is added, editors typically:

  • Select a predefined Style for consistent spacing
  • Place the Spacer between blocks or sections where additional space is needed
  • Adjust the height manually only when necessary

In most cases, using the predefined Style options is recommended over setting a custom height. This will ensure the spacing is used according to the design system and adjusted responsively for mobile.

Block settings

Block settings appear in the right sidebar while the Spacer block is selected.

Height (Default style only)

When the Default style is selected in the Styles tab, you can set a specific height value for the Spacer. For most layouts, it’s better to use the predefined Style options instead of setting a manual height.

This allows precise control over vertical spacing. However, the custom height only applies when the Default style is active and custom heights are not responsive.

Block styles

In the block settings sidebar under the Styles tab, you can select predefined spacing options.

Predefined spacing styles

Spacer Styles follow the site’s design system and may include: XX Small, X Small, Small, Medium, Large, X Large, and XX Large.

These Styles are responsive and automatically adapt spacing across screen sizes.

Using these options helps maintain visual consistency and ensures spacing behaves well on both mobile and desktop devices.

Default

The Default style enables manual height control in the block settings. Use this only when a predefined Style does not meet your layout needs.

Using spacer inside flex layouts

While the Spacer block is primarily used for vertical spacing, it can also create horizontal space when placed inside a flex layout, such as a Row block or Navigation block.

When used inside a flex layout:

  • The custom Height setting is removed
  • A Width option becomes available in the Styles tab

To create horizontal spacing:

  1. Select the Spacer block inside the flex layout
  2. In the Styles tab, locate Width
  3. Choose the Fixed option
  4. Enter a pixel value or drag the block width in the visual editor.

This creates controlled horizontal space between blocks displayed in a row.

Use this approach intentionally. In many cases, adjusting layout or gap settings on the parent block may be more appropriate.

Tips for editors

Use predefined styles whenever possible

The predefined spacing Styles are responsive and aligned with the design system. They provide more consistent results than manually setting a custom height.

Avoid stacking multiple spacers

If spacing feels excessive, adjust the size of a single Spacer instead of adding multiple Spacer blocks.

Preview across screen sizes

Spacing can feel very different on mobile. Use responsive previews to confirm the layout feels balanced.

  1. WordPress.org Spacer Block documentation — please note that your block may have customizations affecting functionality, appearance, or settings.