WordPress 5.0 and Gutenberg

Posted in and tagged as , .

Gutenberg is the new WordPress editor that is going to be enabled by default when WordPress 5.0 is released. In this article, we are going to talk about Gutenberg and the Pexeto Themes. But first, let’s start with a brief history of the default element builder that most of our themes ship with.

The default Pexeto themes element builder

When we were working on our themes a few years back, there weren’t as many page builders as there are today. At that time, Visual Composer had just emerged as one of the first page builders. However, we found Visual Composer sometimes too complicated to use and our goal has always been to create a simple to use interface for our themes. That’s why we decided to build our own elements builder that works with the default WordPress TinyMCE editor. In this way, our themes’ users would keep using the default editor that they were accustomed to, but in the same time that same editor would provide more advanced functionality, allowing them to add more complex elements.

Gutenberg

Fast forward a few years later, WordPress announces Gutenberg. The idea behind Gutenberg is great, since many users have started using different page builder plugins over time, such as Elementor or Visual Composer. A built into WordPress core element builder would allow plugin and theme authors to use a consistent interface to build their custom elements. That’s why we have been following the Gutenberg development closely since the beginning, with the hope that it will be a good fit for our themes’ elements.

Unfortunately Gutenberg didn’t evolve in the way we’ve been hoping to. In the past several months we have been working with Gutenberg, trying to find a way to migrate our themes’ elements to Gutenberg. And we found that a potential Gutenberg integration would most likely cause more trouble than good, especially for existing installations that have used the classic editor to create elements based on the themes’ features. That’s why we have decided to stick with the default classic editor for now.

Some of the problems that we have encountered were:

  • No safe way to convert existing shortcodes to Gutenberg elements. We could not find any officially documented way to support converting nested shortcodes to Gutenberg blocks that we can rely on. Also, for normal 1-level shortcodes transformations, Gutenberg often wrapped the elements in paragraphs, which caused the layouts to appear broken.
  • Gutenberg galleries are stored as HTML markup. This does not allow for the gallery dependent elements (such as posts with a gallery format, multi-image gallery items, some slider pages) to safely detect the images added. Parsing HTML to detect the images is not reliable and WordPress updating the gallery markup in a future update can break the galleries. Also, the themes that overwrite the gallery shortcode’s markup to provide more advanced features (such as masonry layouts, better cropping and lightbox features) will not be able to do that when the gallery is stored directly as HTML markup.
  • No safe way to change elements markup in an update. Similarly to the gallery blocks, Gutenberg stores the elements markup as HTML directly in the content of the post/page. If we need to change the markup in one of the blocks so we can release a new feature or a bug fix, the change won’t be applied to existing elements automatically. You would need to go and edit each page that contains the element manually. A change in markup is also very likely to make Gutenberg not recognize the block as a valid block anymore.
  • Major markup changes will be required. We found that a potential Gutenberg integration would require changing the markup of some of the default theme elements.  We would need to support two versions of the same elements – the shortcode version and the Gutenberg one, which will introduce a lot of complexity and could cause a lot of confusion.
  • The classic editor is more robust and reliable. There have been numerous issues reports when using Gutenberg, such as existing content disappearing, pages unable to save, previews not working, etc. Gutenberg is still in its very early stages and will probably need some time to iron out these issues and become more stable. The classic editor, on the other hand is very stable and would not require you to run any transformations to your existing pages and thus risking to lose content or break the layout. With the classic editor, everything will continue to work in the way it used to.

And more…

There are other things that we are concerned about a potential Gutenberg integration, however our point here is not to go into detail about each of them. All we want to do with this article is provide examples of some cases where things can go wrong and cause problems, so you can better understand the reasons behind our decision. Our point is that no matter how hard we try, it’s very likely that such kind of migration won’t be seamless for you with the current state of Gutenberg.

What all this means for you

With all this said, we believe that creating a Gutenberg integration for our themes’ elements is not safe, especially for those who have built their sites by using the Classic TinyMCE editor. A potential Gutenberg integration could cause lots of problems, including breaking elements and layouts of existing pages and losing existing content. And our main priority is to deliver a best working experience to our users, providing a stable and easy to use interface.

That’s why we have decided that the safer option would be to stick with the Classic TinyMCE editor for now. We have released updates of our themes, that when installed, will prompt you to install the Classic Editor plugin, which is a required plugin for any Pexeto Theme. For you, as a Pexeto theme user, that would just require installing the latest theme update and then follow the admin notification instructions to install the Classic Editor plugin, as soon as it is available and before updating your WordPress installation to 5.0.

This is not a final decision and doesn’t mean that our themes will never integrate with Gutenberg. This is just the safe option that we chose to stick with for now, based on the current state of Gutenberg.

Update 8th November, 2018:

Since WordPress is still going to ship with the classic editor by default, our initial plan was to just make the classic editor enabled by default and not require installing the Classic Editor plugin. However, the WordPress team just announced that the particular approach that we’ve been intending to use is not going to be supported for as long as the Classic Editor plugin and they recommend using the Classic Editor plugin instead. We already released updates of our Mineral, Porcelain and Dandelion themes implementing the first approach, and now after this announcement we are going to release another set of updates for these themes (except Dandelion which is not as reliant on the classic editor) to make the Classic Editor required instead.

Update 12th November, 2018:

Theme updates are now available:

  • Story 1.9.7
  • Porcelain 1.4.0
  • Mineral 1.6.0
  • Evermore 1.3.4
  • Expression 1.4.5
  • Photolux 2.3.9
  • Dandelion 3.1.7

What if you still want to use Gutenberg?

You can still use Gutenberg if you wish to, however you won’t be able to use some of the theme elements that were designed to be added via the Classic Editor. The elements that will still work are the ones that you don’t add/configure via the editor. These include header/slider settings, general page settings (e.g. changing layouts and page templates) and sidebar settings. You will also be able to use all the default Gutenberg elements.

 

Was this useful? 0