The Spacer Block: The little div that caused a big stir

A simple little block has caused quite a bit of controversy in the development community since it was introduced with the WordPress block editor almost 6 years ago. It’s the spacer block, and its existence brings up some big feelings and strong opinions.

Its function is exactly what it sounds like: it adds some space between elements on the page. Before we had the gap, padding, and margin spacing controls on as many blocks as we have now, the spacer block would allow us to easily create that space.

According to some, the block editor should have waited until we could control spacing on everything and the spacer block should never have been released. It has no place in modern development. A less extreme view is that the spacer block was fine to have for a time, but now that we have more controls, it should be considered a legacy block that should be phased out and only supported for the purpose of backwards compatibility.

I was one of those people criticizing the spacer block. Empty divs? Really? I was not a fan.

But as I came to use the block editor — to understand the different levels of skill of people who use the builder, and the situations that sometimes come up where the spacer block might be the best way to go — I have come around to the spacer block’s existence, and I think it has its place.

So let’s examine this simple but controversial block.

Background of a Spacer

Empty elements have had a number of forms over the years. When we used tables for layouts, we would create empty table cells to create space. When we moved to floating divs, we would need empty divs to make sure content didn’t float up where it didn’t belong (remember clearfix??).

As CSS evolved, we’re now able to create robust, flexible layouts without as much unnecessary markup without the need for so many bug fixes and workarounds. We can do things a lot more efficiently.

The tools we use to build websites have also evolved. We overlooked some inefficient code that happened as a result of being able to build websites easily and visually. It was an exciting evolution of what WordPress was capable of.

Once the novelty wore off and we were provided with more options, the endless nested divs seemed to be an indicator of how good a builder was. How clean was the code output of a builder? How many containers did you have to sift through to find where that one style definition was? Spacers seemed to be lumped in with this mindset: a shortcut that was a sign of an inexperienced developer, bloated the code, and indicated a sub-par website and editing experience.

Passionate Feelings & Criticisms

As someone who used to look down on the spacer block, I can empathize with those who still feel that way. Spacer blocks go against our instincts to write clean code. Having an HTML element that is purely for layout or styling isn’t proper! It’s not how HTML should be written! It adds bloat!

Some critics claim the inclusion of spacer blocks is “dumbing things down” instead of only providing the “proper” methods to create space. It’s “100% inferior” to what they consider the superior way of creating websites.

It’s true that the best method is to use gap, margin, and padding to create space around elements. Even better if it follows some kind of regular amount across the entire design of the site. And ideally, that spacing would be set as a default that would only need to be adjusted in places that needed to override that.

So if that’s the best way to create space, why keep the spacer as an option? Why not guide people to add space the “right” way?

There may be a benefit in specific instances that makes this element still useful. We don’t create pages with content-driven HTML only. We use wrappers and pseudo elements to help us control layouts, set gutters and max widths, keep things centered, and add extra things to a page. The spacer is no different, and the “bloat” that gets added is negligible.

It’s not that the spacer block is “better” in some cases, just that it has a use case that makes it an acceptable alternative. On some level, the idea of having a spacer block may be intended to give people a way to add space easily. It lowers the barrier of entry for creating websites with WordPress.

It’s not that those who think the spacer block should exist means we then must believe that “beginners are too stupid to understand margin and gap.” No one should be made to feel inadequate for using the spacer block or any other tool that gets the job done.

I think it’s more that people shouldn’t have to understand the philosophies and methods behind the different spacing types in order to create space between things. Especially when margin, padding, and gap can easily become much harder to maintain than inserting some spacers.

Use Cases for a Spacer Block

If you understand gap, margin, padding, and min-height, there isn’t really a reason to reach for a spacer block in almost all cases. Whenever possible, don’t use it. Use a maintainable system. That’s what a theme is for.

But a theme can also set a default for the spacer block, for when the spacer block does get used. And currently in development: allowing for fluid preset options to choose from without having to set variations or block styles (more on that in a minute).

But there may be times when it could make sense for this little block to exist. Here’s where I found it could be helpful to use a spacer block:

• You’re not sure how to adjust the spacing correctly or don’t understand which method to use.
• There are two synced patterns next to each other. The space isn’t part of either of the components, so the space becomes its own entity.
• Two blocks next to each other that don’t let you adjust individual spacing.

The spacer block exists within the list of elements. It could be easier to conceptualize for people, and it’s easier to see the different places where space has been added at a glance (rather than drilling down into 4 different wrapper elements to try and discover where the margin was added). If something is helpful in any way for someone and doesn’t create accessibility or performance problems, its existence doesn’t need to be thought of as a plague on modern websites but a wonderfully simple and usually harmless way to add space to a page.

If you find yourself adding more than one or two occasional spacer blocks, that’s a good indicator that it may be time to adjust the theme, add a pattern, or create a design system for the site.

The Anatomy of a Spacer Block

When adding the spacer block, there’s an interface to adjust the height by either clicking and dragging, adjusting via the options area, or even adding a custom class or block style. The code that gets generated is a single line of an empty div explicitly hidden from screen readers.

The core spacer block is not responsive. There are a few ways to address this:

• Quick and Easy: There is a Flexible Spacer Block plugin that lets you choose a desktop, tablet, and mobile height. This block creates a spacer container that holds three empty divs.
• More Flexibility: Use the Block Visibility plugin to set your sizes and create a pattern. This is essentially creating your own version of the Flexible Spacer plugin in the item above that you can define and control.
• Better But Advanced: You can create your own variations or block styles that let you set specific heights at any screen size you want.

And as mentioned earlier, there’s also work being done on on the ability to define different flexible presets for a theme. (This was a sticking point for some in the “never spacer” camp. Rather than think of it as “doubling down” on an “embarrassing” block, it’s more productive to think of it as providing the missing feature of the block. You can set specific values for the breakpoints with the Flexible Spacer plugin, but the core spacer block will be much more usable and solve a pretty big pain point for a lot of users.)

The Bottom Line

Maybe this isn’t compelling enough for some people, and they’ll still hold to their firmly held beliefs that spacer elements should be eradicated. And they’re free to not use them or advocate for them. That’s the beauty of having more than one way to do something.