how to use the new editor » 【2022 】

If you’ve been using WordPress for several years, you’ll remember when the folks at WordPress released the Gutenberg editor in WordPress 5.0 in 2018.

This new default editor was a major overhaul for editing posts and pages on your site. It transformed the large text box that website owners were used to into a very different block-based editing platform.

Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stuck with the classic default editor for as long as possible. Other website owners embraced the change for its simplicity and ease of use.

If you’re transitioning and curious about what to expect, this WordPress Gutenberg tutorial will walk you through the key features you need to know and understand. This should make your transition as easy as possible.

What to expect in WordPress Gutenberg

The main thing to know about the Gutenberg editor is that it’s block-based. This means that everything you need to add is managed by blocks. Gutenberg blocks include (but are not limited to):

  • Paragraph
  • On your mind
  • Picture
  • Ready
  • Quote
  • Coded
  • preformatted
  • pullquote
  • Desk

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

Adding blocks is as easy as selecting the + icon to the right below the most recent block you added.

Selecting one of the blocks in the pop-up window adds that block as the next section of your page or post.

Before we get to those blocks, let’s start from scratch and create a new post using Gutenberg in WordPress.

Create posts and add blocks

Adding a post remains unchanged from the latest version of WordPress. just select Works in the left navigation bar and select add new below.

This will open the post editor window. This is also where everything is different. You will see the default WordPress Gutenberg editor.

Add block elements in the Gutenberg editor

You can enter the title of your article in the Title field. Then select the + icon on the right to add the first block.

paragraph blocks

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

This will insert a block field where you can start writing the first paragraph of your post. Paragraph block formatting follows the default font for paragraph blocks on your site.

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

  • Your paragraph can be as long as you want. The text will automatically wrap to the next line, just like in the classic editor.
  • If you press Enterthe Gutenberg editor automatically creates a new paragraph block, but it looks like a second paragraph with a paragraph break.
  • Highlighting any text in the paragraph will bring up a formatting window where you can change the formatting of that text or change the block to a list or another type of block.
  • Select the three points and select delete block to remove a paragraph block and replace it with something else.

image blocks

If you select the Image block, you will see an Image box where you can select an Upload button to upload an image to your post from your computer. Select the media library link to use an image from your existing media library, or Insert from URL to link to an image on another site.

This will insert the image into the post where you added the new image block. You will notice that you can type the title of the image directly below the image.

You can use the same formatting options in caption text as in regular paragraph text.

block list

When you add a new block and select Readyit will insert the list block at that point in the article.

It will show a bullet, but when you type and press Entereach new chip will appear when you need it.

List formatting also follows the font style and size defined by your theme. So don’t be surprised if the font of your list is different from that of the paragraph blocks.

You can highlight text in the list block and you’ll see formatting options for that text if you want to edit it. You can’t change the font style here, but you can bold, italicize, add a hyperlink, or change the block type entirely.

other blocks

If you want to see all available blocks, select + to add a block, then select browse all to see the full list.

This list is quite long. Everything you’ll remember that’s available in the Classic Editor through its menu system will be included here. These include other commonly used blocks such as:

  • the tables
  • Files and media
  • Videos
  • The “More” tag
  • Page breaks and separators
  • Widgets like social 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 keep the blocks you added where you added them. You can go back in your message and select the + icon between one of the existing blocks. This will allow you to insert new blocks between existing ones.

You are also not stuck with the placement of your blocks. In the classic WordPress editor, it wasn’t always easy to move things like images to other sections of your post without disrupting the main coding.

In Gutenberg, moving things like images is as simple as selecting the block, then selecting the up or down arrows from the context menu bar to move the block up or down in the box. message.

Each time you select the arrow, it will drag that block one position in the direction you selected.

Using the Glutenberg Editor in WordPress

The post area isn’t the only place to add new blocks. You will notice that there is a very simple icon menu at the top of the editor where you can use the + icon to also add blocks.

The other icons in this menu give you quick access to other Gutenberg features.

  • The pen Edit The icon allows you to switch to selection mode to more easily select the blocks. Double-click on a block to return to edit mode.
  • to cancel Where Remake The icons (left and right curved arrows) undo or redo your last change.
  • The I The (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
  • The to present The icon allows you to quickly navigate to the blocks in your article based on the order in the article outline.

For many people, the WordPress Gutenberg editor takes some getting used to. But after discovering how easy it is to create, edit and manipulate blocks of items in your posts, you will find that your process of creating posts and pages is faster and more productive.