The Gutenberg editor in Drupal: what it is like & how it works

In the long-term competition between CMSs, WordPress has always had an ace up its sleeve — super intuitive content creation experiences. People who have been using WordPress may be reluctant to start working with Drupal.

This needs to be resolved! This is what the Drupal creators thought and decided to make Drupal easier for editors out of the box. A giant amount of work has been done in this area, so Drupal is now totally different from what it was like several years ago.

In Drupal 8, users got the handy CKEditor as the default text editor. In the later releases of D8, we all got an opportunity to build page layouts with the drag-and-drop Layout Builder, add and reuse media from the user-friendly Media Library, enjoy the accessible and powerful administrative Claro theme, and more. For Drupal 9 and Drupal 10, there is the Easy-out-of-the-box Initiative that is focused on improving the content tools and making them enabled from day one on all new Drupal installations.

However, even this is not all. The audience that loves specific WordPress-style experiences (especially the ones that have been added in recent years) can enjoy them in Drupal as well. This is thanks to tools like the Gutenberg editor. And they can feel comfortable in moving to Drupal, which widens the potential circle of Drupal users.

Gutenberg is different from both Drupal’s CKEditor and Layout Builder. In this article, we will be exploring the Gutenberg editor for Drupal, so keep reading to learn more about this interesting alternative to Drupal content page creation tools.

What is the Gutenberg editor?

Gutenberg editor, also known as the “WordPress block editor,” is a content editing tool based on ReactJS. It offers unprecedented opportunities to non-tech users. Without developer input, they can create rich content pages with a wide choice of page elements known as blocks.

In Gutenberg, everything is a block. The tool has extensive block library of categorized blocks such as headings, galleries, lists, audios, cover images, files, videos, pull quotes, tables, verses, buttons, columns, spacers, separators, social media embeds, and so many more.

All blocks can be easily added to the content page thanks to the intuitive drag-and-drop interface with lots of visual cues. The whole process takes place on a white, minimalistic screen. It is also immediately clear how the page will look on the front-end.

Gutenberg was added to the WordPress 5.0 core in 2018 as the default editor replacing the traditional Tiny MCE editor. The brand-new experiences it offered were unusual for that time and the tool was receiving contradictory feedback due to various issues. However, Gutenberg has now been polished and improved and deserves the title of the “WordPress block editor” because it’s hard to imagine WordPress without it. Everyone who has used WordPress during recent years is most likely to have met with this tool. And, as you already know, its use has extended beyond WordPress.

Gutenberg editor in Drupal

The Gutenberg module

The powerful features of Gutenberg are available in Drupal via a contributed module, which means it needs to be installed and not available out of the box. The Gutenberg module was created in 2018, close to the time when the editor arrived in the WordPress core.

The module provides a good user experience, it is scalable and has a high performance. One of its useful features is that the tool enables you to create reusable blocks that are saved within the editor and are available anytime you need. The Gutenberg module integrates with Drupal’s file system, Media Library, and other specific functionalities. Via this module, you can also have access to the Gutenberg Cloud library of contributed blocks or share your own.

Gutenberg’s and Drupal’s capabilities are perfectly combined in the module. When creating content with it, you will see that is has Gutenberg blocks and settings, as well as traditional Drupal blocks and settings. You will see it very soon in our article’s “how to” part.

The creators of the module have also built a website where anyone can try out the Gutenberg editor demo with the specifics of how it looks and works on Drupal websites.

How to use Gutenberg in Drupal

Installation

Download the Gutenberg module like any other contributed Drupal module. On the Extend tab of your admin dashboard, you will see that it consists of 3 submodules:

• Examples Block
• Gutenberg Cloud
• Gutenberg Editor

The Gutenberg Editor is the only one that is required. The two others can optionally be enabled.

Enabling Gutentberg for a content type

Go to Structure > Content types, select the content type you want to use Gutenberg for, and click “Edit.”

On the Edit tab, you will have the “Gutenberg experience” option that needs to be enabled.

This unfolds additional options. Among them are the allowed Gutenberg blocks and allowed Drupal blocks where you can check which blocks should be available to website’s editors as they work with the tool.