fbpx

Don’t make the mistake of ignoring Gutenberg

About Mits Griffin.

My name is Mits Griffin and I am an Intrapreneur who loves to partner with visionary Entrepreneurs and Business Leaders who are on a mission to disrupt their industries with new initiatives and approaches. Together, we strategize, design and set-up the procedures & automations needed to expedite the launch and scale of innovative projects, products and services, so we can create the greatest impact in the shortest possible time.

Don’t make the mistake of ignoring Gutenberg

Table of Contents

Guten-what?

Creeping up on every WordPress.org user when the WordPress platform updates to version 5.0 on the 27th of November – is the release of Gutenberg. Gutenberg is a content editor that will completely replace the current WordPress TinyMCE editing framework. And because it is tagged onto the WordPress update itself, it will affect every updated WordPress site throughout the world. If you have a WordPress site updated to WordPress 4.9.8, you will have seen a notice regarding the change-over to Gutenberg in your dashboard. Don’t make the mistake of ignoring it because Gutenberg is most certainly coming – and it could change everything.

Coming whether you are ready or not

Inspired by Johannes Gutenberg – the inventor who developed a method for a movable printing type that revolutionised the printing industry – Gutenberg is being introduced as the latest WordPress content editor. A content editor is the way by which you add text and graphics and content to your website. And when WordPress updates to 5.0 every updated site will have Gutenberg as its default editor.

Although nobody can say exactly when the change will happen, it has been anticipated throughout 2018. And at the time of this blog post (October 2018) there’s not so much of 2018 left. When it happens, every WordPress user will have to decide the future of their website. And perhaps the best way of deciding what you would like to do, is understanding the background of what is happening and why.

The potential to change everything

Despite being the most powerful and flexible open source and free platform out there, creating a website in WordPress has always been a little – arduous. With the WordPress TinyMCE editor, you can manipulate and edit your content in a manner like an old out-dated Word Document which is a far cry from needing to code. But a knowledge of short-codes, HTML, CSS and JavaScript, often separates out the novices from the pros. Despite that being a stumbling block for many, WordPress still powers around 1/3 of the world’s websites. That’s over 77 million sites. And there are many reasons for that. But sadly, non-techie ease of use, hasn’t been one of them until now. Meet Gutenberg. The editor hoping to leapfrog WordPress into the future.

The notion of blocks

You might not realise this, but every website page is defined by its own HTML file. And like most big things, it can be hard to navigate through, and even harder to change one specific part without messing up the whole. Unless of course, you split big things into smaller things. And that is exactly what the Gutenberg editor does.

Photo by Christian Fregnan on Unsplash

Rather like LEGO, Gutenberg is based on the concept of blocks – but digital blocks that can be moved around and edited to create something much more complex and unique. Each block becomes a unique entity, that can be manipulated without affecting others. Different blocks can have different properties. So, some can be static and unchanging in their content, while others might be dynamic and open to updates. Blocks can be re-used and duplicated in a click – and because we are in the digital realm – blocks can even be put into other blocks. And when a block can be anything, anything can be possible.

You can have text blocks and image blocks, button blocks, quote blocks, embedded content blocks, table blocks, and even widget blocks (that previously could only be placed in website sidebars and footers). And because WordPress is open source (meaning anybody can access its nitty gritty code) any developer can create a block with whatever functionality they like. instead of editing your content like one huge document every page or post, can be separated into its creative parts – titles, paragraphs and graphics.

But isn’t that how things work anyway?

If you’ve experienced other web-building platforms, or WordPress page-builders like Elementor, Divi and Beaver-builder, the concept of smaller building pieces like sections or elements, isn’t ground-breaking. Page builders have been harnessing this for years. But with Gutenberg, WordPress itself could be transformed.

The challenge that page-builders face is the requirement to fit in with WordPress code. Gutenberg could potentially be WordPress code. And although Page-Builders are limited to editing the content within your website pages and posts, market leaders like Elementor allow users to edit site headers and footers (the top and bottom banner areas of a website), the dream is to be able to customize every part of a website without hassle or problem. Gutenberg could be a comprehensive way to do just that.

Using blocks for every part of a site would make it visually adaptable no matter what the technology of the future brings. In this day and age, webpages follow an assumed layout (comprising logo, title, menu, content, footer, etc…) that this layout fits into a rectangular space. But the assumptions of such layouts might fall away as we move into new ways of experiencing the web (such as in augmented and virtual reality). This would be a new chapter in website design and build, and Gutenberg is already thinking So, although Gutenberg is being introduced as the latest WordPress content editor, Gutenberg is much more than that. Gutenberg is a concept, begun in 2013, that has the potential to revolutionise WordPress. And since WordPress dominates the web-building industry with over 77 million websites to date built with it, it has the potential to impact everything else in the web-building realm.

A tale of two options

Although vision might feel a little utopic the process never is. And there is huge debate in the WordPress community concerning the what, how and when of Gutenberg. And despite the potentials, Gutenberg is being launched rather tentatively – as a plugin (a WordPress add-on) to break the waters.

The Gutenberg Introductory Message

This means that WordPress users will have two options when WordPress 5.0 arrives. To ignore and by-pass all things Gutenberg (at least for the time being) or to jump right in and transition over to Gutenberg. Sadly, whichever route you decide on, there will be consequences for the immediate future – and it all might feel a little like swings and round-abouts. Let us tell you why.

Ignoring Gutenberg - at least for the time being

If all you have ever used is the TinyMCE editor, or if you have harnessed page-builders to create your pages instead, you could take a bet and keep travelling down that track – at least for a while longer. It is possible to ignore Gutenberg for the time being and even when WordPress 5.0 is released, all you would need to do is over-ride the Gutenberg plugin by installing and activating the classic-editor plugin. But, be warned. This might not stand as a long-term option. The classic-editor plugin was never meant to be for the long-term solution so, although functional, it could raise other issues later.

But installing the classic editor, will certainly buy users a bit more time. You won’t have the immediate hassle, or risk, or expense of transitioning or re-building your website, and there’s always a chance that you may never have to. Pro Page Builders will be navigating this change too and for certain, the first default version of Gutenberg won’t be as sophisticated. It is possible that Gutenberg could never replace Pro Page Builders. But it’s possible it could.

Gutenberg will most certainly evolve. And because of the open source nature of WordPress anybody can contribute with code. There will be countless Open Source developers who could fill in any voids and it has already been said that some of the best developers in the WordPress community are working on Gutenberg. It is possible that the Gutenberg of the future could supersede all that we’ve known – and fast with the myriad of people surrounding it. 

And most importantly Gutenberg will be installed by default on millions and millions of websites. It will be THE WordPress editor, and it would be prudent for all developers to make certain that their work is compatible with Gutenberg. This fact alone, is huge. Never has there been a call for different developers to work to a common framework that goes beyond WordPress core code. And this common framework will be Gutenberg. Gone will be the pain points of code conflict, and if all developers begin to create code that is inherently Gutenberg compatible – Gutenberg could become the most comprehensive Page Builder of all. 

Because of this, Gutenberg could dominate the page building world and Page Builders could indeed become extinct. Sites built on past technology will break and die, unless Page Builders evolve in such a way that the past can be maintained or gradually updated. However, it’s also true that Gutenberg and Page Builders could coexist. Gutenberg is being launched as a content editor which is actually different from a page builder.

What would happen if you ignore Gutenberg? For the short-term, not much. For the long-term, your site could become incompatible and could then require extensive development to bring it back online.

Taking the plunge with Gutenberg

With the eventual goal of Gutenberg to go beyond content editing, or template creation to full site customization, there is the potential for Gutenberg to become not just the WordPress editor, but THE WordPress Customizer. And with that in mind, it could be tempting to transition over to Gutenberg in a slight panic.

However, there are issues. Perhaps the most important one is that Gutenberg is just in its Beta stages. And although there are a myriad of developers working on Gutenberg – it is a work in progress. If you have a site that is crucial to your business, breakages at any point can be devastating and transitioning over to Gutenberg will mean the re-development of most sites. If you do want to make the move, holding out until Gutenberg is formally released and settled, would be safer.

What would happen if you transitioned over to Gutenberg? In the short-term, you might need to re-build your website and until established, there could be risks and unforeseen issues. Until Gutenberg is officially realised for commercial sites, everything from themes to plugins will be transitioning and could become unstable in the process. But for the long-term, you might have less developmental work (and expensive) to face in one go later.

Test driving Gutenberg

If you have the time, energy and inclination, you can pre-test Gutenberg before it is officially released. All you need to do is install and activate the Gutenberg plugin and take it for a test drive. And that’s exactly what we did here at Mitsgriffin.

Nobody recommends testing Gutenberg with a live site which can be tricky if that is all you have. But because we are developers we thought it would be fun to re-create our home page using Gutenberg so you can get a sense of it what it is like without you needing to risk yours. And this is what we discovered.

Recreating our front-end home page

While Gutenberg is envisioned to work with any WordPress theme (just like the current WordPress TinyMCE editor), choosing a theme that specifically offers Gutenberg compatibility will offer some immediate benefits while everything is in a state of flux.  Needless to say our theme is not specifically Gutenberg compatible (like most). So things might seem a little crude. But because our mitsgriffin hero-section (cover image) is controlled by the Theme and Customizer, it doesn’t take too much to recreate it whatever editor you have. You might notice it’s not exactly like our actual site because we were a little crude in our experimenting, but it could be with a few simple tweaks and apologies should you ever read this blog any time after we might have re-branded:

Mitsgriffin Hero Section Oct 2018

However, the more intricate sections were much harder/impossible to re-create exactly using Gutenberg (or at least with the Gutenberg version we had access to). Gutenberg’s ability is limited compared with most Page Builders, and to fine tune design aspects you would need to go into its CSS code (which you could and what we would typically do). But without coding tweaks, you can see that Gutenberg is pass-able(-ish):

Original features section of the mitsgriffin website
Recreated features section of the mitsgriffin website using Gutenberg
Original mitsgriffin testimonial section
Recreated testimonial section using Gutenberg
Recreated testimonial section using Gutenberg

When you get into much more intricate design structures, Gutenberg performs less well than the competition which could be frustrating if you have something specific in mind:

Original mitsgriffin opt-in and contact forms
Original mitsgriffin opt-in and contact forms
Recreated opt-in and contact forms section with Gutenberg
Recreated opt-in and contact forms section with Gutenberg

If you have a simple website, you could transition to Gutenberg at the release of WordPress 5.0 without too much problem. However, to create something a little more specific or unique is currently tricky. Gutenberg is not as developed – and understandably, pre-Gutenberg plugins (like the form on our site) are not Gutenberg compatible. So, these would need re-working and already there are more and more Gutenberg plugins getting launched.

The back-end of our recreated home page

In terms of the back-end of a site where the nitty gritty gets done, the TinyMCE editing framework was a far cry from needing to code in your website content. But Gutenberg certainly makes the TinyMCE editing framework feel dated and clumsy:

The WordPress TinyMCE editor
The WordPress TinyMCE editor
The WordPress Gutenberg editor

But this is how our content looks as code, in the TinyMCE editing framework and in the Gutenberg editor:

Coded version of part of our Homepage
Coded version of part of our Homepage
The TinyMCE editing framework
The Gutenberg Editing Framework

Gutenberg is much more WYSIWYG i.e. What You See Is What You Get (pronounced we-see-wig). NB. WYSIWYG is actually a technical term and not just developers being cute and fluffy – which I admit was what I use to hilariously think GRIN. Instead of content being listed, it’s actually separated out into sections and columns. In the figure one Gutenberg block is highlighted by a blue border and when you hover over others blocks they will highlight in this way too. But really at this stage, Gutenberg can’t compete with Pro Page Builders like Elementor which are incomparable on the WYSIWYG front because what you see in your back-end editor, is really pretty much what people see as your front-end website:

The Elementor Page-Builder Editor

The million dollar question

The big question WordPress users must consider, is whether to eventually transition over to Gutenberg or not. If you decide to move forward with Gutenberg, then you will need to consider when. It might not be immediately, but there could be a clear pull in a few years’ time. If you don’t – and if enough follow that path adamantly – it could force WordPress to split into two developmental tracks which might not really help anybody. Or you might find yourself abandoned as WordPress pushes ahead with a Gutenberg-centred future without you. Important to note is that the WordPress Core team has committed itself to officially supporting The Classic Editor plugin until the 31st of December, 2021. And then, you would be on your own.

Here at mitsgriffin, we will most certainly switch to Gutenberg and transition all our clients sites over too. But not immediately. And we appreciate that it’s one thing to know what Gutenberg is and another to have experienced it. Because not everybody can, our next blog post will take you behind the scenes in greater depth. Then you can have a look at Gutenberg from the inside out and see what a developer sees. 

With so many questions and possibilities, it can be tempting to ignore Gutenberg. It’s true that there has been the fear that Pro Page Builders will become a thing of the past, but perhaps they won’t. And it’s true that Gutenberg might have the potential to herald in augmented reality websites, but maybe it won’t. Either way, change has a cost. And there is always the hope that with great change comes great potential. But whatever happens Gutenberg is coming. If you have a WordPress site don’t make the mistake of ignoring it. And we hope that when the time comes you will feel confident in deciding which path to take. 

GET IN TOUCH & Explore what's possible