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 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:
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 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.
— 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!
Regularly face issues performing basic tasks on new #WordPress sites. Struggled today with adding hyperlinks to text on new page that had not yet been saved and now receiving block errors updating an existing page. Might be time for Classic Editor — again. #Gutenberg pic.twitter.com/rdUII0OUZF
— Colleen M. Brady (@ColleenMBrady) April 12, 2019
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.
- 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.
Playing around with the new block manager that’s coming to you #Gutenberg #WordPress installation *SOON*! I like what I see so far, I think this feature adds great value for turning blocks on/off on a user leve (already had questions about this in a workshop!) pic.twitter.com/uZfAMNgF2y
— Monique Dubbelman (@BOEmedia) March 15, 2019
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.
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 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”.
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.
Interesting debate happening over in the #Gutenberg repo over whether @SassCSS or @PostCSS (or both) should be included in the default `wp-scripts` build process. Your input is valuable: https://t.co/qbPmY80NhJ #WordPress
— Morten is on a prolonged break from all this (@mor10) April 4, 2019
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.
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.
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].