Hello reader, this article is the mirror of my presentation at WordCamp Bucharest 2018, and if this doesn’t make sense while reading it, then it did while I was spoking these words.

As you can see from the title I want to talk about Gutenberg and how can we survive after WordPress 5.0  version, which may come in November.

I will split this presentation in 4 chapters:

  • First, we need to find out why do we need Gutenberg
  • Some comparisons between before and after Gutenberg.
  • Then a few words about how we can have an easy transition.
  • And some conclusions at the end

Why do we change the WordPress content editor?

I think that we need an honest answer to this question because it brings a lot of struggle and it forces many people to get out of their comfort zone, including me having this presentation.

Some of the reasons that I can think about:

  1. Right now WordPress uses TinyMCE,  and the first version of TinyMCE was released in 2004? It is still a good editor, but it’s the same editing experience since the first version. I won’t say that this is a strong reason for a change, but it’s on the list.
  2. Maybe because other blogging platforms improved their editor? Take a look at Ghost, Medium or other premium platforms and you will feel that WordPress has felt behind.
  3. Another timely reason is that WordPress uses the same concept of editing for 15 years already, and in the web, this may feel like a hundred years.  Nowadays we have better programming languages, better frameworks, better design patterns and maybe is time to change?
  4. All these answers above are very weak in front of the last one: The content type nowadays has changed. The message that we want to publish is more complex and with time will get even more complex in the future.

I like to imagine that in the past, the first form of remote communication was the spoken word, but at some point, the messenger came and said: “Hey, can you write down your message? because I cannot remember the entire story.”

This way, our message got too havey to cary and with time we evolved to books, newspapers, emails and blog articles and our “letters” became very creative from a visual point of view.

But now we are not satisfied with blogging letters right? Nowadays the content is so diverse, we are not handling only text and images anymore. We want to use emojis, galleries, embeds, tweets and other formats like food recipes, maps pins, contact forms and videos. I guess that it’s hard to put a video inside a letter, but it’s not impossible, this is how the cartoons are made.

In my opinion, we need to change the editor because we are not writing only paragraphs anymore, we are writing block types, and every time WordPress tried to implement a way if inserting custom content it failed at doing it in a scalable way.

I think that shortcodes failed in this manner, they are meant for developers rather than users.

Also, meta-boxes were used in this purpose and they didn’t succeed either.Like  page builders plugins I honestly cannot say that they succeeded, maybe they did only for some people.

“Some people” is not enough for our mission. As you may know, the WordPress mission is “democratize publishing on the web”.This means that WordPress is trying to offer a free way of publishing for everyone.

When I say “everyone” it might not have the same meaning for everyone. I often hear this sentence: “But Andrei, if you want flexible page layouts, just install X plugin” and this is not for everyone, this is just someone who installs a plugin.

Let me put this in another light: If you ever had the chance to buy a plugin, a theme, Grammarly or anything that helped you to write better content than you are privileged. Sorry for the spoiler, but I don’t mean this in a bad way like you have been spoiled or something; I mean that you have been privileged with opportunity, you had the possibility, on your own fair money to do something extra than others.

This is not what WordPress is about, WordPress is about providing a good way of editing content from the start, from the first fresh installation without any plugin.

But enough with my opinionated thoughts, let’s get to some comparisons.

Before and After WordPress 5.0

I will start to compare how we did some things in the past before Gutenberg and I will present you some scenarios on how we will do the same ones after WordPress 5.0

The basic content

By “basic content” I mean everything that we can write and handle in a WordPress instance without any plugin or custom theme installed.

Before, and by the way, I’m going to say before and after a lot, before we had TinyMCE with just one big textarea, with format and style controls in the top bar.

After WordPress 5.0 we will have multiple text-areas with individual controls for each of them, and we can call them blocks. As users this is great because we can reorder them, we can convert from block type to another, and we can focus on one thing at the time.
As developers, this is also a win because we now have control via API over each piece of content.

Backward Compatibility.  I think that the Gutenberg team did a good job for here. Don’t shoot me yet! I’m talking about the basic content that WordPress can manage nowadays without any plugin or custom theme installed.

If you are using WordPress as it is, don’t worry, Gutenberg will not break for you( All the problems are somewhere else). I’ve personally tested it and I know that Gutenberg team worked very hard to ensure a safe transition.

Shortcodes

A shortcode is the oldest form of a block type and we can see that from how their source look like.

  • Before we had the brackets; After we’ll have the HTML comment syntax.
  • Attributes will have the same form.
  • Shortcodes and block types can be inline, self-closed or with starting and closing tags, with content in-between them.

Backwards compatibility. Unfortunately, there is not automatic way of converting you custom shortcodes into Gutenberg blocks, but at least the process is simple and more standardized.

From this standardization the user will win. Because before, every shortcode plugin did the user interface in their way, some better than others.

From now on, all the blocks will be available in one panel, organized on categories, easier for users to search them in an accessible way.

Content layout

For the content layout we will have another win because, before, in TineMCE, the content is managed inside an iframe which basically means that we have a browser window inside another browser window with many limits between them.

Because of this, it was very hard to add an editor style, and make the editor look like the article’s front-end

And you can say that Gutenberg will not be a front-end editor either, but at least is getting closer. And actually, Gutenberg team leads already confirmed that we will have a phase for this too, in the future and maybe we will get a front-end editor after the merge with Customizer.

Saving process

A few words about the save payload; Right now when we are saving an article we are submiting a form with the entire page data to the server. Also, when we are modifying a metabox value, or the category we are doing the same.

In the modern web practices, this is a bit old, and Gutenberg is fixing it by using a thing that WordPress has from 4.7 version: REST API.

With REST API we can send small JSON requests only with needed parts of data.

I will take a wild guess, I think that hosting companies will love this change because it will save a lot of resources.

Metaboxes

Before we used the meta-boxes as an alternative to handle dynamic content. I’m sure that you know, every time we tried to implement a slider or a Hero image feature, in the majority of cases we picked a meta-box for it.

After Gutenberg we have the chance to decide which features are exactly meant to be used in the right sidebar context and which meta-boxes were actually pseudo-blocks-types.(Yeah, I’ve made a new word).

I think that Yoast did the best job at transitioning to Gutenberg. Is true that they worked on Gutenberg plugin, and we need to pay respect for that; They also showed us how can we convert an old meta-box into a nicely pinned sidebar with sidebar API. Plus, that they are blogging openly about it so we can learn from their experience.

Another great example is the latest Advanced Custom Fields update, which shows us that even a big and complicated meta-box framework can find some reasoning in Gutenberg.

Also, Elementor announced this week their integration with Gutenberg.

Transition process

The transition process is different for each of us. I know that it’s harder for some developers but I really want to convince you that is a good change and Gutenberg will force us to embrace modern tools like React, Redux, Webpack bundling, e2e testing, docker usage etc.

It is just a learning process and it’s nothing that we didn’t do before.

I can give you myself as an example, I was a PHP developer and I just embraced this JavaScript development environment with a positive attitude and an opened mind. Right now I would rather take a JavaScript task before a PHP one.

Recently I saw this tweet from Rich Tabor, the founder of TeamBeans and the author of CoBlocks plugin.

It makes me happy to see many PHP developers adopting JavaScript because now we will have more developers with a full vision over the web, both on browser and server side.

My bet is on Gutenberg, oh, and about betting, recently I saw a presentation by Kyle Simpsons, the author of the You don’t know JS series. The title of the presentation is Keep betting on JavaScript where he talks about how he was betting on JavaScript in the beginning times but the majority of people were saying that JavaScript is a bad language, Javascript will die young, and many people were betting against it.

I don’t want to copy his speech, but I feel like this is happening to Gutenberg right now and all that WordPress needs right now is an audience with a critique eye which loves to give feedback, rather than an wave of hate.

Conclusions

As a conclusion I want to say that nice better things are coming in our community.

If you are a WordPress user, a better user experience is coming for you.

If you are a developer more interesting work is coming for you.

If you work in support, well good luck…I’m joking. I really think that customer service experience will get better with Gutenberg because with the sidebar API, your development team will be able to provide you with better-embedded tools, better analytics, maybe live support inside the editor.

Proudly created with Gutenberg