Gutenberg is almost here, are you ready?

04/12/2017
Technology

First of all… What is Gutenberg?

Named after the revolutionary printing press, which in turn was named after its inventor Johannes Gutenberg, it’s here to change the way the world’s most commonly used website content management system, WordPress works. If you work with WordPress professionally, whether you’re responsible for content, working as a web designer or as a developer, your life will be affected by Gutenberg.

Here’s how it all started…

We Called it Gutenberg for a Reason

WordPress’ 4.8 release laid the groundwork for a new content editor, Gutenberg, and during WordCamp Europe 2017 it was presented as a plugin that can be already installed and tested. Developers seized the opportunity to use the plugin for new editor testing already in their projects. Despite the great idea, the plugin received quite mixed reviews and feedback. The WordPress community divided to those who don’t want to include Gutenberg to the WordPress core and to those who see the potential but believe that it should be improved drastically still.

For a more detailed backstory, please have read on Matias Ventura’s blog.

What’s all the fuss about?

In short, Gutenberg will introduce a new, fresh, intuitive and user-friendly interface. The goal is to transform content editing to become easier and more convenient. The new system will be replacing the old content editor we’re all familiar with. The existing editor, called TinyMCE, required various 3rd party plugins to extend even the most basic functionality. The main concept of Gutenberg is to replace the classic editor with blocks, which are draggable and flexible for editing. Content editors would ideally be able to focus on content creation, content structure and its location instead of thinking how their page would look after the publication. If you’re familiar with how Medium works, this is more or less of a copy from that.

Below you can see the current classic text editor and the new Gutenberg editor for comparison:

 wordpress_classic_editor_pixels

wordpress_gutenberg_editor_pixels

As you might notice, the Gutenberg editor has a + button, which opens up the menu for block elements such as headings, images and new paragraphs. Any custom blocks you might need will be included here most likely.

wordpress_gutenberg_blocks_pixels

Classic WordPress Editor

WordPress will most likely soon have Gutenberg as the main editor (aimed to launch in WordPress 5.0). Considering the amount of negative feedback, though, many developers wouldn’t want to use the editor before majority of the bugs are fixed, and/or they’ve had a chance to have their sites using meta-fields comply.

A new plugin, called appropriately ‘Classic Editor’ has been recently announced for this exact purpose. It returns the classic editor to WordPress, which we predict will quickly become one of the most popularly used plugins on WordPress for several months, maybe even years.

Open-source drama

Gutenberg is built on a JavaScript (JS) framework called React. Flexible JS frameworks are great platforms nowadays to build web applications, however, for a moment it seemed like Gutenberg would need to be completely rewritten due to licensing issues. You see, React is created and owned by Facebook.

WordPress, as you probably know, is open source and is very strict about keeping it that way. And they should be! It’s one of the key factors in WP’s immense success and popularity.

Facebook recently updated the license for React to BSD+Patents, which made it impossible to use React in open-source projects. That’s when Matt Mullenweg, the outstanding WordPress developer, announced in his blog that WordPress in no longer using React. Developers were quickly discussing the other opportunities among JavaScript frameworks and Vue was strongly considered to be the new framework for Gutenberg.

Possibly, the actions of the WordPress community influenced a change in the React license decision. Facebook announced that the React license is changed to MIT in the React 16 release. After that Matt Mullenweg confirmed the official support of React in the Gutenberg project.

What does Gutenberg mean for us WordPress developers?

Firstly, a major concern behind Gutenberg is allowing freedom to customise page layouts flexibly in the admin UI. Thus, the possibility of a client accidentally (or intentionally) destroying a website design is surely increased. To tackle this issue, the Gutenberg developers state that Gutenberg will have the possibility for having a fixed design, which means the quantity and location of blocks on certain pages can be fixed. It sounds like a solid solution, but no one knows how exactly the fixed design will work and if admins can control it to some extent or not.

No meta-fields?

The million dollar question is this: Will ACF be needed anymore? (Or Carbon Fields in case you’re using that.)

Many, many, many sites are done based on meta-fields. Unfortunately, they have not been developed in JavaScript (Gutenberg is built on React, which is a JS framework). This has stirred a lot conversation in the WordPress community. The main concern being how to deal with it, especially when such popular plugins as ACF and Yoast SEO would not work as they did before.

To answer this problem, The 1.5 Gutenberg release has received a basic support for meta-fields in Extended Settings, which is located under the post content. Apparently, this is the first step to meta-fields support and we will see the improvement of Extended Settings in further releases.

We’re really interested to see if Gutenberg will fully replace ACF / Carbon Fields in a few years.

A common standard

Gutenberg changes are forcing developers to create pattern libraries. A lot of developers are already doing this, so it’s nothing new in that sense. This change however forces everyone to comply to a “common standard”. Every block that is located in the editor should have custom design even if it’s not supposed to be used in the first place. On one hand it increases amount of work for designers and developers, on the other it keeps the website design coherent, no matter which block the customer is planning to use.

At its current state, the editor is outputting inline css code on the front end, which is a big minus for development. Developers really need to look around for a way to walk around this because their styling could be overwritten by the inline css from Gutenberg.

Developers, whose income is dependent on their clients constantly requesting them to do minor changes on their sites, will most likely have a harder time siphoning money for trivial things. Which I believe is a big benefit for the whole industry, especially for the clients.

Documentation is key

Let’s be honest. Gutenberg is not documented well so far. It means that developers need to explore it themselves, spending nights on things that could have been done within hours. Definitely, proper documentation is just a matter of time and it will appear soon enough, but until then, all learning needs to be done via trial and error. Because we all want to understand how it works before it rolls out with WP 5.0, am I right?

So, should you use it for your WordPress sites?

There is a very high chance that Gutenberg is added to core with WordPress 5.0 some time (early-mid) next year. It’s your choice to use Gutenberg or not, as you can use the Classic Editor instead. If you’re thinking of converting an existing site to be “Gutenberg-friendly” it’s probably not totally worth it. Depends on the site of course. With new sites, however, once it’s solid enough, Gutenberg might be really interesting to try out.

We at Pixels believe that Gutenberg is definitely a good update, but it needs further development. The whole community is waiting for descriptive documentation and so are we. We will definitely use its cool features in our projects when the editor has matured enough. How meta-fields and ACF will work (or won’t) will most likely determine how quickly most agencies will adopt Gutenberg, and the same goes for us. We’ve got high hopes, though. 🙂

 

Got thoughts of your own? Shoot us a message on Twitter!