drupal 10 with gutenberg page editor

Wordpress (Gutenberg) page editor in Drupal

WP's default Gutenberg editor is an intuitive, yet highly flexible page editor that exists as an independent open-source project, and has meanwhile matured and become popular, with integration into Drupal as well.

Why we started looking at Gutenberg

I first encountered the Gutenberg Editor during a company “dev-hours” knowledge sharing session when the topic turned to how NASA switched to WP. Among the reasons stated, they clearly emphasized, "...selecting a CMS that allowed them to break free from rigid templates." The interface of Drupal's editor didn't provide the flexibility that content authors desired. With its Gutenberg interface, WP was able to satisfy the needs, leading to a migration from Drupal 7 to Wordpress instead of Drupal 10.

Can Drupal be as flexible for content editors as WordPress?

Nasa switched to WP

Ok, Nasa switched to WP, but what if next time a client asks us: "Can Drupal be as flexible for content editors as WP?" Unfortunately, our first answer was: No. Then we figured out a solution: the Gutenberg editor within Drupal.

The Gutenberg module, available on drupal.org, is continuously developed and ported with slight lag compared to the original feature set. The vision for Drupal, along with Gutenberg, is to become the most user-friendly enterprise CMS. They are making good progress towards this vision. Let's see what’s the status now:

How it works

Installing it via Composer is simple and quick. After enabling the module, you just need to enable it for the content type where you want to use the Gutenberg editor interface for page editing. Since the editor interface changes completely, it might be worth trying it out first on a brand-new content type.

The Gutenberg editor provides a completely new set of administrative features for editors, and due to its flexibility, we need to approach it with a different mindset than what we have been accustomed to with the Drupal admin interface.

Currently, in Drupal we use pre-defined fields displayed in predefined locations, with Paragraphs being the exception in our case, where we provide editors with some freedom at the layout level using a component-based approach. In the Gutenberg interface, we leave it entirely to the editor's imagination where and how they place content, within minimally limited predefined frames.

How the UI works

The interface itself is intuitive and easy to grasp. With a little practice, users can quickly get accustomed to it, provided they have some understanding of web design. Being a React application, the interface is speedy and responsive, with no noticeable delays. (The only time it started to slow down slightly was when I was working with a large amount of content, including images and videos.)

When adding new content, you're presented with a blank canvas (in a content type where the GTB interface is enabled), and you can immediately start adding headers, text, images, and media. The main difference is that there are no fixed fields, you are editing the entire page.

Gutenberg Blocks

Gutenberg Drupal blocks

Editing can be done in multiple ways; you can add elements by selecting them from the left side or by typing "/" followed by their name if you know it. Although we use the interface in React, upon saving, it compiles into HTML and places the compiled code in the body field, creating an interesting mix with the Drupal DOM using WP-named classes. The content entered can be translated into desired languages.

The foundation of Gutenberg is the reusable blocks, of which there are already quite a few in the default settings. These blocks can be expanded in various ways. In addition to the more than 50 basic blocks (heading, paragraphs, images, embed media...), you can enable Drupal's basic blocks and use custom blocks created in Drupal. Furthermore, there are several options within Gutenberg to create new blocks, such as reusable patterns and custom blocks, which I'll delve into more detail with some examples in the next, more technical post.

My experience and conclusion

After just a few hours of practice, I managed to recreate a landing page for one of our partners using only the basic blocks in GTB, achieving a 95% match with the existing page.

The most common alternative to the GTB Editor is building pages based on Paragraphs in Drupal. It's not possible to mix Paragraphs with Gutenberg within the same page, but It's possible to activate Gutenberg only for certain content types, allowing for greater flexibility where needed – albeit with the potential for easier mistakes. It's worth considering that when using such hybrid solutions, there may be additional or redundant work on the frontend. To avoid this, it's advisable to consider whether to use Paragraphs or Gutenberg per project based on the needs of the editors. I can imagine sites where editors working with news and basic pages would get the simple Drupal UI with fixed fields and CKEditor 5, but for a landing page content type Gutenberg would be enabled for the marketing department.


  • Quick page editing
  • Flexibility
  • Ability to design anything within certain frameworks
  • Numerous block types available by default, which can be custom extended
  • Use of existing custom blocks
  • Easy use of media with various options (crop, zoom, styles)
  • Easy management and setting of spaces and paddings
  • Colors and gradients can be activated with a single click
  • Cons

  • Requires a few hours of practice to become proficient.
  • Prone to mistakes and may not always produce the desired design due to the high level of freedom. Unfortunately, this also means that the page can easily become disorganized if handled by someone inexperienced or not working precisely.
  • Front-end developer

    Peter Zajácz ("Zé") is an Acquia certified Drupal Frontend developer with more than 6 years of experience working with Drupal.  He also works with Javascript frameworks such as Nextjs and builds React components. He carries a Bachelor degree in Computer Science. Peter has extensive experience in working on public sector sites and eCommerce platforms.

    Published at: