Home » WordPress Tutorials » Basics » How to Use WordPress Gutenberg Block Editor

How to Use WordPress Gutenberg Block Editor

The Gutenberg Block Editor is a content editor that makes it easy for all WordPress users to create web pages and new blog posts via an intuitive interface and numerous handy functionalities.

Using Gutenberg doesn’t require learning and using any web development skills.

In a series of articles, we will explore how to use the Gutenberg editor and benefit from its full potential.

In the following paragraphs, you will read more about the editor and how it might help you create a website with WordPress.

 

What is the WordPress Gutenberg Block Editor

Gutenberg, also known as the Block editor, was introduced in 2018 and presents a new way for creating, editing, and publishing content in WordPress – it is separated and stored in various boxes, called blocks that can be edited in different ways. When stacked together, these blocks form the final design of your web page or blog post.

Working with these blocks is done via an intuitive navigation system, which makes them a preferred method of working with WordPress.

Before Gutenberg, WordPress featured the so-called Classic Editor which uses text for editing content. With the Classic editor, a.k.a, Text editor, users can embed additional snippets of information within their text and thus add media files, anchor texts, buttons, and others. However, Gutenberg introduced a new way of working and distributing content, which eventually became the default one for WordPress.

 

The Gutenberg Block Editor Interface

Regardless of whether you want to create a new page or publish a blog post, the interface remains the same:

WordPress Gutenberg Block Editor Interface

 

Let’s have a closer look:

WordPress Gutenberg Text Editor Interface components

 

  1. Content Area. This is the place where you can add and edit various types of content – text, media files, and others. Also, when editing a web page, you can add various types of functionality via this area – buttons, widgets, and animations.
  2. Post/Page settings. This sidebar gives you some general options regarding the edited page/post. For example, you can distribute your article into categories, add tags, choose a parent page, manage a comment section, and more.
  3. Top toolbar. From here you can publish your page/post or browse the rich blocks library.

 

How to Use the Gutenberg Blocks

Using blocks to craft your page/post design is quite easy. You only need to hover your mouse over the content of your post or page and you will notice that it is separated into different boxes:

WordPress Gutenberg Block Editor components

 

Once you click on any of these boxes, a menu with options will appear. Depending on the type of block you are using, the options will vary. For example, if you click on a Paragraph block, you will open the text formatting options:

WordPress Gutenberg Block Editor more settings

 

Also, if you click on the three dots at the right of the menu, you will open some more options that might come in handy in various situations. For example, you can edit the width of blocks:

WordPress Gutenberg Block Editor menus

 

These options are available for each individual block you insert in your content area.

 

How to Include Gutenberg Blocks

There are three main ways of including a block in your content area:

  1. Via the Block Inserter:

WordPress Gutenberg Block Editor add new

 

By clicking this button, you will open the vast library of available blocks that you can instantly insert in your content area. From here you can choose whether to include a heading block, an image, a grid, a review, a link, forms, or anything else:

WordPress Gutenberg Block Editor library

 

  1. Insert a block via the Add Button in the Content Area:

This button is always available and stays right below the end of your content. Clicking it will open a small box of suggested blocks that you can choose from:

WordPress Gutenberg Block Editor button

 

However, if you don’t see the block that you wish to include in your page/post, you can click on the Browse all-black button, which will open the full library of Gutenberg blocks:

WordPress Gutenberg Block Editor box

 

WordPress Gutenberg Block Editor blocks

 

  1. Hovering your mouse cursor between two already inserted blocks. This will make WordPress display a Plus button:

WordPress Gutenberg Block Editor block button

 

By clicking on the Plus button, you can browse from suggested blocks, or once again open the full library of available blocks. Once you select a block, it will appear where the Plus button is:

WordPress Gutenberg Block Editor sample text

 

When you are ready to edit your page/content, you can save the changes and publish it:

WordPress Gutenberg Block Editor publish content

 

 Conclusion

The WordPress Gutenberg editor is a great tool that can help you craft a beautiful and fully functional website via an intuitive interface and tons of easily accessible options.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways. In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.   How to Add...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

Ready to Create Your Website?