What’s it like to use the WordPress Gutenberg editor for the first time? Follow along as I rewrite a blog post to see how it holds up against my favourite drag-and-drop editor.

Changes are often difficult, but they will always come.

Like them or loathe them, the changes that come with the new WordPress Gutenberg editor will change the way you use WordPress forever!

Since I wrote this I’ve used the Gutenberg editor a lot more and realise that it’s probably NOT a great idea to use it on production sites just yet … I’ve just encountered too many errors and problems to recommend it.

What’s Gutenberg?

Gutenberg is the code name for the next phases of development for WordPress.

Why the name Gutenberg? Co-founder of WordPress, Matt Mullenweg, explains on his blog:

When Johannes Gutenberg’s press came out, people mostly used it to print the same religious text monks had been copying. It wasn’t until ten or fifteen years later that people started innovating and trying their hands at new kinds of writing, and the wheels of change started to spin faster. Now it’s WordPress’ turn to do the same.

We’re democratizing publishing — and democratizing work — for everyone, regardless of language, ability, or economic wherewithal.

That’s a lofty goal.

Gutenberg isn’t only this new editor – there’s a whole new plan for WordPress. The changes we’re seeing now are just the first phase of Gutenberg. Coming later are page templates and even complete site customisation.

Mullenweg announced at WordCamp Europe in Belgrade this summer that he wanted 100,000 active installs of Gutenberg before it will be officially merged into WordPress core. This makes perfect sense, as the development team can use the feedback from those 100,000 installs to work out a lot of the bugs and to process new ideas and new feature requests. Currently, Gutenberg has 200,000 installs!

The Gutenberg editor will be included as the default editor in the next release of WordPress, due later this year.

For now, the advice is not to use it on live sites. That’s advice I’m happily ignoring as this post is created with Gutenberg!

Getting Started with the WordPress Gutenberg Editor

This is the old editor you’re used to, called TinyMCE:

And here’s the new Gutenberg editor:

It does look comparatively sparse, doesn’t it? But don’t let that simple interface fool you; there’s real power and flexibility built in there that you could never have with the current default WordPress editor.

Activate it

You can get Gutenberg in one of two ways:

• by installing the plugin from the WordPress repository at https://wordpress.org/plugins/gutenberg/
• from the latest WP update, which you should have installed by now.
  

Once Gutenberg is installed and activated and you’ve logged in to your dashboard, you’ll be given this very obvious call to try out the Gutenberg editor:

Using Gutenberg to Write a Blog Post

There are already enough yawn-inducing posts on the web talking through the theory and features of Gutenberg.

For this walk-through I’m going to take an actual blog post of mine, created with my drag and drop builder from Thrive Themes, and see how easy it is to reproduce that post using the Gutenberg editor.

Here’s the original post: https://wpstrands.com/google-chrome-will-mark-your-wordpress-website-as-insecure/

The Gutenberg menu in your dash will take you to the demo of Gutenberg – I encourage you to try it out at least a few times so you can get used to all the changes that are scaring you right now.

From this menu, you can also send feedback to the development team. This will be very appreciated and help to make Gutenberg better for everyone once it goes live.

So, having activated Gutenberg, I clicked on Add New post and I got the new editor.

If you’ve used writing apps before it might not look so strange. But if you’ve only ever used the default WordPress editor then this will all be new and you’ll probably feel a bit lost.

Don’t despair, though: Gutenberg will very helpfully display some popups to guide you through your first use.

Flexible Titles

The first thing I want to create for this post is a title with a background image and a small acknowledgement to the owner of the image.

This was pretty easy with my page builder, Thrive, although it took some tweaking to align things the way I wanted, especially for different device sizes.

How easy is it to do the same using Gutenberg? Let’s see.

I entered the page title and right away I got stuck trying to centre it. I’d probably need CSS to get the title the way I want to.

But, then I clicked on add a block to see if there was something that might help.

I noticed a Cover Image block and that did exactly what I wanted. With it I could even change image opacity and other settings. I hadn’t actually expected that part to work so easily. I did need to edit the HTML of the block to make the text a H1 but that worked fine.

Cutting and Pasting is Amazing

For the rest of the post, pasting paragraphs worked amazingly well. Formatting – even from non-WordPress sources – is preserved with Gutenberg. Images are included and even bullets are preserved. Matt Mullenweg mentioned at Wordcamp Europe that he considered this a hugely important feature. It’s great to see he means what he says.

If, like me, you write your content first in another place before bringing it into WordPress, this is a huge time-saver!  It’s very pleasant to see the smoothness of cutting, pasting and deleting . Wherever I clicked my mouse was where the next block would be inserted.

Columns (still in beta) are a little finicky, to say the least, but it didn’t take long to get my image where I wanted it. If you’re used to drag and drop page builders then you’ll certainly miss that functionality for layouts. Still, usability is probably a lot better than you’d expect at first.

The preview looked great and to be honest, for this uncomplicated post layout, the whole post was easier to create in Gutenberg than in Thrive themes!

Shortcodes are no Problem

One thing I really wanted to know: how easy would it be to add elements like opt-in forms to the post? Say I wanted to add one of my Thrive Leads opt-in forms – how easy is that with Gutenberg?

Well, no problem as it turns out, by using the shortcode block as follows:

[thrive_leads id=’6185′]

Some Bonuses

There were some pleasant surprise when using Gutenberg for the first time.

• You can add any block as a custom block to be reused in the future – great for streamlining your post creation if you have a regular format you follow, as I do.
• It’s smart enough to present the blocks I used most often at the top of the list – a small thing but a very nice touch.
• Another nice touch – for anything I couldn’t control visually I can add a CSS class to control via CSS.
• I can also view individual blocks in their HTML equivalent for finer control.
• Since it’s built by the WordPress development team and will be part of WordPress from the next release onwards, it’s guaranteed to work well with other parts of WordPress.  This is certainly not true of all other page builders out there.

Here’s the new resulting post created with Gutenberg:
https://wpstrands.com/google-is-about-to-mark-your-website-as-insecure/?preview_id=6212&preview_nonce=ddb70b3ac5&preview=true

(It’s password-protected so that it doesn’t affect the SEO score of the original. Password: notsosecure)

Some Quirks

There are, of course, some quirks (a.k.a. bugs) in this version of Gutenberg.

So, do as I say, not as I do – don’t use the editor on a live site just yet. I’m using it live on my new posts, including this one 😉 so feel free to let me know of any bugs that I can pass on to the development team …

• The longer I use it, the more memory problems I have. Inserting blocks and updating take longer and longer and on a few occasions Chrome has reported “not enough memory”. So a few memory management things to be worked out there. Thankfully these don’t seem to affect the load on my web server.
• Although I clicked the Try Gutenberg button, every time I return to the dashboard isn’t with that same option. As if WordPress doesn’t know I’ve already tried it. It’s another little hint that this isn’t yet ready for production sites.
• When I wanted to paste HTTP links as text, Gutenberg tried to embed them rather than pasting them directly. I got around this with my old trick of pasting the content into notepad to remove all formatting. Copying from there and pasting back into Gutenberg gave me no problems.
• Editing links didn’t work well for me – I wasn’t able to specify Nofollows or open in a new tab every time; behaviour seems a little erratic at the moment.
• I use the Grammarly plugin when writing and, while it does catch typos and errors, it doesn’t seem to be able to change them within Gutenberg blocks.

Gutenberg should work in any theme. I didn’t notice any problems in the Thrive theme that I use on my site. I can’t guarantee this is the case for all themes, especially for page builders such as Divi, Elementor or Beaver Builder and the like.

Conclusion

So that’s a quick walk-through of my first use of Gutenberg. It was pleasant, quick and easy. I appreciated the responsiveness – it’s fast! Fast to save, preview etc.

The result? I’ll be using the Gutenberg editor for all my posts in the future. Including this one. And the great news is it’s only going to get better.

Sources

My own trial and error
https://kinsta.com/blog/gutenberg-wordpress-editor/
https://yoast.com/what-is-gutenberg/
https://ma.tt/2017/08/we-called-it-gutenberg-for-a-reason/