An Introduction to the New WordPress Editor – Gutenberg

Over a year ago, Matt Mullenweg (co-founder of the WordPress project) told the community of WordPress developers to ‘learn JavaScript deeply’. Since then, a new feature project was created with the aim of improving the way people create content on WordPress.

For many years, TinyMCE (Tiny Moxiecode Content Editor) has been the face of content editing within the software, providing a very simple interface for anyone writing for a blog or corporate website. It has long been familiar to those that use WordPress a lot, and has a number of features that give you control when creating content and allow you to edit it quickly and easily.

Introducing Gutenberg

Gutenberg is the code name for the brand new editing experience that will land within WordPress at some point later this year. We’ll need to wait patiently to see what happens nearer the time, but it’s important to be aware of this upcoming change and how it may affect you as a user or developer of WordPress.

The concept of Gutenberg is based around ‘blocks’, much like the wooden blocks that children play with or LEGO® bricks, as used in the example image above. You can move blocks around, change what they do and even what they look like, giving you much more flexibility than TinyMCE currently provides. Overall, this new editing experience puts more focus on content rather than on an abundance of settings.

Additionally, Gutenberg orders everything in much neater fashion with meta boxes (settings or options) condensed on the right hand side and the content filling up the rest of the space. Whilst on the surface the interface looks fairly simple, power users haven’t been forgotten. You’ll also be able to finely tune blocks with a more granular approach to options.

The Gutenberg Effect

The effect Gutenberg will have on WordPress sites moving forward is undoubtedly huge. It not only changes the way developers will have to make WordPress sites, but it will also change the user experience. This may, for some at least, cause problems. For example, when editing a heading block, it may not be immediately clear how to convert it to normal text or an image, unless you look closely at the drop-down box with the options at the bottom.

As you can see, Gutenberg still allows you to change the block type into other things, but where TinyMCE would let you just add content and press buttons, you’re given a much more specific route on how to do this and it’s not as straight forward as you may think. Of course there are tradeoffs when comparing to the old editor, but once you’ve used Gutenberg a bit more, you’ll start to grasp its quirks and understand how the user interface is structured.

Once you have finished editing your content, the next step is to publish it! One of the downsides to Gutenberg is that everything is broken down for you bit by bit, so what may seem like an easy action to take can in fact be overwhelming. What button are you looking for here?

Should You Use Gutenberg?

The best thing to do now is to install Gutenberg on your website and get used to how it functions and experience the differences firsthand, before it fully replaces TinyMCE in the coming months. If you’re ready and comfortable using Gutenberg, the transition will be seamless and much easier for you to adjust.

You can install Gutenberg as a plugin on your website right now if you’d like to get involved and test it. Once Gutenberg is ready and merged into the WordPress Core, you’ll no longer need a plugin to use it. Be warned however, it’s currently what’s known as a ‘beta plugin’ which means it’s not necessarily stable and should not be used on production websites just yet.

Alternatively, if you are worried about Gutenberg and whether it will have a negative impact on your website, you can install the Classic Editor plugin to restore TinyMCE. This is the best option if you’re worried about what might happen to your website when the Gutenberg update is applied, or you don’t like the experience Gutenberg will bring you.

The Future of WordPress

It’s too early to tell what the future of WordPress looks like right now, although some discussion has taken place within the WordPress community that moving more of WordPress to a block based CMS is the way forward. This means that things like menus and widgets would become a thing of the past and you would instead use blocks for these sorts of things.

Another important thing to consider is the support of older versions of browsers such as Internet Explorer, or early versions of Chrome or Firefox. Whilst many people have upgraded to newer systems, people using older software won’t be able to use some of the best features which updates like Gutenberg bring to the table. Now is as good a time as ever to upgrade in preparation for the Gutenberg update.

What do you think about Gutenberg and how it will affect your website? Do you like the new design the editing page has taken and the options it will provide to you? Let us know and get in touch if you’re interested in learning more about the advantages and disadvantages Gutenberg will bring.