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 Copy a Page with WordPress Gutenberg Editor

Looking for ways to copy your WordPress web pages? The Gutenberg block editor got you covered. In this article, you will read about 3 different methods you can instantly apply when crafting your WordPress website.   How to Copy a Page with WordPress Gutenberg...

How to Add Tabs to Your WordPress Site with Gutenberg

Tabs are quite useful in numerous situations and can be a fresh addition to your WordPress websites. Massively used to showcase content categories, news, and various other types of posts in a very structured manner, tabs contribute to making your site content more...

How to Create Tables in WordPress Using Gutenberg Editor

Creating a table in WordPress with the Gutenberg Block Editor is a straightforward task. Should you need to add one or several tables to your pages, the following paragraphs explain how to do so.   How to Create Tables in WordPress using Gutenberg Editor  ...

5 Best WordPress Slider Plugins for Gutenberg

When crafting your WordPress website, it is not only important to publish informative and well-structured content, but it is also crucial to make your web pages as aesthetically appealing as possible. An effective way of making your site more beautiful is by inserting...

How to Use the Navigation Block in Gutenberg

With the Gutenberg Navigation block, you can add various types of navigation on any page or within any blog post on your website. Similar to the classic WordPress menu, the Navigation block can be modified in numerous ways and become a handy tool in many situations....

Ready to Create Your Website?