Gutenberg: A Review and Tutorial of the new WordPress editor

Jon @ WP Templates Business, Technical, Tutorial

If you didn’t know, Gutenberg is the name of the new WordPress 5.0 page and post editor. 

Have X Theme?? Get the free plugin that adds in the “Edit with Cornerstone” button to Pages! 

I first heard about it from one of the developers in Bali in December 2017, but have only really started testing it in a practical way recently.

With it becoming the new standard post and page editor in the 5.0 release, I figured to start sooner rather than later.

Links as promised from the video:

When will 5.0 be released?

Gutenberg editor is currently an optional plugin that you can choose to install or not, but why wait. Its happening. When WordPress release 5.0 which will be, according to the WordPress roadmap, exactly 2018.

The Gutenberg project is hoping to make WordPress 5.0 an all-in-one system where you can create pages and blogs without the need for external page builders like Cornerstone.

If they want that to happen they have a hell of a long way to go.

Blogging with Gutenberg

I’ve written a few posts now with the editor. Here is what I think so far.

You can do some cool things with it and it will definitely help making blog posts more interesting as currently the standard style is text, headings, images and video.

Gutenberg editor screenshot

So you can see what I’m currently looking at, here is what your Gutenberg editor will look like when blogging.

  1. This is where you can add a block. Gutenberg has decided that each paragraph, image, video quote etc will be a “block”. The reason for this is to add potential for adding more creative blocks going on. It also means that you can move blocks up and down using arrows on the left of the block (point 2).
  2. This is the block options. I’ve got a simple paragraph block selected so nothing too major. Text align options, Bold, Italic and link options. Note that there is no option to add in an image. More on this later…
  3. These are the same options + advanced options. You’ll see that you have the Document tab as well. This is where you change the Publish date, Categories, Tags, Feature image etc.

I am starting to like the extra options available now, because as you look through them, you will get inspired to use them. Like adding a background color!

SEO Impact

More engaging blog posts will help keep your visitors on your pages for longer. This in turn will boost your Google rank.

Get creative with some of the blocks to break up the text, like maybe a stats slider?

Good Idea rating
99%

…or add in some columns?

It was the best of times…

It was the worst of times…

There are loads of options to choose from so get creative!

If you have a web-store, you can pull through products with the Gutenberg WooCommerce add on.

Beware though, adding all the things will potentially pack your post with post with a lot of extra code, and that will make the speed slower, which we all know Google hates.

Use these functions sparingly.

Reusable Blocks

This is probably one of the best features so far. You can create blocks and save them as a reusable block.

For example, you can create a nice looking quote or testimonials block (much better than my example in the video!) and insert them into blog posts. 

Great for speed and brand consistency!

Gutenberg with Cornerstone and other page builders

I have tested Gutenberg with X Theme’s Cornerstone and so long as you don’t mix the two (other than using some of shortcodes) it looks like it’ll be fine. 

Further page builder testing from Frank at defakto.nl has had less success though. He tested Visual Composer and some others.

His research also found that removing the Gutenberg plugin WILL NOT remove the extra code that is added to your blog post when you did use it. This is not good for SEO.

Also, some further testing on custom post types, say portfolios, would not let you edit with Gutenberg. Currently it is Pages and Posts that are Gutenberg ready. 

Things that annoyed me

With all the good stuff there is always some bad stuff. Gutenberg is no exception. Gutenberg’s plugin rating is currently 2.5 stars out of around 900 reviews.

That’s not great.

UI and page layout

There are some design issues that really bugged me, such as:

  • Finding the site permalink. Normally this is always just under the title. Now you need to click the title and the permalink will fade in above it.
  • X Theme specific – There is no “Edit it with Cornerstone” button when in the page. This means going back to the pages menu and editing from there.
  • It’s all a lot slower. With all the effects they have put in and the extra UI, plus the constant Autosaving, the writing process is much much slower, especially when you get to blogs as long as this one.
  • You can’t select to only have Gutenberg on blog posts. WordPress want Gutenberg everywhere, which may cause some issues with page builders. Cornerstone on X Theme is fine though. Here is a link to some FAQs about the two working together.

General bugs

They are small but very noticeable.

  • When you import old blog posts into the new editor, you will have to go into the code a lot to edit things. I did this recently and had to manually update image tags. This is because Gutenberg makes things blocks. When you import, everything goes into one big block. So if you delete an image from it, then want to add an alternate in, the new image will appear at the bottom as a new block.
  • Hitting enter will create a new paragraph block. Once you start typing that block is locked in. If you wanted a heading, you’ll need to delete all the text, change the block type, then re-type the heading. Paragraph blocks should be easily switched to headings and vice-versa.
  • Sometimes the link hover over box stays there.
  • It does a weird thing when you highlight text to bold. You need to deselect the text before being able to unselect the bold option. 
Top Gun Thumbs Up

Conclusion

Overall, we WordPress users don’t have a choice, so, let’s embrace Gutenberg for what its trying to do.

Make blogs more interesting.

I think that they have a long way to go, especially when all the part -time bloggers update their site. They are going to get a massive shock.

They need t get that start rating to 5 super quick as i think that there are going to be a lot of un-happy campers when this is forced.

Humans don’t like change at the best of times and the slowness and changes to simple settings, like the permalink, will have a few people frustrated.