Categories
Web Design

The new WordPress Gutenberg editor

Here’s a look at the upcoming new WordPress Gutenberg Editor and why you’ll love it and hate it at the same time.

Why you’ll love it and hate it at the same time

Here’s a look at the upcoming new WordPress Gutenberg editor and why you’ll love it and hate it at the same time.

Meh: That’s a word I’d use to describe the WordPress native editor. It’s gotten better over the years, but there’s still limitations to it.

Alternatives to the native WordPress editor

Page builders like Elegant Theme’s Divi or SiteOrigin’s Page Builder are great for making pages nicer, but they can sometimes slow down sites. They help a bunch when it comes to designing landing pages, but don’t help much when it comes to blogging.

The Gutenberg editor

According to WordPress.org, the Gutenberg editor is expected to roll out as part of WordPress 5.0.

There’s a debate online about whether it’s ready to be incorporated into the WordPress core, that is, as part of the WordPress software itself and not a stand-alone plugin, like many other page builder tools. I’m not getting into the argument, but rather want to focus on what you can do with it, and what you can’t do with it.

Why I started using the Gutenberg editor for WordPress

I started using it in mid-April, switching from Elegant Theme’s Divi theme and page builder plugin. Divi is great for building landing pages, but when it comes to having a blog or magazine, I found the Divi theme cumbersome and difficult to customize without making a child theme and editing the theme’s code, something I wanted to avoid.

So I decided to finally try the Gutenberg editor for WordPress.

What’s good about the Gutenberg editor

If you’ve used the Facebook note or LinkedIn article editors, you’ll discover an similar interface where everything is broken up into content blocks. Here’s what’s available:

Common
Blocks
Formatting
Blocks
Layout ElementsWidgets
Paragraph
Image
Heading
Gallery
List
Quote
Audio
Cover Image
Subhead
Video
Code
Classic
Custom
HTML
Preformatted
Pullquote
Table
Verse
Button
Columns (Experimental)
More
Separator
Text Columns
Shortcode
Categories
Latest Posts

Examples of some Gutenberg editor content blocks

Of the many content blocks, these I find to be the most interesting or feature rich.

Quote

The quote block offers two styles and even includes the citation, so you don’t have to edit the HTML like the Classic blockquote. Here’s an example:

Awe, but I was going to Toshi Station to pick up some power converters.

Luke Skywalker

Cover Image

This block allows you to place an image with customized dimming with text overlaid on top. It also supports a basic parallax effect. Here’s an example using an animated GIF:

Zelda II: The Adventures of Link
in Cover Image form

Table

The table options are simple and easy enough to where you could use tables without additional plugins. Here’s a simple example:

QuantityStyle
5Jelly filled donuts

Verse

This block is basically a text block except that it preserves spaces like preformatted text, which is helpful if you’re placing Bible verses or poetry where the spacing is important. Here’s an example:

"Your trusted friends have deceived you
     and prevailed against you;
now that your feet are sunk in the mud,
     they turn away from you.'
- Jeremiah 38:22b

Button

Call-to-action buttons,  with customizable colors! Here’s an example:

Columns

Columns and Text Columns:

I haven’t tested how these work on mobile devices, but this is a nice feature to be able to run columns side by side.

Categories and Latest Posts widgets

You can now show a dynamic list of your categories or posts without any shortcodes. Here’s an example of the Latest Posts widget.

There’s honestly a lot of features to love about the new Gutenberg editor.

What needs more work in the Gutenberg editor

  • The Gallery options are my biggest complaint, in that it’s like going back to WordPress 3 or something. The styling and slideshow options are gone. I hope this gets fixed.  
  • Shortcodes sometimes don’t seem to work as expected, especially 
  • Adding headings is a bit cumbersome since each heading functions as a separate block.
  • Right now, it appears that you can’t have an image inline with a paragraph of text, since those would be separate blocks.
  • The JetPack contact form can’t be edited in the Gutenberg editor. Instead, you have to switch to the Classic Editor to make changes.
  • The Classic block that uses the Classic editor is buggy. I noticed when I placed a Classic block, the toolbar wouldn’t appear until after I typed in some text.

The verdict on the Gutenberg editor

I’m still experimenting with the Gutenberg editor, but so far I like it despite the flaws. My biggest gripe is the limited Gallery options, but I’m betting the development team will be fixing it soon in preparation for WordPress 5.0.

Have you tried Gutenberg yet? Let me know in the comments below. Also, if you’d like to get more articles delivered via email, subscribe to my weekly Tuesday Tips below. It’s free and you can unsubscribe easily at any time.