Gutenberg: The new wordpress editing experience. Here’s what you need to know
Did you see the notice a few weeks ago?
If you’re a wordpress blogger you should have heard about Gutenberg, the project that’s rebuilding the editing experience in WordPress into something new, more modern and hopefully, better.
With WordPress 4.9.8 a notice popped up, suggesting you try out the new editor experience in plugin form. When WordPress version 5.0 comes out, it will be the default editing experience. At the moment 4.9.9 is planned to be released November 5, and 5.0 will be released when Gutenberg is ready.
So it’s time to get on board!
But what is Gutenberg really? And how do I use it as a blogger?
I first tried Gutenberg back in January, when it was plugin not suited for production sites. It was unstable and confusing, honestly. It’s had a lot of updates since then, and it’s now turned into a powerful blog post editor with a much nicer writing experience.
I’ve been following along with the development on GitHub, and read quite a few blog posts about Gutenberg. Most of them, however, are written by developers for developers. So not only do they speak in a different language, they want and use the editor differently from bloggers.
So bloggers, this is for you.
A post about Gutenberg for bloggers, by a blogger with lots of tips and tricks on using the new editor.
How much nicer does that look?
It’s so clean!
On the picture I’m using Gutenberg in full screen mode, with the block toolbar pinned to the top, and the settings panel (hiding behind the cog) dismissed to minimize distractions and maximize writing happiness.
Now, let’s take a look at what’s new in the editor and how it works.
Blocks all the way down
The biggest change from the old to the new editor, is that it’s now based around blocks.
At first, this block concept can seem a bit confusing. Instead of being one long stream of content, paragraphs are divided into little chunks with special functions, depending on what type of block you’re using.
There’s an image block, a paragraph block, a heading block, a gallery block, an instagram embed block (embed block for most sites, really), a custom html block, reusable blocks (which are awesome – more about that later) and so much more.
The purpose of this is to make it easier to create a beautiful layout and customise blog posts without special knowledge of html and css. So while there is a slight learning curve and it takes some practice to figure out where everything is now – it’ll ultimately enable you to create even better content!
The block based approach also exist in other editors, like Squarespace for example.
I tried Squarespace a little while ago, when I was considering going away from WordPress. It’s was so slow and clunky, and switching between text blocks was constantly ruining my writing flow.
Gutenberg is doing a much better job at providing an interface that allows a smooth writing experience as well as the ability to make detailed customization and page building.
As plugins start to work with Gutenberg, you can expect to find even more blocks – like recipe plugins developing recipe blocks. Or Yoast developing SEO-friendly block (this has already happened – read more here).
The default block is the most basic block: the paragraph block. It’s a basic text block, where you can add inline formatting like bold or italic text.
They’ve put a lot of effort into making the block-building-experience smooth. So when you copy-paste content with text, lists and images, it’ll automatically add the right blocks. You can also drag and drop images into the post without creating an image block first.
Inserting blocks in Gutenberg
There’s 3 main ways to insert new blocks.
Check out this GIF
Let’s break that down.
Inserting blocks via the top toolbar
See that plus with a circle (+) around it? That’s the button that lets you insert blocks with your mouse. There’s a whole library of blocks sorted into categories, with your most used at the top – there’s also a search function to let you find the block you’re looking for quickly
Inserting blocks via the inline inserter
Move your mouse around the editor. Look for that (+) circle. It shows up between blocks and on the left side at the end of your post or next to an empty (paragraph) block (on the right side there’s a couple of grey icons. They are your most used blocks for quick access – just click to insert).
Inserting blocks via the slash inserter
This is the best one – and it’s not one you’re going to discover easily.
When you’ve used Gutenberg for a while, you know about the blocks and you know how to use them, you just want to type out a blog post as fast and efficiently as possible.
The slash inserter means you can insert blocks quickly, via the keyboard.
Here’s how it works:
Hit enter to create a new paragraph. Then type “/” (without the “) followed by the name of the block you want to insert. So to insert a quote block, I’d type /quote on an empty line. Here it is in action:
Generally, it’s possible to use Gutenberg with the keyboard only. Recently quite a few keyboard shortcuts were added – but there’s still some navigation/accessibility issues that will/should be fixed before Gutenberg is merged in to WordPress core.
Cool things to do with blocks
– Why Gutenberg is a great upgrade to the classic editor.
There’s plenty of cool things to do with blocks (more than I can fit into this post). When plugins start to extend the possibilities of block, the potential is endless!
In the classic editor, I constantly found myself switching between ‘Visual’ and ‘Text’ editing mode because I had to use HTML to get the look I wanted. That happens a lot less in Gutenberg – and when I want to add some HTML, I just use a custom HTML block rather than edit the HTML of the whole post.
Want to spice up or draw extra attention to a paragraph?
You can easily do that now!
Using the block settings panel, you can change the font colour, background colour, font size and add a custom css class.
It’s possible to change the colour of individuel words, but at the time being that requires HTML knowledge (adding the feature has been discussed in the GitHub repository, but it’s unlikely to be added in the near future)
There’s also a drop cap option for paragraphs, which can make your opening paragraph look extra nice. I’m also using drop caps for the numbers in this round up.
Buttons buttons buttons
Another cool block is the button-block, which makes it easier to insert – you guessed it – buttons!
Here’s my button in action:
Build your page with columns
A much awaited featured – something that many page builders and themes have tried to implement with the classic editor, with variying levels of success.
Columns are a neat way of organising your content – and now you can easily make your post look fancy with the block. You can add pretty much any post in a column, so there’s a lot of possibilities with this block!
Example: Using Gutenberg Columns
In the editor, it looks like this:
On the blog, it looks like this:
Click the button to get a corgi delivered straight to your door
Reuse blocks and create templates
This is possibly one of the coolest upgrades to the editor!
A reusable block lets you – as the name implies – reuse a block. For example, I use the same sign off on every post – instead of copy-pasting it in every time, I have a HTML block saved as a reusable block that I quickly add at the end of each post.
When you edit a reusable block, you edit all instances of that block – so if I want to add a notice at the end of all my post, I can easily do that my editing the reusable block.
This feature can replace many uses of shortcodes, getting closer to the goal of having a WYSIWYG-editor (What you see is what you get). I imagine this will be great if you add ads inside your content too.
Another use for reusable blocks are as templates. Using the ‘more’ menu (the ellipsis) you can convert the block into a regular block, so editing it no longer affects all other uses of a block.
I use this for many things – like when I do recipes, I format tables in a special way. I have a reusable block with all those settings I applied, so I just have to convert it to a regular block, add the ingredients and it will be formatted perfectly.
There is discussion around optimising reusable blocks for use as templates, but at the moment a concrete approach to it is not under way.
At the time of writing, Gutenberg 3.8 is the latest version, but I know 3.9 will include the ability to save multiple blocks as one saved block (great for post templates), and that the little interface with the custom name will move to the top of the top block. There’s also plans of adding a special interface that lets you edit reusable blocks outside of blog posts.
Transform: Change your mind about block types
Look at the gif below. Here I accidentally wrote the text I wanted to be a heading in a paragraph. Normally you would select the text, then format it as a heading.
In Gutenberg, you use the block transformation, and make the change on a block level.
Depending on what block you’re using, different transform options are available (like image and cover image, text and quote, etc).
In other gifs, I’ve had the block toolbar on the top, but for this I changed the setting to be on a block level. More about that in the next section.
Quickfire tips & tricks
Pressing shift+alt+h brings up a pop-over listing all the keyboard shortcuts Gutenberg offers (you can also find the menu clicking the ellipsis in the top right corner.
In the short run, learning shortcuts take some effort, but in the long run it makes you more efficent, and improves the flow of writing.
Via the ellipsis menu in the top right corner, you can enable/disable various writing modes called fullscreen mode, spotlight mode and unified toolbar mode.
Fullscreen mode hides the WP admin area – both the toolbar at the top and the menu on the left side. Less distractions=win.
For super-fullscreen mode, press F11 (might depend on what browser you’re using). This will make you browser enter fullscreen mode too, hiding open tabs, the adress bar and bookmark bar.
Note: The x on the top left doesn’t exit fullscreen mode, it exits to the post overview screen (to avoid confusion, the icon is being updated in an upcoming version). You can exit fullscreen mode by un-selecting it in the ellipsis menu.
The unified toolbar option lets you toggle between having the block toolbar right above the block or compined with the fixed toolbar at the top of the screen.
One isn’t inherently better than the other – but I prefer the unified toolbar, because it makes the screen less cluttered, and the options I use frequently (bold, italics, link) all has keyboard shortcuts, so I don’t need the toolbar when I’m writing, only when I’m editing.
Spotlight mode is an attempt at reducing screen clutter even more (it’s best to use combined with unified toolbar and fullscreen mode). It dims all other blocks spare the one you’re currently using (and also hides some other UI elements)
Looking at the classic editor, you’ll see that aside from the post-editing area, there’s all these (for lack of a better word) blocks, that let’s you update various settings, like setting a featured image, adding a category and tags, and so on.
Of course those options haven’t disappeared with Gutenberg!
If you have the block settings panel open (cog in the top right corner), you’ll see there’s a document tab right next to the block tab.
When you click inside a block, the block settings will appear. When you click outside a block, you’ll see the document settings.
Behind the (i) button on the top toolbar you’ll find how many words your post is, among other things.
This post is currently over 2000 words long!
You’ll also find
The document outline shows all headings in your post – clicking one will take you straight to it in the post.
Editing the permalink with Gutenberg
I’m adding this after seeing not that few angry support forum posts complaining that the ability to edit a post’s slug has been removed.
It hasn’t – you just need to know where to look! And you have to save the post (as a draft) before you can edit its permalink.
Then just select the title, and it’ll appear right above.
Easily link to your own posts
Rather than finding and pasting the link into a post on your blog, you can just type to search for posts on your block and quickly linking to them from the link-pop over.
Welcome to the Gutenberg help desk!
Let’s round this (long!) post of with a couple of questions-and-answers.
If you still have questions about Gutenberg or are wondering how to do something, I’d be happy to help.
The comment section will be open for all your questions – there’s no stupid questions (and you can be anonymous).
Now that I’ve learned to make screenshot gifs, I gotta take advantage of it, don’t I!
How do I get Gutenberg?
There’s two ways to install a wordpress plugin.
- You can download it from the wordpress plugin repository here, and upload it yourself.
- In the admin area go to Plugins > Add new and search for Gutenberg (it’s on the front page at the moment). Click install, then activate.
Activating the plugin won’t change any of your posts. If you open old posts in Gutenberg, all content will be stored in a classic block and you can decide whether or not you want to convert it to blocks.
What if I don’t want Gutenberg?
If you for some reason don’t want Gutenberg on your site (plugin incompatibility, personal preference, etc), you can install the Classic Editor Plugin, which will allow you to keep the classic editor after WordPress 5.0 lands.
However, even with Gutenberg installed, you can still edit posts in the classic editor:
Help, Gutenberg isn’t working on my site!
If you run into an issue and leave a comment here, I’ll do my best to help.
But if you’re experiencing an error (like the editor isn’t loading, it’s just a blank screen) it’s possible there’s a conflict between Gutenberg and another plugin (or theme) on your site.
One way to test this is to deactivate all plugins except for Gutenberg and see if it’s works. If it does, enable them one by one until you find the culprit.
To see if there’s a known fix for your error, you can try searching in the plugin support forum and github issue log. You might not be the first to experience the error – sometimes there’s an easy fix, other times you’ll have to wait and see if the conflicting plugin plan to support Gutenberg any time soon.
When will Gutenberg become the default editor?
Short answer: When WordPress is updated to version 5.0
Acutal answer: There’s no planned date yet. Version 4.9.9 is planned for November 5th at the moment. Then comes all the holidays, and it’s highly unlikely that 5.0 will be released before 2019. When there’s a planned release date, you’ll see it here.
For more information, here are some common questions about Gutenberg answered. I’d also encourage you to read this introduction to the editor (though Gutenberg has changed a lot since the description was last updated).
So. How do you like Gutenberg so far? Are you running into any problems with the editor?