Easy content editing with Drupal: Gutenberg or Layout Paragraphs?

Gutenberg

Gutenberg was initially embraced by the WordPress community. It was introduced to the world by Matt Mullenweg, founder of WordPress, at WordCamp Europe in 2017. While it has become a reference point within the WordPress community—which is heavily invested in the contribution experience—how does it fare with Drupal?

Gutenberg and Drupal 9, an opportunity?

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

• A paragraph-based approach – This is still the solution we favor today, and we’ll explain why. Currently, around 190,000 sites use the Paragraphs module (according to the drupal.org counter, which only tracks sites that opt in!)
• An approach based on the layout builder module, available in core since Drupal 8.5. It's still being improved and is a serious contender because it's tightly integrated into the Drupal core. However, it is complex to use for some site administrators, which makes solutions like Paragraphs or Gutenberg appealing.

At the end of 2018, the Drupal community ported the Gutenberg project to Drupal. The project was led by the Norwegian agency Frontkom (thanks to them!) It was an opportunity to introduce some interesting integrations specific to Drupal, which we’ll come back to.

The release of Drupal 9 represents an opportunity to test Gutenberg on our projects, with our clients. The goal is threefold:

• When does it make sense to offer a contribution experience with Gutenberg?
• Is it possible, and in which cases, to offer a contribution experience with both Gutenberg and Paragraphs?
• When does it make sense to offer a contribution experience with Layout Paragraphs?

Here, we have excluded using layout builder, as it involves too much complexity for our users. It can be useful for reusing components or for integration, but we’ve never needed to reproduce that kind of use case so far.

Let’s Test Gutenberg

First... Have some fun: https://drupalgutenberg.org/demo!
It's always exciting to test tools outside of any context :)

Gutenberg, what is it?

The Gutenberg editor is based on ReactJS. It allows users to create rich content entities with a choice of elements called “blocks.” The tool features a library of blocks such as headers, galleries, lists, images, files, videos, quotes, tables, buttons, spacers, dividers, etc.

All the blocks can be easily added to the content page by “drag and drop.” It enables you to see content contribution more quickly and directly in its final state.

Gutenberg Editor in Drupal - The Gutenberg Module

Gutenberg now has its own contributed module in Drupal. Its main strength is allowing the creation of reusable blocks, saved in the editor. The module integrates with Drupal’s file management and media library. The module also allows access to the Gutenberg Cloud library of contributed blocks. It’s also possible to combine the use of Gutenberg blocks and traditional Drupal blocks.

Installation

Download the Gutenberg module just like any other contributed Drupal module. It consists of 3 submodules: Examples Block, Gutenberg cloud, Gutenberg Editor.

The Gutenberg Editor is the only required one. The other two are optional.

Enabling Gutenberg for a Content Type

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

In the Edit tab, the “Gutenberg Experience” option must be enabled.

This option allows access to additional options – Among them are the Gutenberg and allowed Drupal blocks, where you can define which blocks should be available.

Click "Save content type" and you’re ready.

Note: Here are the blocks enabled by default, immediately available in the Gutenberg interface, grouped into categories (unless you choose to modify this in the Gutenberg content type settings):

• Common blocks 
  • Paragraph;
  • Image;
  • Heading;
  • Gallery;
  • List;
  • Quote;
  • Audio;
  • Cover;
  • File;
  • Video.
• Layout
  • Code;
  • Custom HTML;
  • Preformatted text;
  • Emphasis;
  • Table;
• Layout elements
  • Media and text;
  • Buttons;
  • Columns;
  • Group;
  • Separator;
  • Spacers.
• Embed
  • Twitter;
  • YouTube;
  • Facebook;
  • Instagram;
  • SoundCloud;
  • Spotify;
  • Flickr;
  • Vimeo.

Other blocks are available, but at this stage there’s no need to get into tedious detail :)

Creating Content with Drupal Gutenberg

The routine of CKEditor is over—you now contribute using a “blocks” approach. To the right of the editing block, there's a tab with the Drupal node settings: its title, menu settings, URL alias, creation info, etc.

The Blocks

Each block has settings that depend on its type (which can be changed by clicking the first icon). The last button allows you to manage duplication options, insertion (before or after), html source management, grouping, deletion, and adding to the block library.

The whole system is very intuitive and integrates well into the Drupal ecosystem. To determine which project typologies it suits, we need to test its main competitor—Layout Paragraphs, based on Drupal’s traditional paragraph management.

Let’s Test Layout Paragraphs

Layout Paragraphs also offers an interesting experience, with a graphical, drag-and-drop interface for laying out paragraphs. The module, directly derived from the Paragraphs module, works seamlessly with existing paragraph reference fields.

Main Features

• Intuitive interface that supports drag-and-drop organization;
• Works with existing paragraph reference fields;
• Flexible configuration—site administrators choose which paragraphs to use in the layout sections of a page;
• Uses Drupal’s layout API to create layouts;
• Uses the paragraph behavior API to store layout data.

Installation and Configuration

• Ensure the Paragraphs module is installed.
• Download / run the command (composer require drupal/layout_paragraphs);
• Create a new paragraph type (admin > structure > paragraph types) to use for layout sections, with any fields you want;
• Enable the paragraph behavior and select one or more available layouts;
• Choose “Layout Paragraph” as the widget type for the desired paragraph reference field in the form display management tab;
• Choose “Layout Paragraph” as the field formatter for the desired paragraph reference in the display management tab;

You can now use the module!

Layout Paragraphs vs Layout Builder

Unlike the Layout Builder available in Drupal core, Layout Paragraphs is not a site-building tool. Layout Paragraphs works with Drupal paragraphs, not with blocks. Here are the main differences:

• Layout Paragraphs works with paragraphs, not blocks.
• Layout Paragraphs is based on Drupal’s field system—setting it up is as simple as configuring an entity reference field (paragraph field), making it highly flexible.
• Layout Paragraphs supports nested layout templates.

The paragraph layout system consists of three main parts:

• A layout that has a collection of sections and components. The main class (LayoutParagraphsLayout) contains methods to manipulate the layout in different ways (inserting a new component, reorganizing sections and their nested components).
• A section which contains a collection of components, an identifier, and configuration required for layout rendering.
• Components that allow you to decorate paragraph entities with additional properties and functionalities. Components form the simplest element in the Layout Paragraphs system.

With a bit of practice, you can set up your layout templates and reuse them for your clients. The following article gives you a quick way to do so:
https://www.chapterthree.com/blog/drupal-pretty-paragraphs-build-better-content-layout-paragraphs

How to choose?

One of Gutenberg’s big weaknesses, whether used with or without Drupal, is that it generates code that is less accessible and less translatable than modules from the Drupal galaxy like Paragraphs or Layout Paragraphs.

We invite you to read how the agency responsible for the W3C website gently highlighted these issues with Gutenberg –
https://adrianroselli.com/2020/09/gutenberg-accessibility-costs-wordpress-the-w3c-work.html

We agree with these remarks, which often leads us to rule out Gutenberg if a project has significant accessibility requirements (which should concern the vast majority of projects). To go deeper into the selection criteria, let’s review the pros and cons of both content editing methods –

With Gutenberg

Advantages of Gutenberg:

• Its Inline edition feature—tempered by the possibility of doing this with CKeditor, whose version 5 has recently been added to Drupal 9 for testing purposes;
• The joy of using the Gutenberg cloud library, even though we often advise against it, due to concerns over site owner independence;
• Its user contribution experience, which is pleasant, efficient, and useful for users of all levels.

Risks / Disadvantages with Gutenberg:

• Independence when using cloud modules (which are not stored locally);
• Accessibility of the generated code, as discussed earlier;
• Inability to reuse templates;
• Gutenberg is less integrated into the permissions/roles system than traditional Drupal modules;
• Pages built with Gutenberg are a single unit and not a set of paragraphs you can fine-tune (paragraphs, permissions, translations, injecting external content such as from a CRM or connector).

With Layout Paragraphs

Advantages of Layout Paragraphs:

• A better contribution experience (maybe not as user-friendly as Gutenberg, but much better than default Drupal).
• Integration with the rest of the Drupal ecosystem:
  • Paragraphs
  • Blocks
  • Views
  • Access rights
  • Content migration
  • Translations
• A modular approach that will please Drupal site maintainers.

Risks / Disadvantages with Layout Paragraphs:

We don't identify any major risks with using Layout Paragraphs. The only note is the complexity of its approach for beginners or those new to Drupal. However, the documentation and numerous online tutorials should largely remedy this situation.

Project Types Currently Excluding General Use of Gutenberg

We sometimes offer Gutenberg in certain cases. We know users appreciate the experience. However, it is difficult to generalize its use for the following project types:

• When the project requires strong accessibility optimization (due to the target audience or in public sector projects);
• When the project involves significant permissions constraints (many roles, need for granular control over content editing and moderation);
• When the project has many language versions;
• When the project involves complex features, third-party connectors;
• When the project is likely to undergo advanced, regular, and impactful evolving maintenance.

In summary, Gutenberg is perfectly suited to simple sites, with no particularly “exotic” features or strong accessibility requirements. This is why we very rarely use it, and only exceptionally, limiting it to some content types or roles under certain conditions.

Conclusion

Gutenberg is an interesting alternative to Drupal’s basic content and page creation tools. It makes Drupal a more versatile CMS, open to users with varying preferences. However, it’s not suitable for every project, especially due to accessibility and advanced integration issues with Drupal’s architecture. We use it sparingly, in the best interests of users, explaining its limits when necessary, just as we have here. We hope our approach is useful... Like the projects we enjoy working on!

Sources:
https://www.drupal.org/project/gutenberg
https://drupalgutenberg.org/demo
https://www.drupal.org/project/layout_paragraphs
https://www.drupal.org/docs/8/core/modules/layout-builder
https://www.chapterthree.com/blog/drupal-pretty-paragraphs-build-better-content-layout-paragraphs