WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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.


Screenshot of wordpress classic editor
WordPress’ Classic Editor
Screenshot of wordpress' new editor, Gutenberg
WordPress’ New Editor: Gutenberg
(Please don’t read the text – there’s too many spelling errors)

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).

Gutenberg block library - screenshot | WordPress Bloggers: Must Know Gutenberg Tips & Tricks
The block library contains a ton of blocks – and plugins are adding even more!

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.

Gutenberg demo gif | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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

How to insert blocks with Gutenberg | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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

Gutenberg block library overview categories | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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:

Gutenberg slash block inserter shortcut | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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.

Customize text

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)

Gutenberg paragrah block settings | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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! 

Creating a CTA button in Gutenberg | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

Here’s my button in action:

Pretty cool!

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:

Wordpress Gutenberg insert columns | WordPress Bloggers: Must Know Gutenberg Tips & Tricks
(The colours for this GIF are super weird, sorry)

On the blog, it looks like this:

Cute corgi drinking from a water bowl in Berlin

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.

Reusable blocks in gutenberg | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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.

Gutenberg block settings - converting reusable block to regular block and vice versa | WordPress Bloggers: Must Know Gutenberg Tips & Tricks
On a regular block, you’ll find the ‘convert to reusable block’ option in the ellipsis menu

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.

Transforming blocks in Gutenberg | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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

Keyboard shortcuts

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.

Keyboard shortcuts | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

Writing modes

Gutenberg writing modes | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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

Fullscreen mode gif | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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.

UNIFIED TOOLBAR

Unified toolbar vs pr block toolbar gif | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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

Spotlight mode | WordPress Bloggers: Must Know Gutenberg Tips & Tricks

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)

Document settings

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.

Gutenberg document settings

Word count

Post or document information and details - word count etc

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

Post outline

The document outline shows all headings in your post – clicking one will take you straight to it in the post.

Word count, document outline and more - Gutenberg WordPress editor

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.

Editing permalink slug in WordPress Gutenberg

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.

Easy and quick internal linking Gutenberg

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.

  1. You can download it from the wordpress plugin repository here, and upload it yourself.
  2. 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.

Gutenberg in the wordpress' plugin repository

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:

Gutenberg - 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?

Gif that says lots of love, Anne xx

Since you made it to the end, you may as well follow me on Instagram – but their algorithm is a bit of a mystery, so you can sign up to the newsletter to not miss out on the best posts! ✨

optimized pinterest image
Tips, Tricks and everything else you need to know about the new editing experience in WordPress called Gutenberg #Wordpress #blogging
82 Shares

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

4 Comments