Hi Reader,

WordPress has many useful blocks, some not-so-useful ones, and a few that really shouldn't be there anymore.

Like the Spacer block.

Although the Spacer Block might seem like a simple solution for adding space to pages, it has several drawbacks that can negatively impact your website's performance, design, and accessibility.

Understanding the Spacer Block

The Spacer block shipped with WordPress 5.0, released on December 6, 2018.

Back then, it was the only block-based option for adding horizontal or vertical space. Styling options like the Dimension settings or block spacing were only added in later versions.

The Spacer block is straightforward to use: insert it, set a fixed height in pixels, and you'll have horizontal space.

A variation is to add vertical space, which is available in the Navigation block. Here, you can use handles to determine the width.

The Spacer block outputs a DIV element on the frontend with the height added as an inline style.

Drawbacks of Using the Spacer Block

The first issue is that the Spacer block creates fixed gaps that do not work across different screen sizes. A 100-pixel space that looks great on a large desktop screen looks weird on a mobile device.

The Spacer block supports other units like vh or vh, allowing some form of responsive behavior.

But even then, it lacks the capabilities you need to create truly fluid layouts.

This brings us to the second issue, which is that each Spacer block is a standalone element. There is no way to centrally control the height of all Spacer blocks.

This creates issues if the design, for any reason, needs to be adapted. Rather than being able to make a global design change, you instead have to make manual adjustments for each instance.

The third issue is that the Spacer block increases the size of the HTML, leading to slower page load times. It can also edge your site closer to the dreaded "excessive DOM size" error message in Google's PageSpeed Insights tool.

Performance is crucial for SEO and user satisfaction, so you need to avoid adding unnecessary bloat to your pages.

Finally, it's just a hassle to use. Content editors shouldn't have to insert and configure blocks just to get their text to look right.

It also creates a lot of noise in the editor outline. I remember working on a site with 10 to 20 Spacer blocks per 1000-word blog post.

Better Alternatives to the Spacer Block

For vertical spacing, having a good vertical rhythm makes Spacer blocks obsolete.

You can achieve this by leveraging the block spacing (also called block gap) feature. This will ensure that the spacing between all blocks is consistent.

The block spacing value can be anything that's a valid CSS value. So, you can make this value fluid and work well with fluid typography.

These styles are implemented using the Global Styles (or theme.json) feature.

If exceptions are needed, introduce consistency through Section Styles.

For example, you might want more space before and after a callout section in a blog post. By creating a Section Style tied to a Group block, you can set these margins and control them through Global Styles.

And finally, if an exception is needed, margin and padding can be controlled on a per-block basis.

For horizontal space, it's much better to rely on Flexbox, which is supported natively by the Navigation block.

And depending on the scenario, the Grid layout.

Migrating away from Spacer blocks

So what if you have content that uses Spacer blocks? You can run a search replace on the content, and remove the block markup.

The Spacer block markup is very consistent, so it's easy to target with a regular expression.

You can use a plugin like Find my Block to get an idea of the Spacer block usage.

Once all the Spacers are removed, the spacing is implemented through Global Styles, Section Styles, or the per-block instance styles.

Now whether you are creating a new site, or you are refactoring an existing site, make sure to remove the Spacer block from the block inserter.

That's the surest way to prevent users from adding the block.

Cheers,
Fränk

P.S. My Block Theme Academy course details how to implement spacing settings and styles, both for Global and Section Styles.