Gutenberg: A quick look at WordPress new editor

Image for post
Image for post

Gutenberg is the codename for the new WordPress post and page editor, the main idea behind it is to provide a better experience for us to create feature rich content by adopting the idea of “blocks” so, instead of messing with shortcodes, custom HTML structures or post metadata, everything is laid out into small pieces that can be put together to shape our site’s content easily.

Image for post
Image for post
Gutenberg in action

Why does WordPress need a new editor?

The current editor is one of the most powerful features of WordPress, it’s powered by TinyMCE and it’s been customised to allow us to effortlessly manage how content looks, upload images with drag and drop or even embedding third party stuff like YouTube videos or tweets by just copy/pasting a URL, however when it comes to editing non-textual content it falls short.

What I mean by that is content that require a specific layout, have you ever tried to create a table in a post? The TinyMCE button for tables is even disabled by default so if you’re not familiar with HTML you need to use a plugin for that, want to display two images side by side? Again, this is simple if you understand CSS but if not you’ll probably end up adding line breaks everywhere trying to fix text wrapping issues.

WordPress provides some tools to help with this problem, the main ones being:

  • The editor’s “Text” view, formerly known as HTML view.
  • Shortcodes.
  • Post metadata.

These are all very useful however they come with some drawbacks, the “Text” view requires some HTML/CSS knowledge, Shortcodes can abstract that complexity but you need to learn their syntax and have no visual feedback from the editor (unless you use custom editor styles) and post meta can be hard to implement if you want to use them in more than one place.

Some plugins, like the famous (or infamous) Visual Composer try to make content easier to edit by allowing you to change individual elements without any programming knowledge, sometimes it’s so easy that users can mess their whole site if they’re not careful, they often bring lots of overhead code that can make sites slow and provide a very rigid framework that limit the kind of work developers can perform.

Gutenberg attempts to solve this by making each content piece a “block” which can be moved around, edited or removed, all under the same consolidated interface. In a way it’s very similar to Medium’s editor but it’s made to be extensible so developers can build on top of it and create custom blocks to expand its initial set of components.

Nowadays, everything is a component

Almost all modern JS frameworks available now follow a component based architecture, with good reason, it allows us to focus on smaller individual elements that are responsible for only a subset our application’s core functionality. All the logic is (or should be) encapsulated into it’s own component, even its CSS in some cases, so they can be easily reused anywhere.

Image for post
Image for post
Components, components everywhere

Gutenberg is built using this same approach, it is powered by React so it makes sense to follow a component based architecture in its code, but it goes beyond that. The new editor splits content into multiple “blocks” so, similarly to modern JS applications, it lets us focus on smaller elements and piece them together under the same consistent interface.

It might not be intuitive to think of content in terms of blocks, after all it’s really just a long string of HTML text, consider the following sample post:

Image for post
Image for post

Each one of the outlined elements is a block, with its own set of settings, markup and styles, they can be moved around and customised individually to shape our post content. They all share the same UI so editing any kind of block is very consistent, depending on the options available they can looks something like this:

Image for post
Image for post
Block settings UI

As you can see blocks are not limited to simple elements, anything that can be rendered using shortcodes can be made into a block. In the example above you can see how the built in Gallery shortcode looks like in Gutenberg, with the added benefit that you can customise its settings and see how it changes in real time to give you a better idea of how it will look like once it’s published.

At the moment there are only a few built-in blocks, most of which are currently available as shortcodes or embedded media, but Gutenberg allows you to extend its functionality with plugins to create custom block types.

So, is it ready?

Not yet, Gutenberg still has a long way to go to be production ready, at the time of this article it is available as a plugin in the official WordPress repository but reviews are not very encouraging, so you could say that most people are not happy with the current state of the editor which is not a bad thing, feedback is always helpful to improve software specially in its early stages.

As a user, my main issue with Gutenberg right now is that it can be very distracting. There’s a lot going on when all you want to focus on is writing some content, but it’s expected considering all the power that Gutenberg wants to give you. The development team is aware of this problem and I’m sure the UI will get some improvements before it’s released.

Image for post
Image for post
“Not so distraction-free” mode

As a developer, Gutenberg is amazing. It is surprisingly easy to create custom blocks using plugins and the codebase is very clean and easy to read. I’m glad WordPress decided to move away from jQuery or Backbone and started taking a component based approach with React and Redux, it looks like the development team has learned a thing or two using this stack for Calypso.

It’s unclear how the new editor will play with the Customiser since they both seem to help solve the same issues, it looks like while Gutenberg will focus on content (post or pages) the Customiser main job will be editing layout(menus, sidebars, widgets, etc…).

The development team has been working really fast, it’s amazing how much work has been put into a feature this big in such a short period of time. The code is available in GitHub so you can submit issues or feature requests, frequent updates are posted on the WordPress Core blog with the latest news and discussions are always open in the #core-editor channel in the core WordPress Slack.

I’m looking forward to seeing Gutenberg first release version, it has a lot of potential and it’s probably one of the biggest features for WordPress being worked on right now. Feel free download it and to give it a go, keep in mind it’s still in beta but you can submit feedback to help squash bugs and improve features.

I specialise in WordPress but I like to keep up to date with all things involving front end development, if you want to get in touch tweet away! 👋

Written by

Lead Developer at Media Lounge · 6x Magento Certified & Full Stack Developer · E-Commerce Specialist · Currently @ Bournemouth, UK

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store