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

Updated on September 27, 2017

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.

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 2,000 active installs with over 25,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

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

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

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

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

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 gutenberg

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

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

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

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

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

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.

html block gutenberg editor

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

Drag and drop images

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

Add CSS class

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

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

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

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

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

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

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 pullquotes

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

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

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.

  • 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. But meta boxes are coming soon! As you can see in the picture below it is planned for a future release.

    Gutenberg meta boxes coming soon

    Gutenberg meta boxes coming soon

  • 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. And many of you are probably wondering, will Gutenberg be optional or not? Currently, the best answer for that right now is summed up best by Tammie Lister’s response to some negative feedback on the repository:

Thanks for taking the time for a review, each piece of feedback does get listened to and matters. First, there will be a way for people to not use Gutenberg, that’s something always has been the case. The how is yet to be decided. The hope though is as this is a project not yet complete, as it grows less will want to turn the experience off… — Tammie Lister

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.

This article was written by Brian Jackson
Brian focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the WordPress community. He has a huge passion for WordPress, has been using it for 8+ years, and even develops a couple premium plugins. Brian enjoys blogging, movies, bike rides, and flipping websites.

Hand-picked related articles

  1. Gravatar for this comment's author
    Anthony Hortin June 26, 2017 at 8:13 pm

    Embedding content from services like YouTube, using the built in oEmbeds, are already super-easy to use in the existing TinyMCE editor. You simply paste a url into the editor and that’s it. Also, I think it’s worth clarifying that Gutenberg hasn’t added any new embed options. All those existing embed options (YouTube, Speaker Deck, Flickr, Imgur etc.) have been available in WordPress for years. It is good that they’re now more visible though, as there’s lots of people who don’t know that WordPress can already handle this and so they install site specific plugins (YouTube embeds, being the most common ones I see).

    Also, the image for the new Table block is a little misleading. There’s no way you could’ve added that table without switching to the Text view and editing the HTML as the Table block doesn’t currently provide functionality to add extra Rows or Columns. It simply inserts a 2×2, unformatted table, and that’s it. I know they’re working on fixing this, but since the article was about the current Gutenberg plugin, I think it’s important to show what it currently does, not what it’s expected to do.

    1. Gravatar for this comment's author
      Brian Jackson June 27, 2017 at 9:39 am

      Thanks for taking the time to comment, I have updated the article above addressing your concerns.

      1. Gravatar for this comment's author
        Anthony Hortin June 27, 2017 at 10:30 pm

        No probs, Brian. Thanks for the great post :-)

  2. Gravatar for this comment's author
    Black Lodge Games, LLC June 27, 2017 at 2:34 pm

    Sorry, but this looks and feels bad, and is a productivity drain. Hiding
    UI elements until you click on things is terribly confusing for some
    new people (the opposite of your goal.) You’ve just doubled the number
    of clicks I need to accomplish the exact same thing. I would only favor
    this in core, if it’s to replace the current distraction free editor.
    If this replaces TinyMCE in core then I’ll replace WordPress for my
    site. Not even remotely a fan of the direction the editor is going.

    1. Gravatar for this comment's author
      Brian Jackson June 27, 2017 at 2:38 pm

      Thanks for the comment. Ya, its definitely not for everyone. I personally like it, but I also enjoy the Medium experience and don’t do much clicking while writing. It will be interesting to see what happens. I see three possible scenarios happening:

      1. They merge into core and everyone will simply have to adopt to the new changes.
      2. They merge into core and it is optional, like you said, possibly replacing the distraction-free writing mode.
      3. They merge into core and still allow a TinyMCE integration back into it to help the thousands of integrations currently already coded for the editor.

      Time will tell.

    2. Gravatar for this comment's author
      Nodws August 17, 2017 at 3:14 pm

      forget the “new”people, take into account most of us have clients that are 60 year old or more, this editor must be opt-in not “default” editor by any means

  3. Gravatar for this comment's author
    Andrew Roberts June 28, 2017 at 11:52 am

    Hi, I’m project leader on the TinyMCE team. And 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 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.

    1. Gravatar for this comment's author
      Brian Jackson June 28, 2017 at 12:58 pm

      Hey Andrew, thanks a lot for taking the time to comment. This definitely clears up a few things and I have updated the post above with some of your comments, as well as a link to pull request #1394. Sounds like this might resolve some issues that a lot of developers are worried about going forward.

  4. Gravatar for this comment's author
    Nick DerAvedissian June 28, 2017 at 12:34 pm

    No MCE custom buttons and toolbars so shortcodes can use them to generate content, no meta boxes, no columns. With all the available page builders, Gutenberg is not needed. In fact if the custom MCE buttons and meta boxes are not added, this thing is useless. They are about to break thousands of themes and plugins, and for what? Didn’t the surveys show that almost nobody cared about distraction free writing? And yet, here we are, thanks to some real “geniuses” getting ready to break many things, without any real advantages, You want something more than the usual editor, there are dozens of good page builders to choose from. I hate Gutenberg with a passion, and my anger grows every day and every time when somebody says the word Gutenberg. Make it a bloody plugin, and that’s it! Simply said the pros do not outweigh the cons, not in a thousand years,

    1. Gravatar for this comment's author
      Pascal July 8, 2017 at 3:05 am

      You can’t compare a page builder with a editor. Compare page builders with acf or whatever you want but your comment is just hilarious. Go and play with your drag and drop page builders.

      1. Gravatar for this comment's author
        Nick DerAvedissian July 8, 2017 at 9:46 am

        Gutenberg is more than just an editor, it is a whole new way of editing posts and pages. It is trying mimic page builders, and is failing miserably. And for the record, I don’t use page builders, but if I did, I would choose one of the many good ones, over the retarded, disaster of an idea Gutenberg. What’s hilarious, is that you are not defending Gutenberg, just throwing insults. What’s so great with Gutenberg then? Let me help you, NOTHING, unless you are a sheep and follow and do whatever you are told, without thinking.

    2. Gravatar for this comment's author
      Lymon Lemon August 11, 2017 at 10:11 pm

      I agree. WordPress not ought to waste anymore time with this nonsense. This is going to mess with a lot of sites that already have a solution working for them. Time to dump this idea of reinventing the wheel guys.

  5. Gravatar for this comment's author
    Ahmad Awais July 17, 2017 at 8:36 pm

    Thanks, Brian! For the article and for sharing the Gutenberg Boilerplate! 💯

    1. Gravatar for this comment's author
      Brian Jackson July 18, 2017 at 1:12 pm

      No problem Ahmad! Glad to see you are thinking of developers :) I think that this the crowd that is most worried with these changes.

      1. Gravatar for this comment's author
        Ahmad Awais July 19, 2017 at 7:33 pm

        Just trying to help. 🎯

  6. Gravatar for this comment's author
    Nodws August 17, 2017 at 3:12 pm

    Yeah this tries to be too clever, our clients wont like it (since they are frustrated with wix and such seamless editors)

  7. Gravatar for this comment's author
    AustonianAggie October 29, 2017 at 1:16 pm

    I’m pretty shocked this may be included as an automatic update to WP. I use WP for many things beyond blogging, most often as a middleware. Anything that breaks ACF will doom WordPress to history for thousands of commercial enterprises.

  8. Gravatar for this comment's author
    Misti Andrich November 7, 2017 at 9:24 am

    Gutenberg looks great. I guess this will be the end for all these overblown page builder themes.

  9. Gravatar for this comment's author
    Patricia Hatton November 16, 2017 at 9:55 am

    I am a customer of Elegant themes (for my personal website) but am also the webmaster for a church that is using a free theme that is five years old and has never been updated (as free themes usually are not). I’ve tried unsuccessfully to get the church staff to work with me on finding a new theme (not a free one). I have two questions.
    1. Will the Guttenberg editor be pushed out to all wordpress websites and will it be compatible with older ones? My worry is that the church website could fail with that upgrade.
    2. I don’t want to suggest disallowing WordPress upgrades for security reasons (that website is already vulnerable enough with a discontinued, not updated free theme anyway) so I don’t want to suggest not allowing WP updates. So I am thinking about issuing a warning about Guttenberg to the church staff in case it causes a disruption of their website.
    Ideas, comments, suggestions welcome. Thank you!!!!

Leave a Reply

Send this to a friend