What is the New WordPress Block Editor: A WordPress Gutenberg Guide

If you manage a WordPress website, you probably noticed the warnings and additional editor plugins that were being promoted over the last year. For a while, there was a Gutenberg editor plugin that would help you to “test” your website. But as of December 6, 2018, WordPress 5.0 and later will use Gutenberg as the default content writer for WordPress. And as a “block editor”, boy, is it different.

Whether or not you’ve updated your site to WordPress 5.0 yet, you’re going to need to learn how to use the blocks and the editor’s other features, to create content on your site. And you might want to make sure you read this through before you jump into that WP5.0 update, because this has a pretty significant impact on your site.

There’s some debate about whether this editor is the “future of website creation” or just a “nail in the coffin for WordPress”. It certainly seems that WordPress came about this drag-and-drop editor well after so many other drag-and-drop editors were popular. So perhaps it was a bit reactionary. However, it does make for some interesting discussion and it definitely allows for a more intuitive experience for newcomers to WordPress.

In this article, we’ll go through the following:

  1. What is Gutenberg?
  2. What does Gutenberg do?
  3. What does Gutenberg change in WordPress?
  4. Pros & Cons of Gutenberg
  5. Accessibility of Gutenberg
  6. Understanding Compatibility Issues

1. What is Gutenberg?

Named after Johannes Gutenberg, who invented the mechanical printing press, Gutenberg was introduced to the world by Matt Mullenweg at WordCamp Europe in 2017. Gutenberg is the new default WordPress editor, in a drag-and-drop “block” editor style much like Wix, Divi, or Visual Composer. It claims to simplify website creation and editing for the average non-technical user.

Gutenberg replaced the WordPress TinyMCE editor (also referred to as the classic editor) as the default WordPress editor in WordPress 5.0. While Gutenberg was the official name while the editor was under development, it’s now just “the WordPress block editor” or “the WordPress editor” because it’s officially part of the core software.

The old WordPress TinyMCE or Classic Editor.
What it looks like in the new WordPress block editor or Gutenberg.

It’s not just aesthetic changes, though. The block-based approach to content is a whole new editing experience, with the eventual goal to have the block editor go beyond posts and into page templates and ultimately, full site customization.

Haven’t updated your site to WordPress 5.0 yet? If you’re worried about Gutenberg breaking your theme or plugins, install and activate WordPress Classic Editor plugin first. Then update your WordPress so you have the latest for performance and security reasons. Just bear in mind that Classic Editor will probably be phased out in another year or two, so you’re going to have to get used to Gutenberg sooner or later!

2. What Does Gutenberg Do?

Gutenberg is more than just an editor because it allows you to handle website content in customizable chunks, or blocks. You don’t need to be fluent in HTML or write shortcodes, and you can control a website’s entire layout (back and front ends) from a single console.

What’s a block?

Well, a block can be pretty much anything. For example, you can have blocks for:

  • Regular text
  • Images
  • Video embeds
  • Buttons
  • Widgets (yes, those same widgets you use in your sidebar or footer)
  • Copy and paste links for embeds
  • Add excerpts for subheads
  • Third-party blocks from plugins

And because each block is “separate”, you can also add things like custom backgrounds just for specific blocks. In general, it gives you more flexibility and in-depth control.

3. What Does Gutenberg Change in WordPress?

The sole purpose of the Gutenberg editor is to provide an alternative to the current open text editor, not to mention the difficult-to-remember shortcodes, with an agile and visual user interface (UI).

In short, Gutenberg doesn’t change how WordPress functions. It does, however, change the way website owners (or creators) interact with it.

So Gutenberg is like a page builder?

Well, no actually. It does make it easier to style regular content like blog posts or standard pages, but it’s not a great substitute for page builders – at least, not yet.

Gutenberg attempts to combine the best features from both page-builder plugins such as Divi and Visual Composer, as well as do-it-yourself platforms such as Medium, Wix and Squarespace. So, just like those page-builder plugins, you can handle multi-column layouts through a single interface.

Does this spell the end of plugins such as Divi and Beaver Builder? My opinion is no. In fact, you can not only continue to use those plugins but I would actively encourage you to do so. Keep reading to find out why.

4. Pros & Cons of Gutenberg

PROS

  • No technical skill is required to make a custom layout for a blog post or website. User-friendly editing experience.
  • Blocks allow non-developers to create complex layouts.
  • Gutenberg editor itself works reasonably well on mobile.
  • Increased screen space can offer a less distracting user experience for many developers.
  • Developers can create customized reusable blocks using HTML5.

CONS

  • Doesn’t support responsive columns.
  • Backward compatibility is a primary concern for developers. It can destroy current themes and plugins, especially ones that require integration with TinyMCE.
  • Can’t design sites to be mobile-first (unless you’re using a theme specifically designed for it).
  • Accessibility with Gutenberg has actually regressed from Classic. Read more below.
  • For average users and non-developers, it’s kind of like putting Wix into WordPress, but without the performance of WordPress.

5. Accessibility of Gutenberg

If you start digging, there’s some flak online about Gutenberg’s so-called accessibility. In my ignorance, I implied that WordPress and its “Make WordPress Accessible” objective were awesome in one of my last articles. But according to a recent webinar offered by Smashing Magazine, Gutenberg did not actually make accessibility its first focus. In fact, the Accessibility Team Lead, Rian Rietvald, resigned in an attempt at protesting the lack of accessibility considerations.

Now that Gutenberg has been released – and forced onto us WordPress users (and some of us think the release is premature) – it now has to actually reverse engineer itself in order to make it more user-friendly. How ridiculous is that?

In spite of the improvements for the average user, in my opinion the cons definitely outweigh the pros.

6. Understanding Compatibility Issues

Despite its simplicity and agility, Gutenberg might not be everyone’s cup of tea. Most WordPress developers (including myself) might find it difficult to work with, especially in the beginning.

  • Owing to the backward-compatibility issue, you will need to update many plugins and themes to ensure they are fully compatible with the new editor. You may also need to go page by page or post by post to convert your content to blocks. If you have a lot of content, this is going to take some time.
  • For the time being, blocks are more focused on content. As a result, Gutenberg lacks precision and control over the layout of custom websites.
  • Shortcodes are replaced by shortcode blocks. However, you will still be able to add shortcodes from the widget block.
  • Meta boxes will be available under a new name and a new UI. Conflicting meta boxes are likely to lead to the classic editor, instead of Gutenberg, with an alert. While this system might prove helpful, some meta boxes will not be supported in Gutenberg.
  • Custom post types – some claim that they are supported and remain backward-compatible in Gutenberg, and others say you might need another plugin that is Gutenberg-friendly to manage custom post types.
  • You won’t be able to turn off Gutenberg once it is integrated in WordPress core. However, you can disable it using the official plugin – at least for now.

Regardless of how I or other developers might feel about the implementation of Gutenberg, the upshot is that it is following the current trend in website creation. As time goes by, we’re seeing Gutenberg-ready themes, plugins and tools surfacing everywhere. So you might as well be a part of this change from the beginning.

Leave A Comment

Your email address will not be published. Required fields are marked *