Drupal Gutenberg 1.0 Released, Now Ready for Production Sites

The Gutenberg module for Drupal, created by Frontkom, reached the 1.0 milestone earlier this month. It is the first stable release recommended for use in production with Drupal 8.x.

The 1.0 release removes the Gutenberg-JS dependency and uses Gutenberg core files directly. It is based on Gutenberg version 5.6.1, which was released in early May. The module boasts better handling for media files, adding support for title, caption, and alternative text. It also adds an “Allowed Blocks UI” to the content type admin UI, so administrators can restrict which blocks show up in the block selector.

“We’re now ready for production sites in the sense that we’ll be more careful with structure changes, will try to do update paths when possible, and will create automated tests for crucial functionality,” Frontkom project manager Thor Andre Gretland said. “We’ve solved the blockers for a stable release.”

Upgrading the module from RC-1 may require some extra steps, because it is a big jump, taking the Gutenberg library from 4.8.0 to 5.6.1. Users will need to update the database. It is also necessary to navigate to content types and click save to enable Gutenberg again so that it will begin storing the Allowed blocks in the database. If users get notices about invalid blocks, they are advised to try the Attempt Block Recovery option:

“It’s actually a rather large update,” Gretland said. “We were planning to add a couple of last needed features to release our 1.0 version, but ended up using the latest Gutenberg version with several new great features. We’re also using more of the Gutenberg Core, that we’ve been able to use before.”

The module still has one critical issue that Frontkom is working on. Reusable blocks are not working with the latest release. Users are getting a “this block is unavailable or deleted” message when attempting to insert a reusable block. In the meantime, those who require this feature can roll back to RC1 to get it working again.

So far the Gutenberg module has been well-received. It has been downloaded more than 12,000 times and 494 sites are reported to be using it.

https://twitter.com/netribution/status/1133268870112972800

Drupal’s Gutenberg module includes access to the Gutenberg Cloud library of free blocks. Although the library has been slow to gain contributors, it does contain several blocks that are helpful for creating page layouts, such as Content in Columns, Hero Section, Section Wrapper, Section Row, and a Feature Box block. Site administrators can also use the Gutenberg module in combination with Drupal’s new Layout Builder, which was introduced as a stable module to Drupal 8.7 core.

“We see a valid use case for mixing Drupal Gutenberg with the Drupal layout builder when you might want to create layout templates with the layout builder, and keep the actual content editing in Gutenberg,” Gretland said. “For example you could use the layout builder to define fixed byline elements for author and create date, but leave the actual content creation experience to Gutenberg.”

There are a few limitations to using the two tools together. The only way to use them on the same project is if they deal with different content types.

“Since Drupal Gutenberg takes over the whole node UI, it can have some unexpected effects when used together with Layout Builder,” Gretland said. “That doesn’t mean that they won’t ever ‘work’ together. One idea could be using the LB data structure to generate Gutenberg fixed layouts/templates and even save Gutenberg data in a structured way handled by Layout Builder.”

Gretland said his team believes Gutenberg delivers a better editing experience than Layout Builder, as it is a more mature project. However, Layout Builder stores its data in a structured way, which has its advantages and disadvantages over Gutenberg.

WebWash has a good video tutorial for Drupal users who want to learn how to configure the Gutenberg module and use it on the Page content type. It includes a walkthrough for common actions like uploading images, creating reusable blocks, and using the Gutenberg Cloud. If you want to see how Gutenberg can improve Drupal’s authoring experience without installing the module, check out the frontend demo of Drupal Gutenberg created by the team at Frontkom.