How to Use WordPress Gutenberg Block Editor

Every new WordPress release is met with great enthusiasm, and WordPress 5.0 “Bebo” is no exception.

In fact, WordPress 5.0 has garnered way more excitement than any version before it, and the reason is simple: Gutenberg, the new WordPress editor based on “blocks”, is now an integral part of the popular CMS!

In this article, I’ll discuss what Gutenberg WordPress Editor is and how to get familiar with it.

Let’s start.

What Is WordPress Gutenberg?

WordPress Gutenberg is a completely redesigned and reimagined editor. This is a great treat for WordPress users who see the editor as a simple fix for a series of problems. In fact, users who directly deal with content production (bloggers, editors, copywriters) have only good things to say about the Gutenberg editor.

It has replaced the WordPress Classic Editor, TinyMCE and has become a part of the WordPress core with WordPress 5.0 onwards.

Gutenberg WordPress Editor elevates the experience of creating posts and pages to a new level — enriching the experience of creating content. It’s not just a simple tool that you can use to write the perfect blog posts, but a powerful visual editor. It is based on a block architecture that allows users to create any type of content conveniently.

In order to eliminate shortcodes and manual HTML blocks and to greatly simplify the process of editing and publishing content, Gutenberg provides dynamic blocks, thus making content creation and page management more user-friendly.

Gutenberg Editor vs. Classic Editor

Before I dive into the WordPress new editor, let’s first compare and understand the differences between the Gutenberg Block Editor and the Classic Editor.

Here’s what the Classic WordPress Editor looked like:

If you upgrade to WordPress 5.0, here’s what the new block editor looks like:

As you can see, these are two completely different editors for creating content in WordPress.

The old classic editor was a text editor with formatting buttons similar to those of Microsoft Word. The new editor has a completely different approach to editing called “Blocks” (hence the name Block Editor).

You can add blocks for paragraphs, images, videos, galleries, audio, lists and more. There are blocks for all common content elements and others can be added through WordPress plugins — or by extending the functionality of the Gutenberg editor through code.

Why Use Gutenberg WordPress Editor

• Gutenberg Editor is visual, intuitive, and clean.
• It allows you to modify content by sections. This presents a clear picture and helps avoid mistakes.
• It has a great selection of blocks for almost every use case.
• Headers and footers are displayed by default.
• With WordPress Gutenberg, you do not need to install another builder to style the content.
• Excellent usability for mobile devices and tablets.
• Easy and quick embedding of content from other platforms.

The performance of the plugin is good for all devices, and the websites never slow down for any users.

— Source: WordPress/Performance Benchmark of Gutenberg Editor

However, like all things WordPress, Gutenberg plugin also has a flip side. I think now is a great opportunity to list the points that I think will negatively affect the plugin adoption by the community.

Cons of Gutenberg WordPress Editor

In addition to issues in editing content, users sometimes face difficulties when working with Gutenberg Editor. Here is an example!

Some users have reported compatibility issues with installed plugins and themes.

Plugin compatibility is a serious issue when it comes to Gutenberg. The reason is simple: Most plugins interact directly with the WordPress Editor, both to add new features and include shortcodes for extending core functionality.

For this reason, the installed plugins must be compatible with Gutenberg. This is a serious issue since many plugins do not offer (or care for) plugin compatibility. Therefore, it is recommended to check compatibility issues of plugins with Gutenberg.

Working with WordPress Gutenberg

Let us now discover the main blocks of Gutenberg, the brand new WordPress editor.

What are the Gutenberg Blocks?

Blocks are pieces of content that you add to the editor to create content layouts. Each item you add to your page or post is a block.

Although the Classic WordPress Editor already supports these elements, Gutenberg makes content integration easier and more intuitive without requiring in-depth knowledge of writing code.

On the right, the “+” button opens a tab divided into further tabs. Each tab shows a list of logically organized blocks. The “Blocks” tab shows the following groups of blocks.

• The “Inline Elements” section currently has a single block for inserting inline images.
• The “Common Blocks” section contains all the basic blocks including the paragraph, image, heading, etc. for creating a post or page.
• The “Formatting” section has more options such as code, custom HTML, for customizing the contents of your post or pages.
• The “Layout Elements” section allows you to customize buttons, columns, groups, media, and text.
• The “Widgets” section allows you to embed shortcodes, archives, calendar, latest comments, posts, and tag cloud.
• The “Embeds” section adds support for the integration of external resources like Facebook, Twitter, YouTube, etc. without requiring additional plugins.

Gutenberg Block Manager

This feature has always been in demand since most of the users find it annoying to see all the blocks they are never going to use.

This feature is currently available in the latest Gutenberg version, expected to be shipped with WordPress 5.2. If you are using WordPress 5.0, download the Gutenberg plugin. You can configure the “Block Manager” settings from “Hide more tools & options”, represented by a vertical ellipsis (⋮) in every page or post.

When you click the “Block Manager”, a menu pops up to allow enabling and disabling blocks. Simply uncheck the blocks you want to disable.

Creating Gutenberg Blocks

The top bar of the Gutenberg Editor provides a series of tools for intuitive post management. Below the toolbar, there are two areas for creating content and a Settings menu.

The editing area of a new page or post has two default blocks, intended for the title and the first paragraph, and a button for adding new blocks (see below).

Default Blocks

If a block of an article is configurable, the paragraph block is provided with two toolbars. The first, top left provides the formatting tools. The second, activated by the button on the right, is organized in menu form.

From this menu, it is also possible to change the current block type and transform the paragraph into a header, a list or a quote. The menu varies depending on the type of block.

Tools Menu

The button hidden under the “+” symbol allows you to insert a new block. When hovering the mouse, the shortcuts of the default blocks are revealed. And if you click these blocks, the panel of available blocks opens up.

Add Embed Blocks

Once the necessary block is selected, the editor will show a form with the options for creating the code. Users now do not have to manage the code but simply follow the wizard. In the following example, all you have to do is enter the URL of a YouTube video.

Add Embed Forms

Once the “Embed Block” is inserted, the available options change as shown in the image below.

Configure Embed Blocks

Many blocks allow you to change type, for example, changing from paragraph to list, to quote or header. You can imagine the degree of freedom that this simple feature offers to the users.

List Block

Once inserted, the blocks can be reordered with simple drag and drop or by clicking the up/down buttons, located on the left side of the blocks.

Toolbar

The toolbar of the new editor resembles the sidebar of the classic editor. The difference is in the interface, which is more consistent with the principles of usability and definitely enriches the user experience.

Default Sidebar

The new sidebar is divided into two tabs: “Document” and “Block.”

The first tab contains several widgets that can be compressed or extended in the same way as an accordion menu. The second tab, called Block, displays the advanced settings of the selected block. In the following image, you see the settings for a “Paragraph” block.

Creating a Reusable Block

One of the advantages of blocks is that they can be saved and reused individually. This is especially useful for bloggers and editors who frequently need to use specific content formatting snippets to their publications.

Simply click the menu button located in the right corner of the toolbar of each block. In the menu that pop-ups, select the option “Add to Reusable Blocks.”

You will be asked to provide a name for the reusable block. Enter a name and click the “Save” button.

The block editor will now save it as a reusable block. Now that you’ve saved the block, let’s see how to add the reusable block to other posts and WordPress pages on your website.

Import/Export Gutenberg Blocks

Simply go to the page where you want to add the reusable block. From the edit section, click the “Add Block” button.

You will find your saved block under the “Reusable” tab. You can also find it by typing its name in the search bar.

You can hover over to get a quick overview of the block. Just click the block to insert it into the page.

All reusable blocks are stored in your WordPress database and you can manage the list by clicking the “Manage All Reusable Blocks” link. This will take you to the “Block Manager” page. From there, you can edit or delete reusable blocks. You can also export reusable blocks and use them on any other WordPress website.

How to Disable Gutenberg Editor?

The new WordPress editor is one of the most controversial WordPress features ever. Fortunately, users who just cannot stand the “block” paradigm can always go back to the classic editor. And they can do it for many years to come.

Disable Gutenberg is among the most popular ‘Anti-Gutenberg’ plugins out there. It intends to eradicate the block editor and replace it with Classic WordPress Editor.

The plugin offers the possibility to delete any Gutenberg track from WordPress including the invitation to “Try Gutenberg” displayed on WordPress versions prior to 5.0. Once the plugin has been installed, all options are available (and enabled by default) in a new section of the “Settings” area.

Wrapping up!

Looking at the WordPress Gutenberg Editor, you may be wondering if you will spend more time adding and adjusting blocks than creating real content? Well, the new block editor is incredibly fast and even a very basic use for a few minutes will convince you to use the plugin more often

If you have any feedback related to this article, feel free to use the comment section below.