Gutenberg Tutorial: How to Not Hate the New Editor
If you haven’t updated your WordPress installation recently then you might not be aware of the fact that WordPress is switching to a new editor called Gutenberg.
This editor is going to become core in the next major WordPress release (5.0), which is set to release sometime later this year. The long term goal of this change is to make the WordPress experience even more user-friendly, where anyone can create incredible websites with ease based on the WYSIWYG (what you see is what you get) principle.
However, based on reviews and user feedback saying that this change is not well-received would be a major understatement.
To be honest, at first I hated it as well.
However, after writing and editing my first post using the new editor I think it’s actually quite good. Although, there are still issues present and features lacking, but the overall feel and direction is great.
With all that said, I’d like to show you how to use the new editor so it’s not as frustrating, or difficult as the majority of people on the forum make it out to be.
Once you install Gutenberg the first major noticeable change is how different it is from the traditional WordPress editor. There’s a clear focus on minimalism and understanding of typography.
This is something you either love, or hate. Personally, I love how clean everything looks.
Now there’s no need for a distraction-free writing mode as the whole writing experience is much cleaner. And if you combine it with a full screen browser view then it becomes even better.
At a first glance, it seems there’s not much you can do. But that’s just on the surface. The tutorial doesn’t really explain much and the interface is not really that intuitive.
The first thing you should do is enable the sidebar by clicking the gear icon in the top right corner. This sidebar will be somewhat familiar as it contains all the necessary settings for your posts such as featured images, categories, tags, plugin settings etc.
Next, you’ve probably noticed by now the bar at the top. On the left you have four buttons. A plus button which adds a new block to the document, undo/redo buttons, and one of my favorite new features – document outline.
You no longer have a word counter at the bottom, instead you get all the necessary information in the outline.
The biggest problem people have with adapting to Gutenberg are blocks. So what are blocks and why they are there?
Essentially, a block is anything you want it to be. But if you’re used to just writing it’s the same thing as a paragraph. However, now you can customize everything with ease.
Once you click inside a block, a menu popups up with different settings depending on what type of block it is. For example, if you chose a paragraph block then you’ll see settings which are applicable to paragraphs only.
And you can change the whole thing into a different block by pressing the very first icon. But there’s more.
If you check the sidebar there are additional settings available in the block tab. This is where you can change font color, paragraph background, pick custom font size etc. And of course the settings also change depending on the type of block selected.
One more tip about blocks. If you don’t like how settings are displayed on top of a block, you can fix them to the top toolbar. This can be done in the “More” menu next to the sidebar icon (cogwheel) in the top right corner.
One of the most infuriating things about Gutenberg is that it doesn’t really do any explanation of how to do things. My first concern was how do I change permalinks in Gutenberg?
I clicked all the possible buttons for settings and was unable to find anything related to permalinks. Then I thought, maybe it was similar to how it is done in WordPress?
Yes. And no.
It is the same way it is done in the default editor. However, to make the permalink setting show up you need to do two things: write a title and save a draft. If a draft is not saved then there is no permalink to edit.
Here’s how it looks.
None of this is explained anywhere. So you can already imagine how many people were angry about things they don’t know how to do. Me being one of them.
Changing heading size
Another common question I saw on the forum is about changing heading size. Now all you need to do is select a block and transform it into a heading block.
You’ll get the most common heading sizes inside the block. But if you need additional sizes such as H5 and H6 you need to look for them in the sidebar. Personally, I never use them so it’s not that big of a deal for me that they are hidden.
Adding a block
Currently, there are three ways of adding new blocks. The first two are great for plain writing, the third one is if you need to spice up your content with a little more than just a paragraph, image, or heading.
The first way, is to simply press “Enter” whenever you finish writing a paragraph, which is fairly intuitive. The second way is by navigating your mouse to the bottom of the writing area and a plus icon should appear.
The third way is by pressing the plus icon in the top left of the editor. This is where you’ll find a plethora of different types of blocks. In addition, Gutenberg has the largest support for embedding content.
If you need to add HTML code to your article you can do so by switching between visual and code editors by pressing CTRL+SHIFT+ALT+M. Or by clicking the “More Options” button on the right side of a block you want to add HTML code to.
If you don’t use the editor in WordPress to write your content, but rather write it in another application like MS Word, or Google Docs then I am happy to report that pasting documents into Gutenberg is a breeze.
It understands and transfers all the formatting properly without the need to do any edits on your part for the most part. I’ve seen this question asked multiple times on the forum, but I don’t understand how it is an issue.
You don’t need to create any blocks, just straight copy and paste your content inside the editor and it should split everything into blocks as needed. Maybe I am missing something?
Gutenberg is still in early stages of development, and there are some features missing and bugs present. Personally, I’ve only encountered one bug where the save draft button got stuck after pressing it.
So I couldn’t press it again, or publish a post until I refreshed the page. Luckily, it saved revisions so I didn’t lose any progress on my post.
After vigorous testing and troubleshooting I’ve figured out that this bug has nothing to do with my theme, plugins, or WordPress in general.
For some reason, Bitdefender Free Antivirus was causing this issue and as soon as I excluded my website from Bitdefender, everything started working fine. I’ve reported this issue to the developer team and I hope they’ll fix it, since Bitdefender is quite a popular antivirus.
If you’re not running this particular antivirus, but experience bugs with Gutenberg then you can install a plugin called Health Check & Troubleshooting, which makes troubleshooting extremely easy.
You don’t need to close down your website for maintenance or anything like that. You simply activate the plugin and enable/disable plugins, or themes one by one to determine what exactly is causing issues with the plugin.
This will only be visible to you, and your website should continue working without any interruption. If you find out something is causing conflicts with Gutenberg, I suggest you report it on the official forum.
Hate it or love it, Gutenberg is coming to WordPress in the next major release. Before you head to their forums to express your concerns, I suggest you spend at least a few hours checking out all the features this new editor offers.
Hopefully, this guide gave you the basic knowledge to make the adaptation process less stressful. And you’re ready to embrace the change.
Have you tried Gutenberg? What’s your take on it? Share your opinion below!
Enjoyed this article? Share it:
This site uses Akismet to reduce spam. Learn how your comment data is processed.
- How to Exclude Yourself from Google Analytics
- 8 SEO Myths That Seriously Need to Die
- Gutenberg Tutorial: How to Not Hate the New Editor
- Keyword Research: How to Find Keywords That Matter
- 8 Ways to Make Money Blogging
- The Single Biggest Blogging Mistake You Can Make
- How to Start a Blog with WordPress
- SEO Guide: Everything a Beginner Needs to Know
- Things to Do After Installing WordPress
- How to Optimize Images for the Web
- How to Add Google Analytics to Your WordPress Blog
- How to Brand Your Blog and Why You Should
- How to Write Great Content for Your Blog
- How to Choose a Great Domain Name
- Search Intent: Understanding Your Audience
- How to Use WordPress (Tutorial for Beginners)