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 dedicated 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:

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



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.


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 Download WordPress Media Library from the ZETTAHOST Server

There are many reasons why you would want to download your WordPress media library files. You might wish to migrate your website content to a different domain, make a backup, or simply want to have a safe copy of your media files. Regardless of the reason, there are...

How to Download Media Library Using WordPress Settings

In case you wish to keep a copy of your WordPress media library, migrate your site content to a different domain, or want to make a full site backup, WordPress got you covered. The platform comes with a handy built-in Export function that you can access and use...

How to Download WordPress Media Library with a Plugin

A simple way to download your WordPress media library files is by using a plugin. With this method, you can store your files on your device in a matter of minutes. In the following paragraphs, you will read how to do so step by step.   How to Download Your...

How to Change Text Color With WordPress Theme Customizer

If you wish to make some general changes to your website text formatting, then using the WordPress theme customizer is a great way to do so. Each installed WordPress Theme comes with a customizer, and when formatting your texts, it is a good idea to have a closer look...

How to Change Text Color With WordPress Classic Editor

Formatting your content in WordPress is essential for crafting a useful website. Along with various other formatting techniques, coloring text can help you retain your visitors' attention and quickly point out the important information you wish to share online. In the...

Ready to Create Your Website?