5 Tips To Get Started With WordPress Gutenberg

In the past, I’ve written about my issues with the WordPress Gutenberg editor , and with its focus on “blocks” for everything. However, now that it’s here and part of WordPress for good, let’s take a look at a few tips to make it more manageable. The core theme of Gutenberg will always remain the same – everything is a block, including paragraphs. This means that some annoyances are permanent – such as not being able to select one and a half paragraphs. But for the rest, let’s see what we can do to reduce the clutter and make our lives a bit easier.

Increasing the Space on the Right

By default, Gutenberg comes with a lot of additional “baggage”. It’s a far cry from the clean, white interface that most writers enjoy. One way to get started, is to remove the right-hand side block that’s the default on every page. Here’s what it looks like:

To remove this, just click the grey “gear” icon as shown above. This will minimize the element and leave you with a cleaner interface!

Avoid the Distracting Popups

If you’re writing on Gutenberg for the first time, you’ll be inundated with popups everywhere. Whenever you move your mouse cursor over a paragraph, you’ll see a popup with formatting options like this:

This obscures what you’ve just written, and is annoying + distracting. Instead, we can revert to the earlier model of having the formatting bar at the top for the currently selected block/paragraph. To do this, click the three dots on the top right of the screen to bring up the layout menu like this:

Here, click “Top Toolbar”. This will now get rid of the annoying popups and the formatting bar will now stick to the top as it did before!

Enable Spotlight Mode

Even with the top toolbar turned on, there are a bunch of icons and block messages floating around all the time when you move your mouse cursor around the screen. Here’s an example:

As you can see, I’m still typing in the third block and yet there’s a “plus” sign between the first two blocks where my mouse is pointing and it says “paragraph” in solid blue. Once again, I find this kind of interference annoying, and the only way I’ve found to deal with it is to turn on “Spotlight Mode”. This places the focus on the current “block”, and prevents all kinds of UI elements from appearing when you move your mouse around the page. These are the changes I like to make while editing in Gutenberg to make the interface cleaner. The next two tips are for easier editing.

Shortcuts for Headings

In Gutenberg, the familiar shortcut for creating a heading is gone. We used to be able to use “Shift+Alt+[number]” to indicate an H1, H2 etc heading. Luckily for those of us who want to keep our hands on the keyboard, there’s a new shortcut. I’m not sure why they couldn’t keep the old one, but anyway… To create a heading, append the one, two, or three hashtags to the beginning of a line and press “space”. If you use one hashtag, it’s a level 1 heading. Using two hashtags makes it level 2 and so on. This makes it a bit easier to edit long documents with a bunch of headings.

Using Slash (/) for Inserting Blocks

This is one improvement I appreciate over the old editor. If you start a new block with a slash (/), it’ll show a drop-down box and you can type the name of the kind of block you want. Like this:

This is very useful for inserting images, <pre> blocks, or any other kind of formatting tool for your articles. One great thing about the image block is that you can even leave it blank as a placeholder so you can fill in the details later on. I think it’s a nice improvement that will make editing in stages easier. There are other customizations and improvements that we can make to Gutenberg for a smoother writing experience, but these are the most important things to keep in mind when getting started. Good luck!