Diving Into the New Gutenberg WordPress Editor (Pros and Cons)

The current WordPress visual editor hasn’t had many changes over the years and for the most part, has stayed pretty much the same. While this isn’t a bad thing, many think it is time for a change. Other platforms such as Medium or Ghost provide a really unique and refreshing experience for writers, so why can’t WordPress? Well, many contributors and volunteers have been working on the new Gutenberg WordPress editor behind the scenes for the past 6+ months. Their goal? To make adding rich content to WordPress simple and enjoyable. Today we will dive into the new editor and discuss some pros and cons.

What is Gutenberg?

Gutenberg is a take on a new editor for WordPress. It is named after Johannes Gutenberg, who invented a printing press with movable type more than 500 years ago. The current visual editor requires a lot of us to utilize shortcodes and HTML to make things work. Their goal is to make this easier, especially for those just starting with WordPress. They are embracing “little blocks” and hope to add more advanced layout options. You can check out the official example.

To be fair to the developers and the team working on this, it is important to note that this is currently in its beta and testing phase, it’s not ready to run on production sites yet. But we wanted to dive in and see for ourselves what all the hype is about. We will make sure to keep this post updated as improvements and changes are pushed out. It appears that before this will be officially merged into WordPress core that Matt Mullenweg (the founder) is hoping to get 100,000 active installs. Which makes perfect sense, as this will work out a lot of the bugs, issues, and allow them to process new ideas and feature requests.

“I think we can do 4.9 before we merge #Gutenberg — ideally over 100,000 active installs first.” @photomatt #WCEU

— Bridget Willard (@YouTooCanBeGuru) June 17, 2017

Because Gutenberg is still in the testing phase, the team working on it are encouraging people to try it out and leave comments and feedback in the WordPress support forum or open an issue on GitHub. Or you can join the discussions that take place in #core-editor on the core WordPress Slack. Hopefully, we will see this in WordPress 5.0.

How to Install Gutenberg

As of writing this, the Gutenberg plugin currently has a little over 5,000 active installs with over 91,000 total downloads and a 2.5 out of 5-star rating. It also requires WordPress version 4.8 to use it.

Gutenberg WordPress plugin

You can download the latest version of Gutenberg from the WordPress repository or by searching for it within your WordPress dashboard under “Add New” plugins. Again, we recommend installing this on a test site or utilize your host’s staging environment.

Install Gutenberg WordPress plugin

Exploring Gutenberg

After installing Gutenberg, you will see links under your Posts that allow you to open up the Gutenberg editor. They don’t replace the default WordPress editor, which is a good thing in our opinion, as during the testing phase it allows you to bounce back and forth. Obviously, once this is merged with Core, it would probably by default use the “Edit” links. As of the latest version on the repository, it now supports custom page types and pages as well.

Gutenberg link on post

It also adds a new menu in your WordPress dashboard which contains a demo (as seen below) and the ability to create a new post. Again, this menu is probably just for testing purposes As you can see the visual editor looks quite different than the once you are probably used to. It has a very similar feel to Medium, which we think is great.

Gutenberg editor demo

If you take a look at both the Gutenberg editor and the current visual editor side by side (click to enlarge) you can see just how much more writing space Gutenberg has, especially on smaller screens. For people writing on laptops, Gutenberg is going to be a nice change of pace! It really is focused on “writing first” and is trying to provide a less distracting environment.

Comparing Gutenberg vs current editor

In the Gutenberg WordPress editor, you can click on “Post Settings” to remove the right-hand sidebar. And while this does give you access to even more of your screen it is kind of halfway in between the currently available distraction-free writing mode. We tried using Shift+Alt+W to launch it in Gutenberg editor but it doesn’t seem to work yet. It could be they haven’t added this yet. But we are pretty sure they will, as there are probably quite a few people that use this.

Hide post settings (half-way there to distraction-free writing mode)

To switch between the visual editor mode and text editor (code), there is now a dropdown in the top left. You will notice that there are now HTML comments at the beginning and end of each block. For example, the following would allow you to create a text block.

<!-- wp:core/text --> <!-- /wp:core/text -->

This allows you to create the blocks directly from the text editor mode. However, it also adds a lot more clutter than you are probably used to if you are editing in this mode.

Gutenberg text editor

When you highlight over a block, there are options to easily move it up or down with the arrows, delete it, or go into the settings of the block. This is very similar to the controls available to you on Medium.

Working with Gutenberg blocks

We were also surprised by how well it worked on mobile right out of the box. If you need to make a quick image insert or add a paragraph before publishing a post on the go, it looks like Gutenberg is going to make that very easy.

Gutenberg editor mobile

One of the first things you will probably notice is that the TinyMCE toolbar you have been used to seeing for years is now gone. It is now replaced with a drop-down menu if you click on the “Insert” button. Well, that is because it appears Gutenberg is trying to get rid of its dependency on the TinyMCE integration. Or are they?

TinyMCE is no more

Here is what Matt Mullenweg had to say about it.

“What we’re trying to do is shift it so that you only have to learn about blocks once and once you learn about the image block, that can be in a post, in a sidebar, in a page, in a custom post type, and it will work exactly the same way. Whatever is integrated with it, let’s say a plugin that brings in your Google Photos or your Dropbox, that will now work everywhere, too.” — Matt Mullenweg (src: WP Tavern)

However, Andrew Roberts, the project leader on the TinyMCE team also reached out to us and cleared up a few things with regards to what his happening with TinyMCE and Gutenberg.

I’ve been on the Gutenberg team since inception. It has been a joint effort. It is probably worth noting that TinyMCE core editing engine is the powering the “editable” component that in turn powers most of the blocks. The Table block for example. That is likely to continue for the foreseeable future.

Also, the Classic Text block is essentially the TinyMCE editor. How much prominence it gets is probably dependent on feedback from the community. There is actually a Pull Request (#1394) being worked which essentially makes Gutenberg a wrapper for the ‘old’ editor so that existing TinyMCE plugins and buttons would work. Remains to be seen if that gets included.

Regardless, it is likely that the WP and TinyMCE Core teams will work together to ensure that a more word processing-style user experience lives on in WordPress. Even if it eventually becomes a plugin.

On a related note, one of the reasons we have been working on the Gutenberg project with the excellent Gutenberg team has been to bring these concepts to the wider TinyMCE community over the next 12 months. That will enable you to bring block-based editing concepts into your own custom application. — Andrew Roberts

Below are a few new block additions we thought were pretty cool.

Table Block and Text Column Block

Simple tables are much easier now, as you can insert them as blocks within the editor. Previously you had to either use a 3rd party plugin or HTML code. Currently, you can only add a 2×2 table with the insert option and you can’t style it without going into the text view. Although, eventually we assume you will be able to do all these things from the visual editor.

Gutenberg tables

They have also added the ability to add responsive text column blocks, which is great! Currently, you can choose between a 2, 3, and 4 column layout. Responsive columns in WordPress have always been a pain in the past and usually require a third-party plugin to get working properly.

Gutenberg columns

Live HTML Block

They also have what we are calling an live HTML block. You can insert your code and then see a preview from right within the block. This is actually a pretty cool idea and might actually prevent some of us from having to switch back and forth between the visual editor and text editor modes.

HTML block in Gutenberg editor

Drag and Drop Images

As of Gutenberg 0.5.0, you can now drag and drop images directly into an image block, just like you are used to with the visual editor. However, there is a fade effect when doing this which is quite strange. We could easily see this being an issue.

Drag and drop images

You can also now add additional CSS classes to certain blocks.

Add CSS class

Recent Blocks

With all the blocks being built into the Gutenberg editor, and probably many more to come, they added “Recent blocks” to try and help speed up the process of insertion.

Recent blocks

Cover Text Options

As of Gutenberg 0.9.0, they also introduced some new visual styles and options for cover text. You can easily change the font size, turn it into a Drop Cap, and change the color with their new custom color palette component.

Gutenberg cover text

Slash Autocomplete

A cool feature added in Gutenberg 1.1.0 is the ability to use autocomplete to insert blocks. For those of us who use Slack on a daily basis, this is a very familiar way of quickly formatting content the way you want it. Having the option to minimize clicks and utilize more of the keyboard is always a good thing!

Gutenberg autocomplete (Img src: WordPress.org)

Table of Contents and Anchor Support

They have also added a Table of Contents on the sidebar. They are clickable links so you can easily jump to a section in your article. This can come in handy for when writing long form content.

Gutenberg table of contents

Another feature you can now use on blocks is anchors. This is actually pretty exciting and something that has been needed in core for a long time. Adding anchors allows you to then link directly to a certain section or header in the article. This is great for sharing, as well as creating jump to menus in SERPs.

Gutenberg anchor support

Word and Block Counts

Most of us are used to seeing the total word count at the bottom of the WYSIWYG editor. Well, in Gutenberg 1.2.1 they have added this as a little informational popup you can quickly view. You can see the total word count, number of blocks, and number of headings.

Gutenberg word and block counts

Pull Quotes Block and New Alignment Options

Besides just having the standard blockquote which we have been using for years, they also have a new pull quote. And yes, pull quotes are different. It is also nice to see some variations on the positioning of the blocks. For years, the standard visual editor has given you the ability to align left, align center, align right, and assign no alignment. With the Gutenberg WordPress editor, you can also align wide (as seen below), and align full-width.

Gutenberg pull quote aligned wide

Button

There is also a built in method for adding a simple button. While there aren’t very many options here yet, it is nice to see, as many bloggers and publishers need easier ways to add call to actions to their blogs posts. Right now you have to use HTML or rely on a 3rd party button/shortcode plugin.

Gutenberg button

Embed Options

If you wanted more easily accessible embed options, well, you are definitely getting your wish! Gutenberg makes embedding media content super easy, whether it be YouTube, SoundCloud, Hulu, Flickr, Imgur, Twitter, Slideshare, Reddit, and many more.  While you could embed all of these before, many didn’t realize this because there was no mention of it in the visual editor. Combined with the new block experience and alignment options, we aren’t sure what could really be done better. Although, they might have to reorganize things going forward as this could easily get cluttered.

Gutenberg embed options

Pros of Gutenberg WordPress Editor

Here are a few pros we see with the current Gutenberg Editor.

• Ditching *some* reliance on TinyMCE is a good thing in our opinion. We would love to see a tighter integration between core, theme developers, plugins, and the editor.

‘Right now WordPress makes you learn a lot of concepts… [Gutenberg lets you] learn it once and use it everywhere.’ @photomatt #WCEU

We grew our traffic 1,187% with WordPress. We’ll show you how.

Join 20,000+ others who get our weekly newsletter with insider WordPress tips!

Subscribe

We hate spam too, unsubscribe at any time.

— Alex Denning (@AlexDenning) June 17, 2017

• For publishers that prefer the newer Medium style editing experience, they are most likely going to love the WordPress Gutenberg editor.
• Gutenberg provides a less distracting experience with more screen space.
• Blocks are fun to use and the new alignment options are a step forward for larger resolution screens and full-width templated and responsive sites.
• Already works great on mobile, and going forward we can actually see people utilizing this a lot more. Need to make a quick edit on your phone while on the go? No problem.
• The ability for theme and plugin developers to create their own custom blocks.
• Easier to use for beginners.

Another thing that caught our eye was in Gutenberg 0.4.0 they mentioned in their development logs adding an API for handling pasted content. (Aim is to have specific handling for converting Word, Markdown, Google Docs to native WordPress blocks.) This would be amazing. Right now copying from Google Docs to WordPress is completely broken.

Cons of Gutenberg WordPress Editor

And here are a few cons we see in the current Gutenberg editor. Remember, it is still in the testing phase, so a lot of these things will probably be fixed or added.

• It is currently missing Markdown support.
• While we also listed it being easier to use for beginners, we can also see this as being harder for some to learn.
• As of October 2017, Gutenberg does now support meta boxes. However, this is only initial support and it will require developers hopping on board. However, it’s a step in the right direction. You can at least tweak your Yoast SEO settings now. 😉
  

  Gutenberg meta boxes

• 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!
• With so many themes and plugins out there, backwards compatibility is going to be a huge issue going forward. In fact, there will probably be thousands of developers that now have to do a lot of work, such as those that have integrations with TinyMCE. Out of all the WordPress updates, this is probably going to be one that causes the most work for developers. Although there might be a wrapper coming which would enable TinyMCE backwards compatibility. See pull request #1394.
• Some are worried about the accessibility of Gutenberg. Joost de Valk, the developer of Yoast SEO brought up this concern. Make sure to also check out this post about using Gutenberg with a screen reader.

Developers have started voicing their concerns with Gutenberg. Ahmad Awais has also released a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with Gutenberg. Worth checking out.

And many of you are probably wondering, will Gutenberg be optional or not? The answer is no. When they role out Gutenberg officially into WordPress core, you won’t be able to turn it off. As this will become the official editor for WordPress. There is, however, a free plugin called Classic Editor which you can use to restore the old post editor. But use this as a means to an end.

We also recommend checking out this great post on Gutenberg myth-busting which might answer any additional questions you might have.

Try Gutenberg Demo

Want to play with Gutenberg without installing it? Check out Frontenberg, a limited front-end demo of the WordPress Gutenberg editor.

Summary

Overall we were quite impressed with the new Gutenberg WordPress editor, it’s definitely something we are excited about for the future. We encourage everyone to grab a copy of it from the WordPress repository and install it on a dev or staging site. This is our chance folks to help build the editor we have all been wanting. We can have the same experience Medium folks do, but in our favorite CMS! The team here at Kinsta will definitely be taking some time to help give feedback.

Have you tried out Gutenberg yet? If so, we would love to hear your thoughts, both good and bad.