Switch to Gutenberg

If you haven’t switched your WordPress editor over to Gutenberg, the time is now. As a quick review, Gutenberg is the new block editor that makes it easier for WordPress users to build feature-rich pages and blog posts.

If you’re new to Gutenberg or are still on the fence about making the change, this article is for you. This post will cover fifteen of the top tips and tricks to know about Gutenberg.

By the end of the article, you’ll understand the ins and outs of the Gutenberg editor and have a list of fresh new WordPress tricks up your sleeve.

Let’s dive right in!

A quick primer on Gutenberg

Before memorizing various Gutenberg shortcuts and tricks, it’s important to get the lay of the Gutenberg land. 

The first thing to know about Gutenberg is how you navigate the dashboard. Here is a picture of what the Gutenberg editor looks like in the fullscreen mode in WordPress.

gutenberg full screen mode

The top left side of the screen has clickable shortcuts for the most basic functions you are likely to complete on a new page or post.

You’ll see a plus button (+) which allows you to add a new content block, a pen that allows you to edit, two arrows that act as undo and redo buttons, an information button that tells you basics about word count, block count, character count, etc., and three lines that, when clicked, show you a list view of your content blocks for easy navigation.

On the main section of the page, you’ll see “Add title” and the same plus sign off the right that is on the top left navigation bar.  

The “Add title” is where you enter the title of your page and it is pre-programmed to act as your H1 tag for SEO purposes.

If you click on the “+” button, you can add a new content block.

add a new content block in gutenberg

On the right side of the screen, you’ll see two tabs, “post” and “block.” If you click on either of the respective tabs, you’ll be able to edit and add various features to your post or to a content block.

Finally, on the top right side of the page is where you will find the “Preview,” “Publish,” and settings icons.

And, that’s the gist of it! Now, let’s talk about fun things you can do with Gutenberg.

1. Add your first bit of content by clicking the “+” sign

Arguably, the coolest feature of Gutenberg is how it builds pages and posts with simple content blocks. 

Back in the olden days of WordPress, website owners had to use various plugins and/or code to accomplish what you can now accomplish by simply clicking the plus sign.

When you click the plus sign, you’ll notice a few different options. 

click plus sign to add new content block in gutenberg

You can:

  • Search for a content block
  • Pick one of the most popular content blocks
  • Browse the various content block options

I personally like the search feature best. By entering a simple keyword, Gutenberg will serve up content block options that match my keyword. 

For example, if I want to embed a video, I can search “video,” and Gutenberg offers various options.

search for content block in gutenberg

Since I create all my videos with YouTube, I select “YouTube” from the dropdown list and enter my embed code. 

Give yourself some time to explore the various content block options. If you can dream it in WordPress, you can probably do it with a content block.

2. Drag images directly from your desktop and drop them into WordPress

Have you ever been using a certain content platform and wanted to add a picture? Then, when you went to drag and drop your picture from your desktop directly into the content, the picture reloaded in another random page, and the page you were using disappeared?

With all the advances in technology in the 21st century, this scenario should never happen. And, it never does when you’re using Gutenberg.

To add a picture to your blog post or page, all you have to do is drag it from your desktop and drop it into the content. No questions asked.

3. Copy and paste from anywhere into WordPress

Another similar frustration for bloggers is when you write something in Google Docs or Microsoft Word and then, for whatever reason, can’t copy and paste it into your content management system.

Gutenberg is up with the times as it allows you to copy information from any other platform and paste it directly into WordPress. 

This feature applies to text and images alike. This means you don’t have to spend extra time by saving images and text to your desktop and uploading them into WordPress. Copying from one platform to another will do the trick.

4. Use slash “/” to quickly insert content blocks

While it’s not difficult to click on the “+” button to add a content block to your page or post, it’s nice to know you have options.

If you want to quickly insert a common content block into your page, all you have to do is press the slash button, and Gutenberg will serve up a quick menu.

press slash to add new gutenberg block

If you have a specific content block in mind, you can press the slash button and start typing the name of the content block. 

For example, if you wanted to add a YouTube video, you could simply press “slash” and then type “YouTube” and Gutenberg will present the YouTube content block.

type slash and name of content block to quickly add it in gutenberg

Awesome, right?

5. Save time with Gutenberg keyboard shortcuts

Since we’re already on the topic of shortcuts, let’s talk about the Gutenberg keyboard shortcuts. 

Of course, you can use all of the typical keyboard shortcuts for copy, paste, italics, bold, and underline. However, Gutenberg has a list of its own, unique handy shortcuts.

To see the full list, you enter the Shift + Alt + H (PC) or Control + Option + H (Mac) shortcut, and Gutenberg will show you all its hidden shortcut secrets:

wordpress gutenberg keyboard shortcuts
wordpress gutenberg keyboard shortcuts

Look how beautiful these shortcuts are! 

6. Rearrange blocks with drag and drop

The ability to rearrange blocks in Gutenberg may be my favorite feature. Before cool editor updates like Gutenberg, you had to do a lot of copying and pasting and moving of code or plugin info to rearrange your content.

With Gutenberg, all you have to do is select the block you want to move, and then drag it to where you want it.

7. Switch up your toolbar

When it comes to how you view your tools, Gutenberg gives you options. The default top toolbar includes the basic functions mentioned at the beginning of this article and looks like this.

edit gutenberg toolbar

If you like to have more formatting options visible on your toolbar, then clock on the three vertical dots on the far right and top side of your screen. Then, select “Top toolbar.”

add top toolbar for more editing functions in gutenberg

Once you see a checkmark appear on the right side of this option, you’ll have more top toolbar options. Your toolbar will look like this.

complete gutenberg toolbar

8. Add a content block between two content blocks

Let’s say you are writing a long blog post and plan to add a YouTube video and some images later, but don’t have the video or images ready yet.

You can write out all of your content in various content blocks and add the video and image content blocks later.

All you have to do is hover your cursor between the two content blocks, click on the “+” button, and then search for the respective video or image content block.

This makes it possible to easily create your posts and pages in steps, even if you don’t have everything ready all at once.

9. Enjoy different writing screen modes

Not only does Gutenberg allow you to switch up your toolbar, but you can also select different writing modes. 

If you click on the same three vertical buttons on the top right side of your WordPress screen, you’ll also see “Spotlight mode” and “Fullscreen mode.”

toggle between spotlight or fullscreen mode in gutenberg

If you want to focus on one block at a time, select “Spotlight mode.” If you want to block out your WordPress dashboard and only see your post or page, select “Fullscreen mode.” You can use various combinations of these options as well.

You’ll also notice that “Fullscreen mode” has a keyboard shortcut next to it, making it possible to switch to this writing mode with a keyboard shortcut as well.

10. Enter line breaks within a content block

It can be overkill to enter a new content block every time you need a new paragraph break. Really, you only need a new content block if you’re changing the type of content you’re adding to a page. 

So, what’s the workaround?

If you want to continue writing text in one block, don’t want to create a new content block, and only want to add a new paragraph, click “shift enter.”

We talked about how you can copy and paste images and content into Gutenberg directly, but that’s not all. Gutenberg also makes it possible to copy and paste links directly into WordPress.

The best part is if you copy a link directly into Gutenberg, the editor will recognize, convert, and allow you to embed that link as a visual. You can also opt to add the link as a link, instead of as a visual.

Jump links, or anchor links, are an excellent way to organize long content and are often beneficial to SEO. In short, an anchor link allows you to create a link that, when clicked, will jump the page to the part of the content where the content creator placed the link.

The best example of this is a clickable table of contents. Any time you click on a specific link in a table of contents and the content moves you to that section of the document, the author used an anchor link.

The process of adding an anchor link used to be somewhat involved. Gutenberg makes it easy. To create an anchor link, click on the header block where you want the link, then click on the “Block” tab on the right side of your screen. Click on “Advanced.” From here, you’ll see an “HTML anchor” field. Give a name to your anchor field.

add anchor link in wordpress gutenberg

Once you’ve named your tag, select the text where you want to link the anchor. Insert the anchor name you gave to your section, and add a “#” before the link text. 

13. Create reusable blocks

Let’s say you have a block of content you want to use on several different pages. Maybe it’s a call to action? Perhaps it’s your content information. Maybe it’s a “purchase now” button.

You probably don’t want to recreate that content block on every page, especially if you operate a large website with loads of pages.

The time-saving alternative is to create reusable blocks. A reusable block is what it sounds like. It’s a custom block that you can reuse over and over.

Once you’ve created a block, you can make it reusable by saving it as a template. Simply click on the three dots on the block and select “Add to Reusable Blocks.” 

Gutenberg will save your block and you can use it again on any other page.

14. Create columns

Another reason why Gutenberg is awesome is it allows you a little more flexibility in your layout without having to make edits to your theme.

One of these options is to create columns on your pages and posts.

To create a column, click on the plus sign to add a new content block and type in “Columns.” Then, select the column option of your choice.

add columns to wordpress page

Gutenberg will allow you to add new content (e.g., text, video, images, etc.) in the columns right within the new blocks.

add content within wordpress columns with gutenberg

15. Use third-party blocks

As you know, WordPress is an open-source platform. This means other developers can create plugins, themes, and more for WordPress. Gutenberg shares the spotlight with third-party WordPress developers by allowing users access to third-party blocks.

You can access third-party blocks the same way you would access a built-in block. Just click on the plus sign, search for the block, and select the respective third-party block.

Start hosting your WordPress website with HostGator today!

If you are eager to try out the new Gutenberg editor but haven’t set up your WordPress site yet, start with the perfect WordPress hosting plan from HostGator.

HostGator offers affordable, reliable, and secure hosting plans for WordPress sites. The best news? It only takes a few clicks of a button to get started and you can start using the Gutenberg editor immediately.

Ashley R. Cummings is a professional freelance writer specializing in SaaS, tech, and advertising/marketing. In a previous life, she was a Russian teacher at Brigham Young University, a corporate trainer, and a grad student—all at the same time. When she’s not writing, you can find her traveling the world with her 2 kids and husband, reading poetry or taking a deep dive into the fabulous world of comedy. Connect with her on Twitter at @ashleyrcummings.