How to Use Gutenberg (WordPress Editor)

In 2018, WordPress moved away from its long-time editor to one it dubbed “Gutenberg”.

Unlike the editor of old, WordPress users now use a modern drag-and-drop block editor to build and customize websites, publish content, and sell their services and products online.

Whether you’re a long-time user trying to make sense of the new editor, or you’re brand new to WordPress, this guide will teach you the ropes. You’ll learn:

• How Gutenberg blocks differ from the classic editor.
• How to use the block builder to create and edit pages.
• What the Gutenberg blocks do.
• How to unlock extra settings with the sidebar.
• How to use the toolbar to be more productive.

The Classic Editor vs. Gutenberg Blocks

The switch from classic editor to Gutenberg blocks is a huge leap for WordPress. Let’s look at how the editor has evolved.

The Classic WordPress Editor

From 2003 until 2018, WordPress provided its users with a basic text editor.

The classic WordPress editor was your typical WYSIWYG (“what you see is what you get”) editor.

In other words, you typed your content into the open field, formatted it using the toolbar provided, and that’s more or less what your text looked like on your website.

It’s a simple enough interface and one that many WordPress users grew accustomed to over the years. But it had its limitations.

For example:

This is how the content would display on the website once published. But you would only be able to confirm that everything translated okay from the editor to the page by using the “Preview” function.

There was no way to write content within the actual context of the page. In addition, it took a certain familiarity with HTML or an over-reliance on plugins to be able to build more advanced designs and layouts.

In 2018, WordPress set out to rectify these limitations by releasing the new WordPress editor (i.e. Gutenberg).

Note:

Want to learn how to build a website using a classic editor? Here’s our step-by-step tutorial on how to make a website.

The Gutenberg Block Editor

The new WordPress editor is a drag-and-drop block editor.

This means that content is no longer written in one main editor. Individual blocks are dropped into place to build out the content of a page.

When each block is selected, it comes with a unique toolbar. This allows for a more streamlined and customized editing experience as you’re only shown the editorial controls you need at that time.

The Gutenberg editor has also made it much easier to add the kinds of content and layouts that would otherwise be too time-consuming or difficult for a WordPress beginner to do on their own.

What’s more, there’s no guessing game anymore. What you create within the block editor is how it appears on your website. The fonts, styling, and layouts all match:

Is One WordPress Editor Better Than the Other?

As for which is better — the classic editor or Gutenberg — you’ll have to figure that out for yourself.

Although WordPress automatically comes installed with Gutenberg, users can install the Classic Editor plugin if they’re not ready to move to the block editor yet.

There are other editor add-on options available, too. Elementor and Beaver Builder are two of the more popular drag-and-drop editor alternatives, Block Categories
though they’re best suited for professional designers and developers who need to unlock more features.

For now, let’s take a deeper dive into Gutenberg and give you a better idea of what to expect from the WordPress drag-and-drop editor.

How to Use the Gutenberg Block Editor

Let’s review the Gutenberg block editor by setting up a new page (or post).

Start with the WordPress menu on the left side of the screen. If you want to create a new web page, hover over “Pages” and select “Add New”. If you want to create a new blog post, hover over “Posts” and select “Add New”.

Add a Title

With your new page or post created, give it a title in the “Add Title” block:

Create Your First Block

Paragraphs generally comprise the bulk of the content we put on a web page, which is why the first block Gutenberg gives us is always a Paragraph block:

If you want to start with a paragraph, add your cursor to the empty block that says “Start writing or type / to choose a block”. As you type, your content will fill the block.

Customize Content in a Block

To customize the style of your paragraph, use the toolbar that appears just above it.

Alignment

With most Gutenberg blocks, you’ll have the ability to change the alignment of the content inside the block:

The left is the default. You may also choose to center-align or right-align your content.

Formatting

Any time there is a text within a block, you can format it with bold:

Make the text italic:

Or add a hyperlink:

If you want to make your links open in a new browser window, click the down-arrow within the hyperlink bar. When you’re done making your changes, click the “Return” arrow to save the link.

Additional Style Options

If you click on the down-arrow in the toolbar, you’ll find additional text stylization options:

“Code” styles your text as if it were written in a code editor:

“Inline image” enables you to wrap your text around an image:

As you can see, this isn’t an efficient way to pair images and text beside one another in Gutenberg (we’ll review another way to do this later).

The last option here allows you to add a strikethrough through highlighted text:

More Block Options

The last button in the toolbar always reveals more block options:

These options will be the same regardless of which kind of block you’re editing.

Let’s quickly recap what these do:

• Hide Block Settings: Makes the sidebar on the right disappear.
• Duplicate: Makes an exact replica of this block.
• Insert Before: Adds a new empty block above this one.
• Insert After: Adds a new empty block below this one.
• Edit as HTML: Turns the block into a code editor if you want to write in HTML.
• Add to Reusable Blocks: Saves the block so you can reuse it elsewhere on the site.
• Remove Block: Deletes the block.

Transform Block

There’s one other button in the toolbar that you need to be aware of:

This button won’t always look this way though, so remember that the first button allows you to transform the current block into a related one.

For instance, you can turn a text-based block like Paragraph into Heading, List, or Quote. You cannot, however, turn something like a paragraph into an image or a separator line. You’ll need a new block for that.

Add a New Block

To add a new block to your page, you have a number of options.

Insert Before/After

You’ve already seen the Insert Before/Insert After options in your block’s toolbar. That’s one way to do it.

If you click away from your existing block and hover over the top of it, you’ll see a small plus-sign appear:

When you click it, it will reveal your blocks:

Choose the one you want to add the new block above the one you already have.

If you hover over the bottom part of the block, you’ll see the same plus-sign. The only difference is that it will add a new block below the one you have.

Use Your Keyboard

Another way to add a new block is by pressing the “Return” key on your keyboard:

Add a Block From the Toolbar

You can always just use the basic add block feature in the toolbar:

Move a Block

Once you’ve begun creating blocks, you might decide that you’re unhappy with the order in which they appear. Or maybe you added a block above when it should have been below.

There’s no need to delete blocks or cut-and-paste content from one block into another. The solution is simple.

Gutenberg is a drag-and-drop block editor. This means you can move your blocks wherever you want with ease.

There are two ways to do this.

Use the Move Arrows

The first option is to use the move-arrows on the left side of each block. Hover over the block you want to move and you’ll find an up- and down-arrow:

If all you want to do is move a block up or down once, this option works well.

Use the Drag-and-Drop

If you want to make a more drastic rearrangement of your blocks, you should use the drag-and-drop.

It’s located in the same place as the arrows. Hover over the block you want to move and grab ahold of the dots that appear in the middle. You’ll see your cursor change to a hand when you do:

When moving the block to a new part of the page, make sure you see a dark line appear before you drop it down:

This lets you know that you’re moving the block to available space. Without that line, the drag-and-drop won’t work.