If you are looking to learn about Gutenberg in advance of the WordPress 5.0 release date, the best thing you can do is install the Gutenberg Ramp Plugin and give it a try for yourself. There are plenty of WordPress Gutenberg tutorials out there, but until WP 5.0 drops, we don’t really know what the effects will be. But so far, it seems to be mostly positive.

“For most casual users, it will, after some growing pains, bring a more flexible content creation experience.

Non-developers will be able to intuitively craft more complex layouts with extra elements like buttons, content embeds, and lots more. And that will, hopefully, help WordPress to continue to grow.”

Colin Newcomer on CodeinWP

WordPress Gutenberg Introduction

The new editor is clean, sleek, and simple. As I said in my first-ever Gutenberg post on my personal blog, “If Medium and the WordPress WYSIWYG had a baby, it would be named Gutenberg.” It’s a much more intuitive user interface that will enable newer bloggers to create content easily and fluidly.

“Gutenberg is an obvious reaction to competitors of WordPress; the writing experience of Medium, the quick and easy site builds using Wix and Squarespace.”

Iain Poulson on Delicious Brains

Gutenberg was revealed in mid-2017 by Matt Mullenweg during an interview with Om Malik, and ever since then, there has been a lot of anticipation for this new editor. Because WordPress is open source, none of this has been secret, and friendly geeks have been investigating the ins and outs of the software as it develops. Some of the links below have detailed tutorials on how to use Gutenberg for your WordPress website, with some tutorials in text, some in video, and a few in gifs.

How do I install Gutenberg on my website?

First off, let’s determine whether or not you have WordPress 5.0 or not.

How to install Gutenberg on your WordPress 5.0 Website

Step 1: Install WordPress.

That’s it. The WordPress core will have Gutenberg standard on every WordPress installation.

How to install Gutenberg on your WordPress 4.X site

  • Go to Plugins → Add New
  • Search for “Gutenberg” (I used Gutenberg Ramp plugin, it worked fine)
  • Click Install Now
  • Wait – Install Now button will change to Activate
  • Click Activate

Installing Gutenberg early will give you the chance to see what it does with your website; if things will break, if things will go smoothly, or if it’s way above your head.

Gutenberg FAQ

What will Gutenberg change in my WordPress site?

After WordPress 5.0, Gutenberg will change the Post Editor (and Page Editor) that you use to create new posts and pages. All the remaining WordPress functionality will be unchanged.

Can I use my page builder with Gutenberg?

Yes and no. Yes, on the website, but no, not on the page.

Yes, you can use a page builder on a WordPress 5.0 website that uses Gutenberg as the core editor. No, you cannot use the Gutenberg editor and your Page Builder editor on the same page.

This website is built in the Divi theme, and uses the Visual Builder as the page builder for many pages (and even some posts). If I compose a post in Gutenberg, and then try to transition that post to the Visual Builder, it used to remove all coding in the easiest way possible: it will delete all the content in the post.

I tried a Gutenberg-to-Visual Builder conversion, and it refused to convert, I couldn’t even access the Visual Builder. But it did preserve the Visual Builder shortcodes.

wordpress gutenberg tutorials screenshot

I tried a Visual Builder-to-Gutenberg conversion, and this is what the screen looks like when you try to go to the Classic Editor:

wordpress gutenberg tutorials classic editor

If you try to return to Default Editor, or get to Gutenberg, you’ll lose it all:

gutenberg tutorials divi builder visual builder

Will Gutenberg change my eCommerce Store?

Since Products are a Custom Post Type, they will not (currently) be able to use Gutenberg without extra enhancement.

However, since I use WooCommerce on as the shopping cart on this website, I did see a neat little notice on here after I installed Gutenberg:

gutenberg tutorials woocommerce integratione

I did this to get one of my basic page-builder functions in Gutenberg, and it is something I can already do with WooCommerce shortcodes, but this is what a Product Block looks like in Gutenberg:

Can I keep the old version of WordPress instead of using Gutenberg?

I am quite sure there will be a plugin to attempt doing that, as there is always a plugin to handle any feature the user base wants; but since the old Tiny MCE editor is embedded in the core, it would take quite a hefty piece of code to transition it back.

If you really need to keep the old editor and refuse to use Gutenberg, your best bet is to stick with WordPress 4.9 and manually install any security updates, keeping your website increasingly obsolete. I’m sure this will be an appealing option for many to begin with, but I suspect that most people will upgrade in due course. 

How hard is it to learn Gutenberg?

Try one of the Gutenberg tutorials linked in this post, you’ll see how easy it is. Like any learning curve, though, it depends on your aptitude and your interest.

Writing a blog post in Gutenberg won’t be much different than writing a blog post in Medium, but it will have a lot of the core WordPress functionality and integration. Getting all of the new features to sync up will take a little study, but it’s not very difficult. I’ve found it to be very user-friendly – read the first post I wrote in Gutenberg, with glitches, here: https://caelanhuntress.com/2018/08/12/gutenberg-is-coming-to-wordpress/

How long does it take to learn Gutenberg?

It’s not long. After 3-4 posts, a novice blogger should have the hang of it; experienced bloggers will only need 1-2 blog posts to pick up all the differences.

Are there Gutenberg tutorials?

One of the best Gutenberg tutorials I’ve found is the WP Engine Gutenberg for Beginners tutorial.  – This comprehensive tutorial is full of gifs and is very useful.

If you like video, the Yoast team put out a great video series of Gutenberg tutorials for free on YouTube:

Will my old WordPress posts be affected by Gutenberg blocks?
Will Gutenberg affect the SEO of my WordPress website?

What’s New: Gutenberg Blocks

The Blocks are the most fundamental change to the editor. The Gutenberg tutorials linked above go into them in some detail.

Users of Medium will recognize the interface intuitively; but because it’s WordPress, you have much more flexibility and control than with a typical Medium post.

When you pop the hood and look at the the code, the Blocks code is pretty simple. It looks like this:

<!– wp:core/text –> <!– /wp:core/text –> makes a text block. Everything within those bracket pairs can be moved around, drag-and-drop, within the Gutenberg editor.

“Previously, your content lived inside one big HTML file and for every enhancement there had to be something new: shortcodes, custom post types, embeds, widgets and the like. All with their quirky interfaces and weird behavior. Now, you can build your content precisely like you make a LEGO set: all from one box, following a standardized and straightforward set of instructions.”

–  Edwin Toonen on Yoast

This sounds great, on the surface, if you’re starting from scratch. But what if you have an older website?

If you use a lot of shortcodes in your theme, this could present some problems.

“Currently, shortcodes cannot be executed in text columns or paragraph blocks. They must be placed in the shortcode block in order to work. This can cause some problems if your shortcodes produce inline content like the year or an inline call to action.”

– Nathan Ingram on iThemes

Gutenberg Glitches

These are the glitches I noticed while composing my first post in Gutenberg:

  • Making links doesn’t always work. The Link editor doesn’t always take my text, and I often can’t add a link easily.
  • Sometimes when I mean to backspace a word, it deletes the entire text block.
  • There is no undo when this happens; the text block I am working on is just gone.
  • The Fixed Background option to make images parallax often masks the image entirely in the editor
  • Sometimes deleting blocks is problematic, and I have to convert to HTML and manually kill it in the code
  • The images don’t display in the Editor the way they do in preview

An easy caveat: I created this post using the Gutenberg Ramp plugin, on a WordPress core that is still made to support previous versions of WordPress. This is also the early stages of rollout, and I made this post without reading any Gutenberg tutorials, so I am quite sure these glitches will improve over time.

Others have noticed some glitches and hazards too:

“Doesn’t support responsive columns yet. We really hope this is coming. A lot of times this is a reason people install visual builder plugins or shortcode plugins, is to get the column feature alone. It is definitely time for columns to be in core!”

– Brian Jackson on Kinsta

“Backward compatibility is going to be a primary concern for most developers. It will destroy current plugins and themes, especially ones that require integration with TinyMCE.”

– Manish Dudharejia

Gutenberg Plugin Compatibility

“Since announcing the database on March 1st, 70 people have been granted testing status. However, of 5000 total plugins, we’re still at 4139 untested plugins. No companies have stepped up to contribute a significant amount of person-hours.”

– Daniel Bachhuber on his blog

Of the 861 tested plugins that Daniel tested in April of 2018:

  • 219 (25.44%) are compatible.
  • 518 (60.16%) are likely compatible.
  • 25 (2.9%) are likely not compatible.
  • 39 (4.53%) are not compatible.
  • 60 (6.97%) are in “testing”, which means someone started test and abandoned the process.

That’s a decent spread, and the numbers may have improved. But as Igor notes below, this could cause big difficulties for Custom Post Types:

“If your plugin has a custom post type, then you may want to disable Gutenberg for that particular post type. To disable Gutenberg for your custom post type, you can just change your post type configuration.”

– Igor Benić on Tuts Plus

When will Gutenberg be a part of my WordPress website?

The answer to that question is very personal.

When WordPress 5.0 is released, every WordPress website that upgrades is going to have Gutenberg installed as its core editor by default. If you want it earlier, you can install a plugin, as described above. If you don’t want to upgrade to 5.0, you can probably coast on WordPress 4.9 for a number of months without facing any serious issues.

So, you will have Gutenberg on your WordPress website when you want it. Get ready, because it’s coming. Read some Gutenberg tutorials, or better yet, give it a spin.

If you want to talk about what Gutenberg could do to your WordPress website, schedule a consultation.

Pin It on Pinterest

Share This