What is the Gutenberg Editor?
You’ve probably heard the name Gutenberg before – Johannes Gutenberg invented a printing press with movable type more than 500 years ago. So it’s fitting that the WordPress project, which aims to democratize publishing, has borrowed a name from such an important historical figure.
The new Gutenberg editor sure is causing a stir! The project aims to replace the visual/text editor in WordPress with a new post and page building experience that “will make writing rich posts effortless, making it easy to do what today might take shortcodes, custom HTML, or ‘mystery meat’ embed discovery.” For digital marketers, the overhaul to Gutenberg could change our workflows for content production and management, so take notes.
In this post, I’ll explain a bit about how Gutenberg works and why we should take a step back and try and understand how it can best serve our content marketing efforts moving forward. If you aren’t on Team Gutenberg after my explanation below, you can see the alternatives to Gutenberg here.
Gutenberg – the WordPress editor, that is – is one of three core focus projects for WordPress this year, along with the REST API and the Customizer. It’s a completely new take on the editor as we know it. It uses “blocks” to structure and format content, with each paragraph of text, heading, image, list or other content consisting of a block.
Here’s what the blocks look like in action:
According to WordPress.org, the plugin has been downloaded 6,500+ times and there are 1,000 active installs. As I mentioned above, reviews are mixed and the plugin (at the time of writing) has a 2.5 out of 5 stars review. Here are the last 4 reviews to give you an idea of what people are saying:
“Very Bad Idea.”
“A Usability Nightmare.”
“A step forward in the right direction.”
“Great UI and UX.”
So yeah, reactions are on polar opposite ends of the scale.
The Gutenberg development team has been taking on feedback and pushing updates with long lists of improvements and bug fixes since releasing the plugin, even creating a new page in wordpress Testing Handbook to help users get involved.
I installed Gutenberg 0.4.0 on a localhost development install before testing it since it’s very much in beta and is not production-ready yet.
How the Gutenberg Editor Works
My first impression after installing Gutenberg ? It looks a lot like Medium – minimal, lots of white space and a focus on writing. It’s not surprising at all, really, since Matt Mullenweg has made it pretty obvious in interviews that WordPress needs to compete with platforms like Medium, Wix and Weebly and one of the keys to achieving this is making the post editing experience easier for new users.
When you create a new post, you’re prompted to add a title and “Write your story.” Unlike Medium, Gutenberg does feature a static sidebar, which is similar to the meta boxes on the right side of the existing post editor.
I found Gutenberg easy and intuitive to get started using. Yes, it did take a minute to adjust to the different interface. After all, I’ve been using the existing TinyMCE editor for years! But after clicking around for a minute, I had no trouble at all working out how to add and format content, insert images and update post settings.
Writing a post is straightforward – you just need to start typing. When you click a block to add content, formatting options will appear for aligning text and making it bold or italicized. There’s no more kitchen sink – formatting options only appear when you need them. You can also choose to insert links or – as I’m very happy to report – you can still copy-paste links as you would in the existing WordPress editor.
Depending on the kind of content you want to create – text, headings, images, etc – the sidebar changes to displays the relevant settings, i.e. drop cap for text, heading types, and alignments for headings.
To the left of a block, there are arrows that you can click to rearrange where blocks sit amongst your content. And to the right of a block, there are icons for settings (which doesn’t always work yet) and a trash can (so you can delete the block).
When you click “Post Settings” in the top-right, you can hide the sidebar for distraction-free writing. One of my criticisms is that it isn’t obvious at all that the “Post Settings” button toggles the sidebar views – the user experience here could definitely be improved. Likewise, I initially assumed there was no “Save” button, only a “Publish” button because I’m so used to the “Save” and “Publish” buttons being in the same meta box in the existing editor on the right-hand side. In Gutenberg, the “Publish” button is located in the sidebar on the right and the “Save” button is a text link in the top-left.
While I’m mentioning gripes, I’ll also add here that it wasn’t initially obvious to me that I could toggle between the visual and text editor – I didn’t notice the link in the top-left as my eyes were immediately drawn to the sidebar and I automatically assumed that was where all the important settings were located.
Gripes aside, I really like how simple the text editor looks and works. Gutenberg adds in new HTML comments at the beginning and end of each block, but the code isn’t messy at all, as you can see in the image above. Using these HTML tags allows you to create blocks directly in text editor mode if it’s your preferred method of writing in WordPress.
I also really like how creating blocks works. When you’re typing and hit enter, each new paragraph becomes a new block, which allows you to insert new blocks in between paragraphs for headings, images and other content. You can either add new blocks to the bottom of your existing content or click the “Insert” button at the top of the page to insert text, headings, lists and other content, or even embeds from popular services like YouTube, Instagram, reddit, and Twitter. A blue line indicates where the content will be inserted in the post. While I don’t mind this approach to inserting content, I do think it would be more intuitive to have an icon appear to the right of the content where you want to insert content.
Initially, I had trouble getting used to formatting blocks of text. I tried to add a heading to some text but made a whole paragraph H2 and couldn’t work out how to undo it, so I just deleted it and started again. I later realized that all I had to do was select the block of text and then click the formatting box that appears above it to toggle between text, heading, quote, list and preformatted options.
A couple of reviews of Gutenberg I’ve read have mentioned that you can’t copy-paste formatted text from Word into Gutenberg. All I can say is, good riddance! Since I don’t use Word and find the span tags Word often adds to WordPress annoying, this doesn’t bother me at all. I usually write posts into Bear and then export to HTML so I can copy-paste into the text editor. I can still do this with the Gutenberg text editor so I’m very happy about that.
I should also add that it’s an absolute delight using Gutenberg on my 13” laptop. For years, it has been a frustrating and cumbersome experience using the existing post editor on my laptop to write lengthy articles because the text area and meta boxes look all squished in and writing involves So. Much. Scrolling.
I know scrolling areas where fixed to some extent in WordPress a few versions ago, but when you’re dealing with a post that’s 2000 words and you’re trying to get to the bottom of it to update an excerpt or Yoast settings… Yes, not an enjoyable experience! So I’m glad Gutenberg addresses this, my biggest pet peeve about the existing post editor.
However… it does make me wonder how plugins, like Yoast in particular, will manage to display settings that have been traditionally displayed underneath posts. There’s not a lot of room in the sidebar, so plugin authors will have to work out a clever way to display information that complements Gutenberg (perhaps using modals?).
New Formatting Options
Gutenberg includes some formatting options that are new to the WordPress editor and were previously only possible with the addition of plugins.
Now you can add pullquotes, which are like blockquotes except not. It’s hard to explain, so let me show you:
I like that pullquotes include alignment options for left, middle, right, big and full-width so you can display quotes in different, more striking ways that (hopefully!) complement your theme.
This block allows you to enter HTML and then preview it live. I’m not exactly sure why this block type is necessary, but I’m sure there are people out there who will find this feature super handy.
To test this out, I styled some text. Here’s what it looks like in HTML view:
And this is what it looks like in Preview view:
The new Button block allows you to add a simple call to action button. There aren’t any styling options yet. However, we’ll no doubt see more options become available as Gutenberg evolves and users offer more feedback for developers and ask for features.
A Few Other Observations About Gutenberg:
- There are a lot of embed options, 35 in fact. As new embed options become available, scrolling through the list is going to become cumbersome. Fortunately, there’s a handy search field above the list of embeds to overcome this.
- Word counts are no longer displayed at the bottom of posts. As a content manager, I need to know word counts!
- Comments are no longer displayed at the bottom of posts (because nothing is displayed underneath posts!). There is a “Discussion” setting in the sidebar but the only options are to allow comments and/or allow pingbacks and trackbacks.
- The Classic Text block feels like something of an afterthought like it’s been thrown in as a way to appease people who want to use the existing editor rather than Gutenberg.
- I’m not sure how Gutenberg is going to work with accessibility. Right now, it doesn’t work at all. I mean, you can tab through blocks but you can’t access settings or edit content. It’ll be interesting to see how the development team handles this in future releases.
- It would be so much easier to drag and drop content blocks. Clicking the up and down arrows is fine for short posts but annoying for long ones. Fortunately, there’s a Trac ticket open for a feature that would allow users to sort blocks via drag and drop.
Obviously, in order for WordPress to hit 50% market share, it needs to better cater to new users who find WordPress confusing. Gutenberg aims to do this, but right now developers and marketers who are creating sites are taking one look at Gutenberg and getting scared off because they don’t believe the new editor will be easier to use, and they don’t want to go through the process of re-training.
As for merging Gutenberg with WordPress core, we know it will be sometime this year but there is no deadline. This allows the development team to continue working on it without time constraints.
It’s possible Gutenberg will be released with WordPress 5.0 later in the year. The feature-as-a-plugin still needs a lot of work, but it’s exciting to see where it’s at now and I’m looking forward to seeing how it will develop and improve with each new release.