WordPress Gutenberg Editor – What Do You Need To know?

This post contains affiliate links. Which means I will make a commission at no extra cost to you should you click through and make a purchase. Read the full disclosure here.

Have you heard about the WordPress Gutenberg Editor yet? You may be wondering what it is. Or maybe you just want to know what the general opinion is.

There’s been lots of controversy over the WordPress Gutenberg Editor. And there’s an overwhelming number of 1-star reviews for the plugin version of the editor so far.

So What’s the Deal? Is the WordPress Gutenberg Editor That Terrible?

I’ll show you what Gutenberg is, how it works, and what it can do. As well as the negatives and positives. By the end, you’ll understand Gutenberg as a whole. And know what you need to know to decide if it will work for you.

Disclaimer: Since this is the plugin and not the live 5.0 version. It’s impossible to say what differences there will be between this plugin version and the live 5.0 one. Any differences will be reviewed in this post once the core Gutenberg version is released.

Ready to get started? Let’s go then!

What is WordPress Gutenberg?

WordPress Gutenberg is a project that has three planned stages to improve the WordPress user experience. The first of which is the new Gutenberg Editor. That will be released into the core of WordPress 5.0.

The second and third phases aim to move on to page templates and full site customization. All of which is an enormous goal. But also a massive game-changer for users and developers alike.

How to Try WordPress Gutenberg Today

Did you know that you can try the WordPress Gutenberg editor for yourself? Well, you can! So, if you want to dip your toes in now, rather than being hit with the 5.0 update later. Then you can follow these instructions. But before you do anything make sure you backup your WordPress website.

To install WordPress Gutenberg simply go to your Plugins > Add New menu and search for Gutenberg.

Install and Activate the plugin. Once activated, if you go to Posts > Add New. It will create a new post using Gutenberg.

Note: If you get a blank screen, this is a known bug that should be fixed once the core release is live. To fix, simply refreshing the page works.

If you need to create new posts using the old editor you can do so by going to Posts from the left-hand menu. Then at the top of the screen where there is Add New you can click the downward triangle to open the list and select between Gutenberg and the Classic Editor.

You can also edit old posts using the Classic Editor as well. From the Posts screen if you hover over the Post Title. You can see the option for Classic Editor, which will open the post using the old editor.

💡 Pro Tip: Sometimes WordPress Gutenberg will update itself. But on occasion I’ve had to update it by clicking on Plugins > Installed Plugins > (Find Gutenberg in the list) > More Details > Install Updates. So if you come across a bug that annoys you try checking for updates there.

How does WordPress Gutenberg Work?

So, how does Gutenberg work? Gutenberg starts with some tips when you open for the first time. There are about 5 brief tips to get you started and more familiar with the layout.

WordPress Gutenberg Toolbars

There’s a bunch of toolbars you should be aware of. Let’s break them down by area.

Right-hand Side Toolbar

The full right-hand side toolbar of settings for the document looks like this.

As you can see everything is more compact. As you can see, most of the options from the old editor are still here.

In fact, there are a few extra that might not be on your toolbar depending on your plugins and settings. Such as Excerpt, RAW HTML and Likes. So don’t panic if yours looks slightly different.

Clicking the white cog icon in the top right corner simply toggles showing the sidebar menu.

Top Toolbar

On the top toolbar, there are options for Undo and Redo. There’s also an ‘i‘ icon which can give you stats about your document. Such as headings, document structure and word count.

You can also set this bar to show some of the block options. Instead of them displaying near each block on hover. But more on that below!

More Button Options

The More button in the top right corner (3 vertical dots), has several settings you should be aware of. Including a Fullscreen Mode to help with removing distractions from the editor while writing.

Visual & Code Editors

Firstly, it lets you switch between the Visual Editor and Code Editor. It’s good to know that you can still edit the code in the background. This was something I was definitely worried might disappear in WordPress Gutenberg.

It’s vital for my workflow to be able to edit the background code. Especially for tasks like setting my Pinterest description with data-pin and no-pin attributes.

Unified Toolbar (Previously Fix Toolbar to Top) Setting

In the More settings, you can also toggle on the Unified Toolbar. Which puts the options for each block in the toolbar at the top of the screen. Rather than to the top left of each block. Sometimes this can help you see and click options easier. As they can overlap with your content when snapped to blocks.

Show Tips

These tips are the ones that show when you open WordPress Gutenberg for the first time. This option does not appear to show any further tips after this.

Leaving this ticked shows these tour tips every time you create a new post. The tips are straightforward, so having them repeated each time you create a new post will get tedious fast. So turn it off from the More options in the top right corner.

Gutenberg Title & Permalink

You may be wondering how you edit the Permalink. Well, it’s somewhat hidden in the post title. If you click on the title, it should appear above it and let you edit from there. Just make sure you’ve saved a draft first otherwise it won’t generate!

Gutenberg Blocks

Next up, let’s have a look at Blocks. These are the basic building blocks of your post.

How to Create Blocks

Both the + icons left of blocks and at the top left of the toolbar are to add new blocks.

When you have several blocks next to each other. You can also click on the + icon that appears when you hover your mouse between two blocks. This is handy if you want to insert blocks between those you have already set up.

Or you can quickly select one of the 3 most used blocks by clicking on one of the 3 icons to the right of this new space for a block you just created.

Clicking on or having a block selected allows you to hit Enter, which defaults to adding a new Paragraph block. So if you are writing a bunch of paragraphs one-after-the-other. Then it’s smooth like typing into the classic editor or a Word document.

💡 Pro Tip: You can avoid creating a new block within a Paragraph block by pressing Shift + Enter. This will create a new line without starting a new block.

In fact, it might work well for some to write all their paragraphs. Like a brain-dump, in one fluid go and then use the + icon that appears above the blocks to insert headers and images, or any other blocks. Since paragraphs are probably the most common and give the document structure.

Another method would be to do the reverse and use Heading blocks instead. Which would be similar to doing an initial outline. Which may work even better depending on your workflow. Create your headings all in one go and then add a paragraph block under each heading. When you type some text and hit enter it will keep adding more paragraph blocks until you’re happy.

Block Types

Clicking the + icon to Add Block from the top toolbar or to the left of a block. Will show a list of different blocks by category. You can search for a block if you know what you are looking for.

There are far too many block types to list, and some will depend on what plugins you have installed. But here’s a sneak peak of what’s under the Common Blocks category.

Note: When you create new blocks that involve typing. You’ll have to double-click into the block before you can actually start typing.

The Most Used category changes depending on which blocks you use more. Again, some of the blocks available here may depend on your plugins.

Depending on the type of block, you add or have selected. Content dependent settings will appear in the right-hand menu. As well as to the top left of the block when hovered over. Or the top toolbar depending on the options you set. That I mentioned earlier.

Also, it is worth noting that some HTML blocks don’t display properly. For example, the code for my email opt-in form shows blank. To see it properly you have to Preview the page first to see its live version.

Block Order

In previous WordPress Gutenberg versions, you could use the up or down arrows to the left of each block to reorder them. This appears to have been removed in later updates.

You can still drag and drop when the hand icon appears but it is fiddly and not obvious at first. So, if you have many blocks it might be slow to reorder them.

The fastest option is to highlight and cut several blocks at once. Including images, headings and paragraphs from what I have tested. You can then paste it where you want it moved to. Which is much faster than using the up and down arrows.

Deleting Blocks

There are a few ways to remove blocks. One is where you need to hover your mouse to the right of the block. This will show the More Options button. Click this and then click Remove Block and the block will be deleted.

Another option is to select a block. Which you can do by using a single-click inside the block or anywhere on the block where the hand cursor shows. Once selected, hit Delete on your keyboard to remove the selected block.

If the block is empty of contents, you can also hit the Backspace key to delete it.

You can also use the keyboard shortcut Ctrl + Alt + Backspace.

If, for some reason, you wanted to delete all the blocks on a post. It is possible to use the keyboard shortcut Ctrl + A and then press Delete to remove everything.

Transform Blocks to Another Type

It’s possible to transform one block type to another. By clicking the blocks left-most icon on the context-specific toolbar that appears at the top left of the block or the top toolbar when selected.

You cannot change a block into every other block type. It really depends on the base block. For example, you can change a paragraph to a heading, list, quote etc. But you can’t transform it into an image.

Reusable Blocks

WordPress Gutenberg reusable blocks are exact copies of the block you use as your base. There doesn’t appear to be any other way to change the default settings of a block.

To create a Reusable block, hover to the right of the block you want to use. Click More Options > Add to Reusable Blocks.

It will ask you to give it a name and click Save.

To use this Reusable block, you will need to click the Add New Block button and scroll to the Reusable category. This will add an exact copy of the block you used to make it reusable.

You will not be able to edit the Reusable block unless you click the More Options > Convert to Regular Block.

Reusable Block Examples

Here’s some examples of how you can use Reusable blocks.

Click To Tweet

I’ve used mine to create Reusable blocks for my custom Click to Tweet code which has some extra top and bottom padding for spacing.

I add this reusable block and then convert it to a regular block so I can edit the text for the Tweet.

Email Opt-In Forms

My email opt-in form is also a reusable block. Just create an HTML block again. Add the code of the form and save it as a reusable block. No more needing to go find the code in my reference documents on Trello!

Custom Headers

At the end of the posts, I try to catch the attention of readers and invite them to discuss. I’ve had a custom CSS style for it for a while. Now it’s also in a reusable Header block.

Pinterest Pin Images

This is another HTML reusable block. I’ve simply taken the base code from my Pinterest descriptions post and inserted it into the block.

I no longer need to go copy and paste this code from Trello. Once it has been converted to a regular block, I can simply edit the URLs and descriptions.

WordPress Gutenberg Shortcuts

There are several useful keyboard shortcuts. Some of which you may already be familiar with from the old editor. Here’s a table of some of the most common I’ve come across when using the Gutenberg Editor:-

Shortcut	Effect
Ctrl + B	Bold
Ctrl + I	Italics
Shift + Alt + D	Strikethrough
Ctrl + Z	Undo actions
Ctrl + Shift + Z	Redo actions
Ctrl + Shift + Alt + M	Switch between Visual & Code Editors
Ctrl + S	Saves a Draft
Ctrl + Shift + ,	Hide Block Settings
Ctrl + Shift + D	Duplicate Block
Ctrl + Alt + Backspace	Remove Block
Ctrl + Alt + T	Insert new Block before
Ctrl + Alt + Y	Insert new Block after

 

Note: You can see a full list of shortcuts by going to the More button in the top right corner of the editor. And then clicking Keyboard Shortcuts.

Gutenberg Compatibility

There are some known compatibility issues. Currently, at the time of writing these include King Composer with WooCommerce and WP Rocket.

Note: Whilst something you use might not be on this list. This isn’t a guarantee it works with WordPress Gutenberg either.

The SEO Yoast plugin appears to work fine with the plugin version of WordPress Gutenberg. They even had a new sidebar version! Which is promising for the core release. Their plugin developers have been hard at work for making sure the plugin is compatible and it shows!

Better Click to Tweet also works well with Gutenberg. If you have the plugin installed you can find it under the Widgets category. You can type your tweet directly into the box. And adjust the settings with all features available in the sidebar.

All my Genesis Simple Hooks are still working too. So it seems safe to say it works with WordPress Gutenberg as well.

When clicking Preview to see the almost Live version of my post. The Social Warfare buttons were missing. This might be worrying, but I can say for sure now that the buttons appear on the Live post with no issues.

WordPress Gutenberg Bugs

When using the WordPress Gutenberg Editor I noticed a few bugs. Nothing game-breaking but minor irks nonetheless.

Sometimes selecting and highlighting can be buggy and you can end up selecting the whole block instead of a sentence.

Other times, you might find yourself clicking on a block and for some reason. The mouse cursor changes to a table column/row resizing icon. Resulting in it jumping halfway down the page to the table, for what seems like no reason.

The WordPress Gutenberg editor can be laggy without much provoking. Grammarly or having several tabs open in Firefox made inserting hyperlinks take forever.

After adding a Button block, deselecting it. And then trying to click back into it. I’ve also seen an error. To fix I had to Save Draft and refresh the page.

I’ve also come across a failed update error which can appear in the top left, in several versions. Sometimes it goes away on its own. Other times I end up switching to the Code Editor and copying everything. Before reloading the page and pasting the code back in to get rid of the error without possibly losing work.

Gutenberg Limitations

This may feel like a rant. Maybe it is. But all of these are aspects of the WordPress Gutenberg that I feel are sorely missing.

Also, I would like to point out. That I did not go into trying Gutenberg out, just to pick fault.

I was generally excited to try it out! And had some ideas of how it could make my workflow even easier and more fluid. Sadly, I felt disappointed after using Gutenberg for the first time.

No Proofing or Spelling Tools

There’s no spell-check or proofreading. This is a huge oversight when considering the block structure. Especially since Grammarly seems to lag like a brick in water.

Copying text from Word into Gutenberg is terrible at best. So trying to work around the lack of proofing tools seems like a disaster waiting to happen.

So far I’ve managed to find a workaround by switching to the Code Editor. I’ve discovered you can copy and paste this into Word / Grammarly. Do a spell-check. And then copy it back into the Code Editor safely. (By safe I mean no known side effects so far!)

Missing Options for Nofollow Links

Whilst you can toggle opening links in new tabs. You cannot easily set nofollow on links. You’ll need to edit the code to do this.

And it may just be me, but adding links seems temperamental to me. If I paste a URL into the box to use it as a link. It sometimes won’t register it unless I click inside the box, click and drag to the right.

The link usually appears at this point, but the insert link box tends to also close. If I attempt to create a link the second time, pasting a URL it works the first time with no delay.

💡 Pro Tip: The least frustrating way I’ve found to add links. Is to click inside where you would add your URL and paste it. If the URL doesn’t appear immediately. Then click and drag to the right inside the box. If the settings box disappears. Simply repeat and the paste will work properly the second time. Once your link is there, hit the apply button. And then try to toggle on the Open in New Window.

Buttons Blocks Can Only Link to Your Domain

If you use the Button block you can only set it to a URL on your domain. I see no reason for this at all. It should be the same as adding a link where you can set any URL you like.

Images can Only be Created One at a Time

You can only add 1 Image block at a time. Unless you are creating a Gallery Block.

The Default Editor View is Narrow

For some reason, the default editor is very narrow meaning my paragraphs don’t look anything like how they do in my theme.

Apparently, it can be changed but requires adding code to your functions.php file. I’ve yet to get the code in this post to work for myself though.

It actually looks like this:

Blocks are One-Dimensional

They are isolated objects that make up your whole document. But that’s the only structure they have. Above or below.

You cannot have blocks inside of blocks. You may think, why would I want that? Well, think about a section of your post with its header, paragraphs and images. Couldn’t they all fit inside your heading block, as one big block, with smaller blocks inside it?

Or what about this – Tables. Ever added an image into a table to demonstrate something? Well, you can’t any more. Unless you edit the background code.

Oh and speaking of tables.

Formatting & Tables are All Basic

Adding tables are simple. But if you want advanced formatting like borders, alternate line shading, even just aligning the text within cells differently. All of these you’ll have to edit in the Code Editor using either HTML or CSS.

In fact, formatting the table for this post was the longest I’ve ever spent on such a simple layout. Going forward, I will stick with adjusting the CSS styles. Sadly, this isn’t an option for everyone.

I’ve also, found tables to be quite bugged. For example, if you check the table I added to this post above. You’ll notice that I also have a green coloured paragraph below it. This green colour kept being picked up by the table. Unless I put a Paragraph block between the table and the coloured paragraph with a single blank space.

Also, what Align buttons are available only align all the text to either left, right or centre. You can’t centre your headings and left-align values. It doesn’t even affect the table itself. So every table is left aligned by default.

You can’t even change text colours within tables on the fly. Although you can with paragraphs. But even then, paragraph font colour is limited. As it applies the colour to all the text.

Want to change the colour of a few words? Well, you can’t. Not without code.

WordPress Gutenberg Still Strips Out HTML That it Doesn’t Like – Only Worse

I’ve never understood this about the classic editor. If I add in code, I expect it to stay there. Even if it is wrong. The Editor should only ever flag it at most.

I found this so frustrating when I first started using the Classical Editor. I ended up working around it by staying in the Text Editor as much as possible. And avoiding the Visual Editor like the plague after certain steps in my workflow.

If you’ve ever added the Pinterest nopin=”nopin” attribute to images then you probably know what I’m talking about.

So, here’s the thing. In Gutenberg, if I try to add the Pinterest attribute nopin=”nopin”. I will be prompted to either Convert to Blocks or Keep as HTML. You cannot dismiss this message without selecting an option.

Convert to Block will reset any code changes you made! And Keep as HTML will convert it into an HTML Block. So, as long as you Keep as HTML your code changes will stay. This feels unnecessary and confusing.

And it’s not just the nopin=”nopin” that causes this. Even perfectly legit CSS styles like adding borders to paragraphs will prompt the same response.

The Positives of WordPress Gutenberg

So, with the negatives out of the way. Let’s try to look at some of the positives.

The Interface is More User-Friendly

The Gutenberg WordPress editor feels like it is missing many features. But putting that aside, the overall usability is easy. The only aspect that was difficult to find was the permalink. Everything else is straightforward.

Some blocks need better explanations but that will come with time. The main problem will be getting people willing to learn the new changes!

Future Development

The biggest benefit of all these changes is the fact that this Editor is one of several changes. All of which are aimed to position WordPress for the future.

The Editor has been long overdue an overhaul, as it hasn’t been changed significantly for more than a decade.

Technology changes faster every day. And even platforms like WordPress need to change. Hopefully, for the better.

Blocks Have Potential SEO Benefits

Yoast SEO have been quite excited about the move to blocks in WordPress. With regular updates to their plugin, they seem more ready for Gutenberg, than Gutenberg themselves.

One particular aspect that they are focusing on as a positive for moving to Gutenberg and blocks is SEO. Basically, moving to blocks offers an opportunity to add more structured metadata, which Google can use to match search queries better. You can read more on their ideas for the SEO benefits of Gutenberg blocks here.

The Amount of Bugs is Less Than What Reviews Suggest

Is the WordPress Gutenberg Editor perfect and bug free? No!

But based on the reviews I saw on the plugin page. I thought it would be completely broken.

I expected to try to write a blog post and throw my screen out of the window out of frustration.

But you know what? It wasn’t like that at all.

In fact, I’ve written this entire post in the Gutenberg Editor. To prove it can be done! I still prefer my old workflow. But who doesn’t like to stick to a fluid writing process that they know?

No one wants to feel slow or having to stop and start a repeatedly when trying to write a blog post in a new editor.

And it won’t be the last post I write in Gutenberg either. Why? Because despite its flaws. I think it has potential.

Is it an Improvement Over the Old Editor?

Honestly, I have mixed feelings. It can take a while to get into the groove with something new. Especially when it is vastly different to what you are used to.

But, in its current state. The WordPress Gutenberg Editor is it not an improvement over the Classic Editor.

Even, if you look past having to adjust to a new workflow. I would say Gutenberg is still marginally worse than the Classic Editor.

Why? Because there are so many features missing that require you to edit the code in a cumbersome way. This means it is not accessible to all users. Which is the opposite of what it should be doing.

Overall, the Gutenberg Editor is slower than Classic. It’s most noticeable when you try to open and edit posts quickly. Classic opens so much quicker.

It takes me longer to write a blog post in WordPress Gutenberg compared to my current method. Whilst Gutenberg is all about making tasks easier and ensuring WordPress can develop successfully in the future. But for now, it is a step back to introduce an Editor as core if everything takes longer.

Anyways, now that you know my experience of the WordPress Gutenberg Editor. What’s yours?