The Guten, the Berg, and the Ugly

Or: How I learned to stop worrying, and love like accept Gutenberg.

For those not in the loop, Gutenberg is the controversial new editor for WordPress. Despite not using WordPress on this blog, for reasons poorly explained elsewhere, I do use WordPress for client work. With Gutenberg becoming the default editor in the fast-approaching version 5.0 of WordPress, I figured that I should install the plugin version, and at least try to understand what it’s all about.

Why a new editor?

Because the old editor is crap.

Ok, now that I’ve offended everyone, it’s not crap, but it’s also not sufficient for building and maintaining complex pages. It never has been, unless you’re a developer who’s comfortable with switching into ‘text mode’ (i.e. not using the old editor), or you install and use one of the many “Page Builder” plugins (e.g. Divi, WPBakery, BeaverBuilder, Elementor, etc.)

The old editor was designed for creating basic posts, adding a little styling, and maybe a few images. It’s not really a WYSIWYG (What You See Is What You Get) editor, but for the time when it was created, it was pretty good. Unfortunately that time has long since passed, and now we’re in an era where WordPress sites are more complex and flexible than ever. It just can’t keep up.

Enter Gutenberg

The WordPress core team decided to do something big. They created a brand new editor from scratch – more page builder than text pad, but still flexible and easy to use. At least that’s the goal. Without being able to get immediate user feedback, and without being able to explain their mission well, we’ve ended up with something that’s kind of like a page builder, but just for the content bit of the page. If the user reviews for the “plugin” version of Gutenberg are anything to go by, this is a huge mistake and WordPress will regret it. But those reviews are based on old versions, and people unhappy with change, so how well do they reflect what Gutenberg is actually like?

The Guten…

It’s pretty slick, and the learning curve on it for the basics is almost non-existent. You start typing, hit enter, change a block to something else, and it all just works. The editor, by default, supports a lot of different types of content, and you can add more content types in through plugins and custom blocks. Every time I’ve witnessed a public demo of Gutenberg, there has been “oooohs” and “aaaahs” from the audience. What it does well, it does really well. The ability to “break out” into wider or full width content on a block is great, providing your theme supports it, and I really like the ability for plugins to provide meaningful content that actually appears in the editor, unlike shortcodes.

For example, you can add a gallery, and actually see how it would look with your content. You can add WooCommerce products to a page, and see instantly if they’ll overwhelm your content. YouTube, Vimeo, Twitter, etc. posts all just appear in your editor when you add them, and you can build your content around how they actually look. There’s even a block for adding columns to your page, so you can have side-by-side content without using a table.

What’s even better is that the output for all of these things is really clean, simple HTML. You can attach your own classes to blocks fairly easily, and have control over how they appear on the front end through your normal CSS rules. What has been achieved is really quite amazing.

However, this post isn’t “The Guten, the Guten, and the Guten”.

The Berg Bad…

Everything just works… most of the time. Due to the nature of the block editor, sometimes it’s really difficult to select the block you actually want to edit. Columns in particular are really clunky to edit, and don’t cope well with responsive designs. A lot of blocks have basic ways to add extra styling, and a few layout options, but you’ll find yourself writing a lot of custom CSS just to get a simple page element to look right.

The other problem is shortcodes. There is a shortcode block, which provides support for those plugins which don’t yet have a Gutenberg block, but if you’re using shortcodes inline with text… you’re gonna have a bad time. Gutenberg is trying to move away from shortcodes, and there’s a fairly good reason to do so – it’s really hard to manage your expectations for what content will look like when a short snippet of text turns into a massive page element.

Next comes theme development. In the past, you didn’t have to worry too much about supporting a bunch of different content types in your theme, but now you do. You have to style all of the different types of blocks, declare support for various Gutenberg features, and even add editor styles just so that the Gutenberg editor is wide enough to actually use. There’s a lot more work involved with building a theme for Gutenberg compliance, and while I’m sure it will improve once Gutenberg is the editor, there’s not a great amount of support for it in starter themes, or just in general. I even encountered problems where a theme managed to break Gutenberg entirely by filtering JavaScript out of the page.

The Ugly

The ugly side of Gutenberg is the FUD that’s being spread about it, and the lack of corrections coming out of the team responsible for it. For example, certain page builders and themes are claiming that even the act of installing Gutenberg will break your site with no hope for recovery. This simply isn’t true.

Gutenberg is an editor, so it won’t affect any existing pages or posts until you edit them with Gutenberg. Even then, it will, by default, put all of the content in a single block – the “Classic Editor” block. This means that all of your content will still be managed by the classic editor, even inside Gutenberg. You can change your content to be managed as Gutenberg blocks, which will convert it automatically for you, but your hand isn’t forced. Page builders will also likely continue to work as normal (at least they do in the current version of WordPress with Gutenberg installed), and you’ll have an option on each post and page for which editor you wish to use.

Another topic that comes up is accessibility, and this is a major concern. As it stands, Gutenberg doesn’t actually meet the accessibility standards for an editor. This doesn’t mean, however, that your site will no longer meet accessibility standards for your users. The editor is just that – the editor, and the content that gets shown to users is just HTML, like any other editor.

Acceptance

So how have I been approaching Gutenberg? With cautious acceptance. All new WordPress projects that I’ve started in the last few months, I’ve started with Gutenberg. I’m not doing this because it’s the best option, but because it’s coming whether I like it or not, and I don’t want the stress of retraining clients after the 5.0 switchover happens. It’s forcing me to learn the system, and get used to how it looks, feels, and works in practice.

I’m taking the effort to learn the process, how to deal with templates, and how to shoehorn capabilities into premium themes through child themes.

Going Guten Free

If you really don’t want to use Gutenberg, even after WordPress 5.0 comes out, there are options. The classic editor won’t be removed from WordPress for quite some time – Gutenberg is only available for posts and pages, while everything else (plugins included) that used the classic editor will continue to use it.

There are already plugins which make Gutenberg optional, or entirely disable it, but past 5.0 every new installation of WordPress will roll out with Gutenberg front and centre. There’s even a project called “ClassicPress”, which is a fork of WordPress, only without Gutenberg (however I wouldn’t suggest anyone switch to this, as they’ve already announced that they’re going to diverge from WordPress, which will leave them incompatible with a lot of plugins).

Final thoughts

Gutenberg has suffered from being untested by the public. Not the developers and power users who are curious enough to try it out, or who already believe in the mission; it hasn’t yet been properly tested by the users who will actually have to use it. When 5.0 drops, it will get the testing that it needs, and I expect that it will very quickly become the editor that WordPress deserves.

Gutenberg is coming and the worst thing to do, especially for developers, is to let it catch you unawares. For customers, you need not worry – all our projects come with the KingComposer visual builder. For existing customers who have had their site built pre April 2018, get in touch with us and we’ll upgrade your site – for FREE.

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href=""> <abbr> <acronym> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Contact Us