How to Use the New Editor of WordPress Gutenberg

How to Use the New Editor of WordPress Gutenberg.

If you’ve been using WordPress for a few years now, remember how in 2018 the WordPress guys released the Gutenberg editor in WordPress 5.0.

This new default editor has been overhauled to edit both posts and pages on your site. This turned the large text box that website owners are used to into a completely different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and remained the classic default editor for as long as possible. Other website owners hailed this change for its simplicity and usability.

If you’re making the transition and wondering what to expect, this WordPress Gutenberg guide will walk you through the basic features you need to know and understand. This should make the transition as easy as possible.

What to Expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it is block-based. This means that everything you need to add is block driven. Blocks in Gutenberg include (but are not limited to):

Paragraph
Header
Image
List
Quote
Code
Preformatted
Quote
Table

There are also several other advanced blocks that are rarely used. You can see additional blocks if you install new WordPress plugins in the editor.

Adding blocks is as easy as clicking the + sign on the right below the most recently added block.

When you select any of the blocks in the pop-up window, that block is added as the next section on your page or post.

Before we move on to these blocks, let’s start from the very beginning and create a new post using Gutenberg in WordPress.

Creating Posts and Adding Blocks

Adding a post has remained unchanged from the latest version of WordPress. Just select “Posts” from the left navigation bar and select “Add New” below it.

This will open a message editor window. Here, too, everything is different. You will see the default Gutenberg WordPress editor.

Adding Block Items in the Gutenberg Editor

You can enter a title for your post in the title field. Then click the + sign on the right to add the first block.

Paragraph Blocks

The most common first block people add after a heading is a paragraph block. To do this, select Paragraph in the pop-up window.

This will insert a block box where you can start typing the first paragraph of your post. The paragraph block formatting matches the default font for your site’s paragraph blocks.

Here are some tips for adding paragraph blocks in the Gutenberg editor.

Your paragraph can be as long as you like. The text will automatically wrap to the next line, just like in the classic editor.
If you press Enter, the Gutenberg Editor will automatically create a new paragraph block, however, it just looks like a second paragraph with a paragraph. break.
Selecting any text in a paragraph will open a formatting window where you can change the formatting of that text or convert the block to a list or other type of block.
Select three dots and choose Delete Block to delete the paragraph block and replace it with something else.

Image Blocks

If you select an image block, you will see an image window where you can click the Upload button to load an image into a post from your computer. Select the Media Library link to use an image from an existing media library, or Paste from URL to link to an image from another site.

This will insert the image into the article where you added the new image block. You will notice that you can enter a caption for the image right below it.

You can use the same formatting options for caption text as for normal paragraph text.

List Blocks

When you add a new block and select List, it inserts the listed block at this point in the article.

One marker will be displayed, but as you type and hit Enter, each new marker will be displayed as you need it.

The formatting of the list also follows the style and font size defined by your theme, so don’t be surprised if the font in your list differs from your paragraph blocks.

You can select text in the list box and you will see the formatting options for that text if you want to change it. You cannot change the font style here, but you can make it bold, italicized, add a hyperlink, or completely change the block type.

Other blocks

If you want to see all available blocks, click + to add a block, then select View All to see the entire list.

This list is actually quite long. Anything you remember was available in the classic editor via its menu system will be included here. These include other commonly used blocks such as:

Tables
Files and Media
Videos
The More Â»
Page breaks and separators
Widgets such as social media icons, tag clouds, calendar, and WordPress plugin widgets.
Embed code for social sites, media sites like YouTube and Spotify, etc.

Other Gutenberg Features

You don’t have to stick with the blocks you added wherever you add them. You can scroll back to your post and select the + icon between any existing blocks. This will allow you to insert new blocks between existing ones.

You also don’t get hung up on placing your blocks. In the classic WordPress editor, it wasn’t always easy to move things like images to other sections of your post, sometimes without breaking the background coding.

In Gutenberg, moving elements such as images is as easy as selecting a block and then clicking the up or down arrows on the popup menu to move the block up or down in a message.

Each time you press an arrow, it moves the block one position in whatever direction you choose.

Using the Glutenberg Editor in WordPress

The message area is not the only place where you can add new blocks. You will notice a very simple graphical menu at the top of the editor, where you can also use the + icon to add blocks.

Other icons in this menu provide quick access to other Gutenberg features.

The Pen Edit icon allows you to switch to Selection mode to make it easier to select blocks. Double-click the block to return to edit mode.
Undo or Redo icons (curved left and right arrows) will undo or redo the last change.
Icon I (Details) The icon shows the number of characters, words, headings, paragraphs, and blocks in your message.
The Outline icon allows you to quickly jump to blocks in your post based on their order in your post structure.

Many people need to get used to the Gutenberg editor in WordPress. But after seeing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that the process of creating posts and pages is faster and more productive.

–