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 is 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 1,000 active installs with over 9,000 total downloads and a 3.5 out of 5-star rating. It also requires WordPress version 4.8 to use it.

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.

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.

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.

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.

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.

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.

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.

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.

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?

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

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. It would also be nice to see columns added to this, but we are definitely on the right track. We are pretty sure they will work columns into Gutenberg before releasing it. Having the ability to add responsive 1/3 or 3/4 columns is essential now for almost every WordPress site.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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

— 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.
• Doesn’t support custom plugin meta boxes such as Yoast SEO yet. This alone makes it unusable in production right now. But it is understandable as plugin developers will now have to start testing integrations with the Gutenberg editor.
• 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.

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

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.