Gutenberg DIV Blocks – The Quick & Easy Way

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.

Select multiple Gutenberg blocks and group them.
Selecting multiple Gutenberg block to Group them

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.

Custom HTML blocks for DIVS

But, once you save, close and reopen the article, Gutenberg will show the following error:

“This block contains unexpected or invalid content.”

Gutenberg error: 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.

Gutenberg DIV Blocks plugin adds Open/Close Div blocks

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.

how to use Gutenberg DIV blocks

The resulting section looks like this.

This is a heading

paragraph

paragraph

paragraph

paragraph

paragraph

paragraph

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.

Leave a Comment


Notify me of follow-up comments via e-mail. You can also subscribe without commenting.