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.

9 thoughts on “Gutenberg DIV Blocks – The Quick & Easy Way”

  1. Tug, I would like to purchase your div plugin. I’m not sure if I’ll need it, but I don’t suppose you can also specify the div id? I’m trying to pull the “content-area” and “widget-area” out of the template and into my page.

    Reply
  2. Hi there, I’m keen to purchase this plugin. Let me know how much it might be. And will it continue to work with continuing WordPress updates?

    Reply
    • heya corry, thanks for taking an interest in my gutenberg div plugin!

      i’m not planning to provide any support for this plugin, so if you decide you want to buy it, it would be without any support / future updates. if you’re still interested, let me know (:

      thanks again!

      Reply
  3. Hi:
    Can you email me about your div plugin?

    I’m just starting to try to learn the Block Editor – I design custom themes and use divs and sections in the classic editor which I’ve styled in the stylesheet – can’t seem to do that natively in Gutenberg.

    So for example – I typically have pages structured something like this:

    Headline
    Container 1 fills 90% of the screen on desktops, with a max-width of 1200px.
    The flexhalf is for 2 equal columns that move to one column below 800px.
    Content

    Content
    Image
    Maybe a form or video or audio embed, etc.


    Container 2 spans the full width and may have a background color.
    There may be a centered image or a nested div that limits the width of the content to 750px or so.

    Etc. I have a set of containers for different purposes and flexcolumns that can be used in the containers.

    Would I be able to use your plugin to create page layouts like that? And within the divs/containers can I the Gutenberg blocks?

    If so, what is the cost of the plugin and how can I get it?

    Thanks!

    Reply
  4. Hi Tug,

    I’m surprised this doesn’t already exist. The layout I want to achieve is easy to create using HTML but impossible with the current set of Gutenberg blocks.

    I used a shortcode plugin for the classic editor to create div shortcodes to do exactly what your plugin is doing. I simply set the width and float the div left or right using CSS classes and the text flows around it. The layout is not suitable for columns.

    I suppose I could create a Gutenberg block instead, but then I’d have to learn how to create them and I want to spend time on getting the website done instead!

    I would appreciate a way in which to do this within Gutenberg too.

    Reply
    • hey fred — yeah, i tried a bunch of different ways to get the div in there, while making sure gutenberg didn’t complain about the block after re-opening the article.

      i couldn’t find a solution, so i had it developed (:

      works beautifully, and i use it pretty often!

      Reply

Leave a Comment


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