Getting started with the Gutenberg editor in Drupal | Opensource.com

Getting started with the Gutenberg editor in Drupal

Learn how to use the WYSIWYG editor, made popular in WordPress, with Drupal.

Text editor on a browser, in blue
x

Subscribe now

Get the highlights in your inbox every week.

Since 2017, WordPress has had a really great WYSIWYG editor in the Gutenberg plugin. But the Drupal community hasn't yet reached consensus on the best approach to the content management system's (CMS) editorial experience. But a strong new option appeared when, with a lot of community effort, Gutenberg was integrated with Drupal.

Previously, there were two main approaches to content creation in Drupal 8:

  • In the Paragraph-based approach, content is assembled out of entities called paragraphs. Currently, approximately 100,000 websites use the Paragraphs module (according to Drupal).
  • The Layout-Builder approach uses an editorial tool shipped with Drupal 8.5. It is still undergoing improvements, but it is the next strong contender because it is really well integrated with the Drupal core. Stats on usage are not available since Layout Builder is part of Drupal.

At the end of 2018, the Drupal community, lead by Frontkom (a Norwegian digital agency strongly focused on open source solutions), ported the WordPress Gutenberg project as a contributed module into Drupal. Let's take a look at how Gutenberg works in Drupal (including some cool Drupal-specific integrations).

Installation

Installing the Gutenberg module is as straightforward as installing any Drupal module, and it has good installation documentation.

Configuration

Gutenberg is integrated into Drupal's default content-entity creation workflow. You can use it on any of the content types you choose, provided that the content type has at least one text area field, which is where the Gutenberg editor's output will be saved.

To enable the Gutenberg project on a content type in Drupal, you have to navigate to its settings: Structure > Content types and, from the dropdown next to the content type where you want to use Gutenberg, click Edit.

In the form that appears, scroll down and select the Gutenberg experience tab on the left, where you can find the settings described below. Select the Enable Gutenberg experience box.

Template

This is one of the cool features that is not available in WordPress out of the box. It enables you to define a template for a new page in a JSON structure. This will pre-populate all newly created articles with dummy placeholder content, which will help editors structure content correctly. In the screenshot above, I added a heading and a paragraph. Note that any double-quotes have to be escaped.

Template lock

This setting allows you to define whether users are allowed to delete the placeholder content, add new blocks, or just edit the existing, pre-populated content.

Allowed Gutenberg and Drupal blocks

This is another super-cool feature on the Drupal side of Gutenberg. Drupal allows users to create various types of blocks to design a page. For example, you could create a block with a list of the five latest blog posts, the most recent comments, or a form to collect users' emails.

Gutenberg's deep integration with Drupal allows users to select which Drupal blocks are available to users while they are editing (e.g., limit embeds to YouTube) and use blocks as inline content. This is a very handy feature that allows granular control of the user experience.

There's not much to choose from in a blank Drupal installation, but a live site usually has many blocks that provide various functionalities. In the screenshot below, the Search form Drupal block is selected.

After you finish the configuration, hit Save content type.

Publishing content with Drupal Gutenberg

When Gutenberg is enabled for a content type, it takes over most of the editorial experience.

In the main window, you can see the dummy placeholder content I added in the Template configuration above.

Drupal-specific options

On the right-hand side, there are a few fields and settings that Drupal provides. For example, the Title field is a required separate field in Drupal, and therefore it is not on the main Gutenberg screen.

Underneath the Title, there are additional settings that can vary, depending on the modules installed and options set up in Drupal. You can see Revision log messages, Menu settings, Comment settings, and a place to add a URL alias.

Typically, Drupal content types are composed of several text fields, such as tags, categories, checkboxes, image fields for teasers, etc. When you enable Gutenberg for a content type, these additional fields are available in the More settings tab.

You can now add your content—it works the same as it does in WordPress Gutenberg, with the additional option to add Drupal blocks.

In the screenshot below, you can see what happens when I add some text to replace the placeholder text, a search block from Drupal, a title, tags, and a custom URL alias.

After you hit Save, your content will be published.

And that is it. It works like a charm!

Working together for better software experiences

Gutenberg in Drupal works well. It is an alternative option that allows editors to control the look and feel of their websites down to the tiniest details. Adoption is growing well, with over 1,000 installations as of this writing and 50 new ones every month. The Drupal integration adds other cool features like fine-grained permissions, placeholder content, and the ability to include Drupal blocks inline, which aren't available in the WordPress plugin.

It is great to see the communities of two separate projects working together to achieve the common goal of giving people better software.

Person drinking a hot drink at the computer

Share your Twine 2 interactive stories on your WordPress site with the Embed Twine plugin.
Drupal logo with gray and blue

What you need to know about Drupal 8 updates.

Topics

About the author

MaciejLukianski - I am a Drupal enthusiast working in Droptica (www.droptica.com)