This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

๐Ÿ”Šย Web Growth Summit is here! Learn from industry experts on July 17-18, 2024. REGISTER NOWโ†’

WordPress Gutenberg: Experience the New Block Editor

Updated on July 4, 2023

11 Min Read
wordpress gutengberg

WordPress Gutenberg is the new block editor that was introduced in WordPress 5.0. It is a revolutionary way of creating and editing content on WordPress websites.

Instead of using a single text editor, Gutenberg allows you to use different types of blocks to add and arrange various elements on your pages and posts. Blocks are like Lego pieces you can stack and customize to build layouts. You can use blocks for text, images, videos, buttons, tables, columns, etc.

In this blog post, I will show you how to use Gutenberg to create stunning and engaging content for your WordPress site. I will also share some tips and tricks to make the most of the new block editor.

Overview of 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 plugin

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.

Experience the new Gutenberg Editor with the BEST WordPress Plugins.

Download our FREE ebook and discover 45+ meticulously chosen WordPress plugins customized to enhance your site’s speed, bolster security, and improve user experience.

Thank You

Your list is on itโ€™s Way to Your Inbox.

Gutenberg Editor vs. Classic Editor

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

Classic Editor Gutenberg Editor
Simpler, traditional WordPress editing Block-based editing
Limited customization Easy and extended customization
It’s compatible with most if not all, themes and plugins. It might face compatibility issues with some older themes and plugins.
offers the ability to create and reuse blocks No reusable blocks
Easy-to-use Has a steeper learning curve due to its more complex interface and functionality.

Here’s what the Classic WordPress Editor looked like:

classic editor

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

gutenberg editor

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 block plugins โ€” or by extending the functionality of the Gutenberg editor through code.

Key Features of the Gutenberg Editor

Let’s now look at some of the key features of the WordPress Gutenberg Editor.

Key Features Description
Block Editing It lets you edit the content through blocks.
Ease of Use It simplifies the process of building pages and posts with its drag-and-drop feature.ย 
Embeds It allows users to embed content from various sources, like social media sites, video platforms, etc., directly into their WordPress sites.
Reusable Blocks If you regularly add the same content to your posts or pages, the reusable blocks feature can save you time.
Customization It gives you the power to customize your blocks with a wide range of settings.
Full Site Editing (FSE) It allows users to manage and customize their entire site using the block concept.
Compatibility and Integration Gutenberg editor is compatible with most WordPress themes and plugins, ensuring seamless integration without breaking the site.

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.

gutenberg performance
โ€” Source: WordPress/Performance Benchmark of Gutenberg Editor

However, like all things WordPress, the 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.

Pros and Cons of Gutenberg WordPress Editor

Some of the pros of using Gutenberg include:

  • Block-level Editing: Gutenberg divides content into blocks, such as images, headings, paragraphs, videos, and audio files. This allows for easy manipulation and organization of content.
  • Core feature: As a core feature of WordPress, Gutenberg is compatible with other WordPress features and plugins. Developers can build support for Gutenberg into their plugins, improving compatibility.

Some potential cons of using Gutenberg include:

  • Learning curve: The block-based approach to creating content may take some time to get used to for users familiar with the classic editor.
  • Compatibility issues: While Gutenberg is a core feature of WordPress, there may still be compatibility issues with some themes or plugins that have not been updated to support it.

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 the 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.

gutenberg block tab

  • 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, and 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, calendars, 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 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 (โ‹ฎ) on every page or post.

gutenberg block manager

When you click the โ€œBlock Managerโ€, a menu pops up to allow enabling and disabling blocks. Simply uncheck the blocks you want to disable.

gutenberg editor blocks

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

gutenberg 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.

gutenberg paragraph block

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

gutenberg block settings

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

gutenberg 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

gutenberg embed block

Once the โ€œEmbed Blockโ€ is inserted, the available options change, as shown in the image below.

Configure Embed Blocks

gutenberg embed url

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

gutenberg 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

gutenberg document format

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.

gutenberg block sidebar

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 for 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โ€.

creat resuable blocks

You will be asked to provide a name for the reusable block. Enter a name and click the โ€œSaveโ€ button.

save gutenberg block

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.

gutenberg resuable blocks

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.

export gutenberg blocks

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.

disable gutenberg editor

Alternatives for Gutenberg Editor

There are several alternatives to WordPress Gutenberg Editor. Some of the most popular ones are:

Summary

In conclusion, WordPress Gutenberg is a new and innovative way to create and edit content on your website. It offers a variety of blocks that you can use to customize your layout, design, and functionality. Check out Cloudways web hosting support.

If you want to experience the new block editor, you can install WordPress 5.0 or higher or use the Gutenberg plugin for older versions. WordPress Gutenberg is a great tool for beginners and experts alike, and it can help you create stunning and engaging websites with ease.

Frequently Asked Questions

Q. Can you create custom Gutenberg blocks in WordPress?
A. Yes, you can create custom Gutenberg blocks in WordPress. The process involves some knowledge of JavaScript, React, and PHP, as you will have to write custom code to define the structure, behavior, and appearance of your block.

Q. Is Gutenberg WordPress free?
A. Yes, Gutenberg, also known as the Block Editor, is free. It is included in WordPress 5.0 and later versions at no additional cost.

Q. Is Gutenberg good for WordPress?
A. Yes, it has made WordPress more user-friendly and adaptable. However, it has mixed reviews, but WordPress continues to improve and develop it, ironing out issues along the way.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Mansoor Ahmed Khan

Been in content marketing since 2014, and I still get a kick out of creating stories that resonate with the target audience and drive results. At Cloudways by DigitalOcean (a leading cloud hosting company, btw!), I lead a dream team of content creators. Together, we brainstorm, write, and churn out awesome content across all the channels: blogs, social media, emails, you name it! You can reach out to me at [email protected].

×

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Want to Experience the Cloudways Platform in Its Full Glory?

Take a FREE guided tour of Cloudways and see for yourself how easily you can manage your server & apps on the leading cloud-hosting platform.

Start my tour

CYBER WEEK SAVINGS

  • 0

    Days

  • 0

    Hours

  • 0

    Mints

  • 0

    Sec

GET OFFER

For 4 Months &
40 Free Migrations

For 4 Months &
40 Free Migrations

Upgrade Now