How Gutenberg Will Change WordPress

Tags

Aspen Grove Studios, Divi, Elegant Themes, Gutenberg, website development, wordpress

From your comments, it’s obvious that you most of you hate Gutenberg. Some, however, were on the fence. And a few have actually used it and seemed to enjoy it.

There are some advantages to Gutenberg. We will have more control over the layout in native WordPress. We currently have a lot of control with builder themes and plugins, but with Gutenberg, we have a high level of control without needing a third-party product. We will need fewer plugins. Some of the features that we normally use plugins for are built into Gutenberg.

Whatever your feelings about it, we seem to be stuck with it. So, I thought I’d give you a quick description of how it works, with the help of Aspen Grove Studios. Just bookmark this post and come back to it if you wish to give Gutenberg a spin (or WordPress forces it upon us).

Blocks, not the Writer Kind

As before, we still get a blank canvas in the center of the screen. However, this is the setting ground for our blocks. If you want to use a block, drag and drop it into your canvas, then fill it in with your content.

Think of the various blocks as kinds of content. So, you get one block for text. Another for images. Yet another for nifty things like a gallery or (yes, finally!) a table with many columns.

The new thing here is that you can break up your text into its components. So, you get a different block for headings and for content (paragraph). A different one for quotes and for preformatted text (of the kind you might use to display–but not run–code). And a different one for lists.

And if you don’t want to bother with all this malarkey, there is a cool shortcut: a Classic block, which lets you use the previous layout (aka TinyMCE) to add your content, mixing it all up. Just throw headings, text, and images together like a crazy person and you’ll forget you’re using Gutenberg. Just like the good old times!

Gutenberg with Divi

Personally, I use Elegant Theme’s Divi theme for everything (note: this is an affiliate link. For a non-affiliated one, click here).

This is the friendliest, most flexible theme I have found. It has perfect compatibility with my plugins and has saved me thousands of development hours. I can’t recommend it highly enough and it has a unique way of integrating with Gutenberg: when you use it, you can specify you wish to use the Classic Editor or not.

This screen has the Divi Page Settings where you can choose the page layout (choose from left sidebar, right sidebar, or no sidebar), hide nav before scroll, use the background color (with a color picker to customize the color), and text color (light or dark). It also includes the scheduling, visibility, and post format tools.

If you choose to create a Page it will have the template, parent, and order options, and the Divi Page Settings for the layout and to hide nav before scroll.

Once you select to build with the Divi Builder you’ll see the normal Visual Builder.

Make your selection and build as normal. The Divi Visual Builder works exactly the same as it does now.

You can still exit the Visual Builder and Edit the post. This takes you to the backend to see the Gutenberg editor where you can make any backend adjustments you want such as Status and Visibility or Divi Page Settings. To edit the page itself you’ll have to launch the Divi Builder again.

If you switch from one builder to the other, you risk losing anything you’ve done in the other builder for this page. It is possible to edit content with Divi. Just make sure you have a backup of the content before trying it.

In this example, I’ve opened classic content, added header, and quote blocks, and then edited the page with the Divi Builder. Gutenberg doesn’t really

The only thing I don’t like about all this is that I have to use Divi’s Visual Builder when I’m still better used to the backend one. But that’s just another learning curve I have to take…

Conclusion

Unless you enjoy mucking about your posts, the only takeaway you need from this post is this: if you wish to experiment with Gutenberg, just add a Classic block to your canvas and pretend Gutenberg has never been released!