If you’re looking for Gutenberg DIV blocks that you can quickly & easily add to any WordPress article, you’ve come to the right place.
Adding Gutenberg DIV Blocks The Hard Way
Although I’ve come to really enjoy using the Gutenberg block editor, one thing has bugged me. There hasn’t been an easy way to wrap portions of an article, or an entire article with a DIV tag
Gutenberg does allow you to select multiple separate blocks, and Group them together. You can also drop in a Group block, add multiple blocks inside the Group block, and then apply a specific style to the entire Group block via the Advanced > Additional CSS class(es)
Here’s how it works.
Select Multiple Gutenberg Blocks: Group
First, select multiple Gutenberg blocks, then from the block menu, select Group.
After Grouping Blocks: Add Classes
Then, after grouping the blocks, you select the block and apply a specific style to the entire Group block via the Advanced > Additional CSS class(es).
But honestly, that bugs me for a couple of reasons.
First, when I’m writing, I don’t want to have to create a Gutenberg Group block, and then build part or the entire article within the Group block.
Also, I don’t want to have to go back and group certain sections of my article together, just to be able to apply a style to that section.
Basically Gutenberg is forcing me, as a writer, to work around it’s framework, rather than just letting me write.
Using HTML Blocks For DIVS
One other alternative is to use Gutenberg Custom HTML blocks to wrap sections of your article with DIV tags, like this.
But, once you save, close and reopen the article, Gutenberg will show the following error:
“This block contains unexpected or invalid content.”
That’s definitely not a clean way of trying to add DIVs to a section of an article.
Adding Gutenberg DIV Blocks The Easy Way
Instead of having to use the Group block feature, I wanted a simple way to wrap sections of my article with formatting.
So, I worked with a developer to create a WordPress plugin that added two new Gutenberg DIV blocks.
- Open DIV Block – Use at the beginning of the section
- Close DIV Block – Use at the end of the section
By structuring it this way, I can move the Open or Close DIV block more simply, and I don’t have to fuss with grouping or ungrouping Gutenberg blocks.
DIV Blocks Example
I’m using the DIV blocks in this article below, to wrap a section of text with a thin border outline (tugq) and to suppress ads from the section (noads) .
First, I select the Open DIV Gutenberg block, and place it at the beginning of the section.
Then, I apply the formatting using the Additional CSS class(es) field of the Open DIV block.
I write my article as normal, then when I want to end the section of formatting, I drop in the Close DIV block.
The resulting section looks like this.
This is a heading
The resulting source code looks like this:
Gutenberg DIV Blocks Plugin
If you’re a WordPress plugin developer, this should be rather easy for you to create yourself.
If you’d like to purchase my plugin, drop a comment below and I’ll get in touch with you via email.