How to Use the New WordPress Block Editor (Gutenberg)

You thought you knew the WordPress editor inside and out, but recently you logged in and were faced with an entirely new version of it.

WordPress 5.0 brought with it the biggest change to the WordPress editor we’ve seen yet.

The name of this change: Gutenberg.

best WordPress hosting

What is Gutenberg?

The simple answer is that Gutenberg is WordPress’s new version of an editor. But more than that, it’s the organization’s way to change how people build websites. While WordPress was already popular because of its reputation for being easy to use—someone could build or maintain a website with it without learning code—there was still a lot for your average beginner to learn in order to use it.

How Gutenberg Differs from the Old WordPress

With the release of Gutenberg, WordPress hopes to cut down on the amount of time and work required to learn the platform, and to make many functions within it easier to use. While Gutenberg brings many changes to WordPress, two of the main ones that will influence how you use it are:

  • An emphasis on media – WordPress is a content management system (CMS) primarily focused on powering blogs, and blogs have traditionally been seen as a mainly textual medium. Yet WordPress realizes that the future is in more pages and posts that combine multimedia elements. Gutenberg’s design puts more emphasis on adding media to your pages, and simplifies the process of doing so. 
  • The introduction of blocks – Learning to use Gutenberg is largely about getting used to blocks, which Gutenberg treats as the building blocks of every page and post you create. 

 What Are Blocks in Gutenberg?

Blocks are drag-and-drop units that you can easily create and move around as needed. They’re the smallest, most basic unit you’ll use in the editor and can contain anything you’d want to include a page—text, images, videos, audio, buttons, and custom code, to name a few examples. 

wordpress block editor

With blocks, WordPress hopes to accomplish a few things:

  • Make Gutenberg easier to learn than the traditional version of WordPress. The idea is that you only need to learn about blocks once, and then you’ll have using Gutenberg down. 
  • Make content creation in Gutenberg more efficient. Blocks are reusable, which can potentially save you time versus copying and pasting or reloading the same content across different pages.
  • Bring more flexibility to each page. The drag-and-drop nature of blocks makes moving things around on the page simpler. 
  • Cut down on the need to use extra plugins and coding. Some blocks provide functionality that previously required either external plugins or short codes. With Gutenberg the need for both is reduced. 

Blocks are the center of the new editing experience in Gutenberg, so it will pay to get familiar with them and comfortable using them.

Why Did WordPress Release Gutenberg?

WordPress was already the most popular CMS in the world, so why do an overhaul of the way it works? The editor’s namesake, Johann Gutenberg, revolutionized how people create and disseminate information with his 15th-century printing-press technology. Naming their new editor after him says something about the influence WordPress expects it to have on how people create and share content online.

In fact, WordPress describes Gutenberg as “more than an editor. It’s also the foundation that’ll revolutionize customization and site building in WordPress.” Their goal is to change how people think about building websites and sharing content online. 

WordPress Gutenberg Tutorial

You may be thinking “that’s great and all, revolutionize the web all you want, I just need to know how to use it” Have no fear, here are the step-by-step instructions you need to use WordPress Gutenberg blocks. 

How to Add a New Post in Gutenberg

Of course, one of those most important things you’ll do in WordPress is add posts. To add one, the first step is the same, find Posts in the menu on the right and choose Add New. 

add a new post in wordpress gutenberg

Depending on when you’re reading this, you may see a message at the top of the new editor welcoming you to Gutenberg and promising tips for how to use the editor. If you click “See Next Tip,” it will take you through a few of the basics about using Gutenberg. If you’d rather learn it for yourself (or with the help of this post), you can click on the X in the top right corner to get straight into the editing process. 

wordpress gutenberg tutorial

How to Add or Edit Your Post Title in WordPress Gutenberg

Each post will have a Title Block automatically included at the top of the page and clearly labeled, so go ahead and fill in your post’s title there.

add title block in wordpress gutenberg

If the next thing you want to add to your post is regular text, you can start typing right below the Title block. If you’d rather add an image, media, heading, or list, then it’s time to get started with blocks. 

How to Add New Blocks in WordPress Gutenberg

Click on either the plus icon you see on the left side of the screen, or the one in the menu at the top of the page, and you’ll see a visual menu of the most common block options. 

add new block in wordpress gutenberg

How to Add and Edit Images in WordPress Gutenberg

Let’s say you’re adding an image to the top of your post, click on Image here. You’ll then have the option to either drag and drop your image file into the block, upload it, choose one that’s already in your image library, or add it with a URL.

add image block in wordpress gutenberg

Once your image is loaded, you can make it bigger or smaller by moving your mouse to the edge of the photo until you see a cross icon, clicking, and dragging it until you’ve reached you preferred size. You can choose your alignment with one of the icons in the menu at the top of the block, and add your caption by typing it at the bottom.

how to align image in wordpress gutenberg

To add in image metadata like the Alt Text, click on the pencil icon in the menu to open up your media library. A field with editing options will appear to the right of it

add image alt text in wordpress gutenberg

The process of adding other media is similar, just start by picking the appropriate box for the type of media you’re adding.  

Now, onto the text. 

How to Edit Text in WordPress Gutenberg

If you have a blog post already written and copy and paste it into Gutenberg, it will automatically be divided into blocks for you based on your spacing. 

If you’re composing your post within WordPress, you can create new blocks as you go by clicking on that plus icon and choosing Paragraph for regular text, or Heading for each time you want to add a heading or subheading to your post. 

If you aligned your image to one side, you’ll have to option to add text blocks both above, to the side, and below it. 

how to add text in wordpress gutenberg editor

How to Change Block Type in WordPress Gutenberg

If at any point you want to change what type of block you’re working in, you can click on the icon in the top right and select a new option.

change block in wordpress gutenberg editor

How to Rearrange Blocks in WordPress Gutenberg

If you decide you want to rearrange where your different blocks are on the page, click on the block you want to move, move your mouse to the edge of it until you see a hand icon, then click and drag it to where you want it. 

rearrange content blocks in new wordpress gutenberg editor

How to Add a Bulleted or Numbered List in WordPress Gutenberg

Adding lists works similarly. When adding a new block, choose Lists from the menu of options. The menu at the top of the block will provide your options for different types of lists, font formatting, and indentation.

add bulleted or numbered list in wordpress gutenberg

That should cover the main things you need to know when composing blog posts. But if you need to add something a little more unconventional to your blog post, such as a table or a calendar, you’ll find these by scrolling down further when adding a new block. WordPress provides a few different block menus such as Formatting and Widgets.

How to Find Block Types in WordPress Gutenberg

To speed up the process of finding a specific type of block, you can use the search function at the top, rather than going through menu by menu. 

find block options in wordpress gutenberg

How to Change Post Category, Tags, and URL in WordPress Gutenberg

If you’re already familiar with WordPress, then you know that getting your post composed and/or loaded isn’t the end of your job here. You also want to perform steps like adding categories, tags, and optimizing your WordPress SEO. 

Much of this is now located in the menu on the right side of the screen. Click on each menu item to expand it, and add or select the appropriate information. 

change post category tag and url in wordpress gutenberg editor

If you have WordPress plugins you use for tasks like adding SEO metadata, you’ll see those below the post and can click to expand there as well. 

view seo plugins in wordpress gutenberg

How to Publish Posts in WordPress Gutenberg

At the top right of your screen, you’ll see the Preview and Publish buttons. As with traditional WordPress, you can see what your post looks like before you publicly release it to the web by clicking Preview

And once you’re confident everything looks good, click that Publish button.

publish post in wordpress gutenberg

There you have it, everything you need to know to create a blog post in Gutenberg!

The Pros and Cons of WordPress Gutenberg

Obviously WordPress’s intention in launching Gutenberg was to provide an improved experience for users. But upgrades are never that simple, and there are always some downsides that come with a big change like this.

 The Pros of Gutenberg 

Let’s start with the good. There’s a pretty sizeable list of pros to Gutenberg. 

It’s easier to learn and use.

While it may not seem so at first, since you’re not used to it, Gutenberg is designed to be intuitive. With just a little bit of instruction or playing around within it, you should be able to get the hang of it. And because it’s similar to other tools many are already familiar with, like Medium, getting started with it will feel natural for many users. 

Each block type has a relevant toolbar.

In the traditional WordPress view, finding the right functionality based on what you were working on at the moment could be challenging, precisely because there was so much you could do. In Gutenberg, there’s still a lot of functionality to tap into, but finding the right options at the moment you need them is easier since each block has its own toolbar that matches the most common functionality you’ll need for it. 

You don’t need font size options when you’re adding a new image or list type options when you’re adding a heading, by removing the irrelevant menu options from your block view, you find the relevant ones faster.

You have more control within the WordPress editor.

While people with coding skills always had a lot of control in getting a page to look just the way they wanted it to in WordPress, the rest of us would sometimes struggle with how to control seemingly basic elements. Gutenberg gives you more options for things like how much you want a list to be indented, whether you want to add columns of text to a page, or if you want to add quotes that are visually set-apart from the rest of the text. 

You can save time with reusable blocks. 

If you regularly add the same information to different pages, you can make pulling it in each time you need it simpler with reusable blocks. Say you add the same call to action (CTA) to all your blog posts on a particular topic, or you like to make sure your email sign up box shows up on every page of your website. Create a block once and you can add it to every page moving forward. It’s faster than using copy-and-paste or creating it anew from scratch each time. 

You can still use the traditional WordPress interface.

If none of this is selling you on Gutenberg and you like doing things the way you’ve always done them, no one’s forcing you to use the new editor. You have options to get WordPress looking and working the way it used to. We’ll provide more detail on that below. 

The Cons of Gutenberg

Nothing’s perfect, and people have their complaints about the Gutenberg editor. Most unhappy users have two main charges against the new editor. 

You have to learn it anew.

While WordPress gave ample warning that a change was coming, many everyday WordPress users that don’t follow tech news were surprised to open up WordPress one day and realize they have to learn it all over again. Having to switch from something familiar to something different requires a new mindset and a learning curve, even if the new version is supposedly easier to use. 

Many WordPress users quite simply prefer to stick with what they already know.  

Backwards compatibility issues cause problems.

The majority of WordPress users depend on an array of different WordPress plugins and themes to make their website look and work the way they want. Whenever a change as big as Gutenberg happens, some plugins and themes will inevitably be left behind, at least temporarily. In the time it takes their developers to scramble to catch up and make their services work with the new WordPress version, users could face compatibility issues that cause big problems for their websites. 

6 Tips and Tricks for Using Gutenberg

Using Gutenberg will be easier if you learn some of the tricks for editing within it. Here are some of the less obvious options for making changes to a post within Gutenberg. 

1. Learn the shortcuts.

Some people will find it much easier to take actions in Gutenberg exclusively using the keyboard, rather than having to switch between keyboard and mouse a bunch. WordPress is happy to make that easy for you with a long list of keyboard shortcuts

You can learn what all of them are by clicking on the three dots in the top right corner of the screen, then choosing Keyboard Shortcuts from the dropdown menu. Scan the list to see which ones you’re likely to use the most and memorize them for future reference. 

wordpress keyboard shortcuts in gutenberg

2. Use the slash (/) key to add a new block.

One of the shortcuts most likely to come in handy frequently is the ability to add a new block by entering / followed by the name of the type of block you want. 

If you don’t want to browse the menu of block types each time you need to add one, a slash will produce a dropdown menu of the most common block types. If your preferred block type isn’t there, start typing the name of the block you want and WordPress will autosuggest the most relevant options based on your typing. 

add new block in wordpress gutenberg using slash key

3. Use the outline for easier navigation. 

You can easily jump to different parts of the page you’re working on by clicking on the i icon in the top menu. In addition to getting a snapshot of the number of words and blocks on the page, you’ll see an outline that lists all the headings on the page. Click on the section you want to go to, and Gutenberg will take you there. 

view document outline in wordpress gutenberg

4. Create reusable blocks. 

We’ve already mentioned reusable blocks, but they’re worth including in this section as well. For any content you’re likely to use more than once on your website, creating a reusable block can save you time. 

Click on the block you want to save, click on the three dots in the top right of the block menu, and select Add to Reusable Blocks, then give your block a name. 

create reusable blocks in wordpress gutenberg

The next time you want to drop that same block onto a new page, or a new section of the page, scroll down to the bottom of the blocks menu to the Reusable Blocks section, and select your custom block. Or use a slash and start typing in the name of your block.

search for and use reusable block in wordpress gutenberg

5. Drop images directly into the editor. 

In classic WordPress, you always had to add an image to your Media Library before you could add it to a post. You can now add an image or other piece of media to Gutenberg directly by dragging it from your desktop into the Gutenberg screen. The editor will automatically create a new block for it, then you can resize it, move it around, and make any edits you want once the block is created. 

6. Copy and paste links in directly. 

When you paste a URL into Gutenberg, it will now automatically pull in the link’s name and image for you. You can still hyperlink text yourself any time you want, but to simplify the process of sharing information about a URL, Gutenberg will automatically do it for you any time you paste a URL into the editor.  

wordpress gutenberg automatically hyperlinks urls

What if I Want to Go Back to the Old WordPress?

Regardless of the new features available in Gutenberg, some people will inevitably prefer the way things worked before. That’s okay. You have two options for continuing to use WordPress the old way.

1. Choose the Classic block.

True to their goal of letting you do pretty much anything you can imagine with blocks in Gutenberg, WordPress has included a Classic block that switches your post back to Classic view. When just starting to edit a new page, make the first block that you add the Classic block, which you’ll find in the formatting section.

use classic block in wordpress gutenberg
classic block in wordpress gutenberg

You’ll see an Editor that looks just like the old version of WordPress you know so well. 

2. Install the Classic Editor plugin.

The downside of using the Classic block option is that you’ll have to do it over and over again each time you start working on a new page. If you’d rather WordPress look the way it used to every time you open it, there’s a plugin for that. 

Simply search for “Classic Editor” in the WordPress plugin library, and click on the button to install it. You can go back to using the traditional version of WordPress and skip having to learn all this other stuff. 

install classic editor plugin for wordpress

Gutenberg is the Future of WordPress

You don’t have to use Gutenberg right now if you don’t want to, but the way WordPress rolled out this update makes it clear that they see it as the future of the platform. Future updates, features, and plugins are likely to work better on Gutenberg than with the classic editor. Whether now or later, at some point, you’ll probably want to learn and get used to Gutenberg. 

Once you take some time to get to know it, you may find it’s easier to use to create your WordPress website than sticking with the version you’re used to. A few minutes of learning it today could save you the hassle of feeling left behind down the line.

Kristen Hicks is an Austin-based freelance content writer and lifelong learner with an ongoing curiosity to learn new things. She uses that curiosity, combined with her experience as a freelance business owner, to write about subjects valuable to small business owners on the HostGator blog. You can find her on Twitter at @atxcopywriter.