Embracing Gutenberg Completely

I've moved to Gutenberg completely

In Mid-January I changed my theme to Blocksy and started the re-design of all my pages from my favorite page builder to Gutenberg.

Before I get into the why and how of the transition, let me first say a few words about how much I still love Beaver Builder and Beaver Themer.

You see, there was a time when I really enjoyed the Genesis Framework. It made things easier than if I was doing things on my own. Then came Beaver Builder (following the run of drag and drop theme solutions like Headway Themes, iThemes Builder, and Crowd Favorite's Carrington Build). It was drag and drop but different.

I know there are a ton of folks that love Elementor, and there's absolutely nothing wrong with it. It's another great page builder.

But Beaver Builder gave us the ability to create custom modules and that helped me with clients because it meant creating a custom solution that they didn't realize was a custom solution. They were able to interact with it easily and smoothly.

And Beaver Builder let me pass sites on to my customers without having to train them. They figured it out quickly and easily and were soon singing the praises of Beaver Builder.

So why did I make a switch?

The pain of an excessive DOM size

We all care about speed. Google more than anyone. But we all care about it, and with a page builder like Beaver Builder or Elementor, the normal route is to look at caching. Tools like WP Rocket were the solutions I would recommend to speed things up.

Plus I'd design pages that weren't super long. I would limit how many different components I was putting on a page – all to make sure pages would load quickly.

And then I started seeing this warning on sites using a page builder from tools measuring speed:

• On Google PageSpeed Insights I saw issues like “Avoid an excessive DOM size”
• On GTmetrix, I saw messages like, “Reduce the number of DOM elements”

They weren't complaining about the way I was using cache. They were telling me that the output from these page builders was too complex.

A DOM is the Document Object Model. That's technical terms for the structure of your HTML – something that we haven't adjusted in years. Most of us don't write HTML anymore. WordPress themes and page builders are creating the HTML structure.

And the way page builders allow you to do all the magic they do, is that they have a structure that lets you pick different elements (rows, columns, text, photos, etc) and apply styling to them.

But the result is a lot of extra “container” structure. And Google decided they didn't like it. Which meant the tools all started telling me about it.

The issue?

End users have no control over the DOM.

Page builders like Elementor can release new versions and eliminate a DOM element, but end users simply wait for that to happen, more and more often. And each change in the DOM also means something you've already created might break.

As a result, I decided to try to reduce the DOM size by moving away from a page builder (one I love), and build the site by embracing Gutenberg.

It's been 5 months of using Gutenberg daily

In the five months since I've moved to Gutenberg, I've made five observations. I'm guessing these will sound familiar to folks who have started down this journey as well.

First, there are tons of blocks, but I don't need most of them. Like most folks who were moving from a page builder, I wanted to make sure that I had blocks for everything I could imagine. And there are tons of block libraries out there. You buy one library and end up with 20-40 blocks.

That's how it had worked with page builders before, so it wasn't shocking that things went that way. But it turned out, I didn't really need all of that.

I settled with GenerateBlocks – a simple library with a container, grid, headline and button. After five months, I've rarely needed more. And even when I thought I needed more, I realized later that I didn't.

Second, I really enjoy creating posts and pages with the same tools. I didn't really realize that I was creating posts with one set of tools, and pages with a page builder, until I started creating everything with Gutenberg. It's powerful because as you learn to use something in one, it transfers to the other.

Third, the DOM size is smaller and my page speed is up. I'm all about results. The shift to Gutenberg has eliminated my excessive DOM size issue and my pages are loading quickly and easily.

Fourth, designing pages took some time and work. The shift to Gutenberg wasn't completely done until a week or two ago when I finally pushed up my coaching page. The way I did the transition was to recreate the pages, but adjust the design and copy at the same time. So the home and blog pages came first, and then I quickly created some of the other pages (About, Contact, etc). But the coaching page would have rows, video, an ROI calculator, a form, and more. Thankfully, Gutenberg and those simple blocks were more than able to pull it off.

Fifth, writing with Gutenberg is really clean. I write daily. Embracing Gutenberg meant using it to write a daily post. And while WordPress has had a “no distraction” mode, Gutenberg has created a simple way to stay focused while writing. Five months in, I don't want to go back to writing in any other tool (and yes, I write each of these posts in WordPress directly, not in Google Docs or any other writing tool).

Embracing Gutenberg has been a really great way to enjoy WordPress all over again

For years I stopped blogging daily. I was working full time with WordPress and wasn't ready to circle back to writing about it in my free time. But as my role at Liquid Web has shifted a bit, and seeing so many new products stepping into the space, I felt like I could enjoy putting a spotlight on them (like yesterday's post).

Embracing Gutenberg has put me right back in a learner's position – figuring out things and then writing about them. And it's helped me fall in love, all over again, with blogging and WordPress.

If you haven't yet shifted to Gutenberg – you should really give it a try. This was my third effort at learning it. And this time it really stuck.