The three page-divider blocks that I use in WordPress
I’m considering a bunch of different blocks across eight collections (default ones, JetPack, Advanced Gutenberg, Atomic Blocks, Kadence, Qodeblock, Stackable, and Ultimate Addons) and next on my list are the spacer / divider / separator blocks. These are blocks that allow you a visible or invisible gap between two blocks. It could be a horizontal line, or just extra white space, but something that separates two other blocks visually.
The default collection has nothing but I found six different ones in four other collections.
First up is Kadence, with a combination spacer/divider. It starts with the assumption I want a solid horizontal line as my divider and the block allows me to specify the height of the spacer (different heights for desktop, tablet and phone), whether there is a line or not, whether any line is solid / dashed / dotted / striped, its colour, and its width. Pretty functional, with the only limitation really being that the only choice is a line.
Atomic Blocks and Qodeblock have a spacer block, does the same thing as Kadence but with no stripe option or width. Pass on both.
Stackable’s approach is a bit different as they have three separate blocks — one divider, one spacer, one separator. For the spacer, you can actually change the background colour of the block which none of the others can do. You can even make it a gradient. If you made it small enough, it would be the same as a flat horizontal line with no height restriction. You can even insert images or videos…really? You can even style it with separators above and below. Separators, for a separator? But oddly enough, no width option.
The divider gives you an option of a basic line, fatter bar, three asterisks or three dots. Styling lets you change colour, height and width. And Advanced lets you hide it on tablet, desktop or phone. Basically all the features in one go. The others are definitely out.
And yet they have another block called separator. Ohhh, for REALLY big separators. Like waves to help style a page or large block perhaps. The style lets you flip it horizontally or vertically (so you can do one above and below another block), width (although it is more the width of sine waves), colour, adding a shadow, and if you have Premium enabled, you can create LAYERS in the separator. Holy doodlebugs. That’s a lot of power for a “separator”.
So, it probably goes without saying, but the three Stackable blocks work together — one for general spacing, one for an actual divider, and one to do large styling of blocks and white space to give funky spaces in between. FYI, lots of Stackable blocks already have this included in the block, this just gives you the option to add these to the top or bottom of ANY block.
Three in, three out. Block baseball at its finest.
Update: To see my current collection of blocks, check out the blocks I use.