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.

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.

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. Gutenberg will be shipping with WordPress 5.0. How to Install Gutenberg

“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)

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.

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.

• 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.

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.

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.

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.

● #10: When I switch from the “Visual Editor” to “Code Editor,” I get the following coding in a lot of the HTML DIV elements. The coding I get is related to CSS Bootstrap. However, I despise Bootstrap, and I purposely avoid plugins that have Bootstrap, because it interferes with my CSS coding. I have my own, personal-made CSS library for columns & grids, and I make my own accordians, tabs, etc with my own HTML, CSS & JavaScript, so Bootstrap is essentially useless for me and it conflicts with my coding.

● #14: The “Add Media” Quicktag is all the way at the bottom of the content-area the_content(), and Gutenberg doesn’t provide the option to adjust the content-area’s HEIGHT. Thus, if there is a long post, the person adding media content to the post has to scroll all the way to the bottom of the content-area. Yet again, this is not time-efficient. It’s another inconvenience!

I am aware that there is the Classic Editor plugin, but that’s not fair to us users & coders. Gutenberg should remain an optional plugin. My gut is telling me that if Gutenberg becomes part of the WordPress core, and people like myself have to use the Classic Editor plugin, then there are going to be compatibility/coding-conflict issues. As far as functionality and appearance, does anyone know if the Classic Editor plugin is EXACTLY the same as the current WordPress post editor? Will API/Actions & API/Filters work with the Classic Editor plugin the same way these APIs work with the current WordPress post editor?

#7 For good or bad, the HTML editor is becoming less useful in a Gutenberg block context. The HTML content itself is a representation of the data which is basically disposable as it will be regenerated by the next visual edit. I expect we’ll see some more developer-targeted custom blocks in the near future which are intended for raw HTML input.

#10 Personal opinions about Bootstrap aside, I’m not seeing this either. Again, this feels like a plugin has wedged a filter somewhere. Gutenberg does add a variety of classes, but they’re mostly namespaced with `wp-` and fairly minimal. If you haven’t looked into custom blocks yet, you should. The API is well thought out and gives developers a great deal of freedom about how we want our code generated.

#11 Custom fields (ACF?) should appear below the main content area or under Extended Settings in the sidebar. ACF Pro has been a staple of our WP development, but after a few days with Gutenberg API I can see the potential for replacing nearly all of it with custom blocks. Time will tell, but the potential of metadata blocks and custom HTML is really huge.