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.

Click “Save content type” and you are all set. All articles will now be using Gutenberg.

Note: Full lists of blocks

Here are the blocks enabled by default that will be immediately available in the Gutenberg interface grouped into categories (unless you choose to change this in the content type Gutenberg settings):

In addition, you can enable more:

• Amazon Kindle
• Animoto
• CloudUp
• College Humor
• Crowdsignal
• Daily Motion
• Hulu
• Imgur
• Issuu
• Kickstarter
• MeetUp
• MixCloud
• Poll Daddy
• Reddit
• Reverb Nation
• Screencast
• Scribd
• Slideshare
• Smugmug
• Speaker Deck
• Speaker
• TED
• Tumblr
• VideoPress
• WordPress TV

We would like to focus our special attention on the Drupal blocks. Only two of them are enabled by default — Search form and Breadcrumbs. However, you can make more Drupal blocks available:

• Page title
• User login
• Help
• Recent comments
• Recent content
• Who's online
• Footer
• Main navigation
• User account menu
• Messages
• Powered by Drupal
• Site branding
• Syndicate

Creating content with Drupal Gutenberg

Let’s move on to the most interesting part. When creating a new article, you will immediately notice that the interface is totally different from the traditional CKEditor. Instead of having a large text field with the content body, you will create content on a block-based approach.

Just click the “+” icon on Gutenberg’s white minimalistic screen. It presents you with available blocks that you can add by clicking on them. Another way to add blocks is just by typing their names. For your convenience, the first category of block is “Most Used.”

On the right of the main document, there is a tab with Drupal settings for a node including the title, menu settings, URL alias, authoring information, and more.

An example of a very common action is adding text. You will need a Paragraph block for this. You can also get it created automatically by typing some text.

If, let’s say, you want to add an image, you can select an image block. You will then be offered to upload an image from your PC, from the Media Library, or insert from a URL.

Block settings

Every block has a small toolbar above itself with some settings, which you can access by clicking the needed block. The list of settings depends on the block type. For example, Paragraph has a toolbar resembling the one used in CKEditor where you can align the text, insert links, make the text bold or italics, and more.

Still, irrespective of the block type, the first icon always enables you to change block type or style. The last one (three vertical dots) opens up another set of block administration options:

• Duplicate
• Insert Before
• Insert After
• Edit as HTML
• Add to Reusable Blocks
• Group
• Remove Block

In addition, to the right of the main document, there is another set of block-specific settings. They open once you click on the block. For example, the Paragraph block can have its font size, background color, and text color configured in this way.

To recap

Gutenberg is an interesting alternative to the Drupal core content creation and page building tools. It makes Drupal a more versatile CMS open to users with various preferences. If you need help setting up the right content workflows on your website, reach out to the Golems team. And, of course, we want to emphasize that the more updated your website is, the more options it has for content editors. Stay up-to-date and enjoy the best content editing experiences!