First Look at Live Demo of the Gutenberg Content Editor for Drupal 8

Drupal Europe has just announced its program for the upcoming event in Darmstadt, Germany, September 10-14. The conference will host more than 1,600 Drupal professionals and enthusiasts for 162 hours of sessions and 9 in-depth workshops.

Automattic is sponsoring the Open Web Lounge networking space and Matt Mullenweg will be joining Dries Buytaert and Barb Palser on a panel discussing the future of the open web and open source.

One interesting WordPress-related session on the program is titled Introducing the Gutenberg content editor for Drupal 8. This new module ports WordPress’ Gutenberg editor over to Drupal. It was created by Per André Rønsen and his team Frontkom, a digital services agency based in Norway.

The Drupal Gutenberg project aims to provide a new publishing experience based on WordPress’ Gutenberg editor. The live demo on the site currently provides a frontend interactive implementation of Gutenberg inside Drupal, similar to WordPress’ “Frontenberg” demo on wordpress.org/gutenberg. The latest implementation of the module will appear there but Rønsen said it is currently being revamped, as lots of things have happened with Gutenberg in the past few weeks.

How the Drupal Gutenberg Project was Born

Rønsen told us he first saw Gutenberg in 2017 and was inspired to use it for one of Frontkom’s media clients.

“The thought of forking it came mid-2017, as we explored using Gutenberg as a lib for making a front page builder sponsored by the Google Digital News Initiative,” Rønsen said. “We ended up using it, and the Drupal module is a natural spin off.”

Frontkom tailored the Gutenberg-based page builder for the media industry. It adds extra functionality to Gutenberg that allows users to position and tweak articles for the front page of an online newspaper. Rønsen said the project went well and his team plans to open source it but it’s too early to share anything right now.

Following this successful experience using Gutenberg for a client, Frontkom began work on the Drupal Gutenberg project in early January 2018.

“The main part of the work was to make Gutenberg more CMS agnostic,” Rønsen said. “First we forked it and maintained a fork. Later we started using Gutenberg as a dependency, testing a more maintainable approach.”

Rønsen opened a ticket on GitHub, requesting that the Gutenberg team consider structuring the project to be more CMS-agnostic. The ticket was closed fairly soon with the explanation that it “doesn’t relate directly to the work going on with the project and its goals.”

“We have very little, if any, upstream commits so far, as the WP core interest has been to just cater to WP needs so far,” Rønsen said. “But that just changed.”

Gutenberg is moving towards making it easier to use outside of WordPress. The team is working on publishing all the React modules as npm packages. Rønsen said he anticipates that decreasing the number of globals needed to make Gutenberg work will be a huge help for other CMSs.

So far the Drupal Gutenberg project has not been shared widely but Rønsen said his team has seen a lot of interest from the Drupal tech community.

“We have a blog post coming in English with more detail; we kind of saved it for after holidays,” Rønsen said. “But then it blew up, and devs keep contacting us wanting to help out.”

Frontkom has been involved in the Drupal community for more than 10 years and WordPress for the past three years. Rønsen and his team believe that Gutenberg fills a gap in the Drupal space.

“Drupal doesn’t have all those fancy WordPress page builders,” he said. “So that is really more interesting than just a new post edit UI – we want a unified way to build complex layouts.”

Drupal already has an initiative for revamping its admin UI using React, and Rønsen said he thinks Gutenberg might contribute to how this can happen in Drupal core. In an ideal world, many open source projects could greatly benefit from a CMS-agnostic Gutenberg, with all of them contributing together towards its improvement.

“To us as a company, it is extremely interesting to build out front-ends that can easily be moved between CMSs,” Rønsen said. “For open source CMSs in general, I think there will be a lot to learn from the implementation process. For example, D8 has the concept of ‘everything is a block.’ This has made it easy for us to make Drupal core blocks available in Gutenberg – we just need to do some magic to expose block settings.”

The Frontkom team are not only enthusiastic fans of Gutenberg’s interface, but also appreciate the way the project is run. Rønsen hasn’t been following the community reaction to the latest round of Gutenberg testing but said he thinks WordPress users will love it long term, since “most of the page builders out there have issues.”

“Drupal can learn a lot from WordPress, the way they actually built the Gutenberg project – a transparent design process, lots of collaboration, and still highly efficient,” Rønsen said. “So, WordPress is definitely ahead of Drupal with regards to their admin UI/JS work. Since there is already a lot of interest in the Drupal community to do something similar, it is very refreshing to see someone go through it and succeed (hopefully).”

Steve Persch, lead developer advocate at Pantheon, spoke at DrupalCon in Nashville 2018 about what’s possible with WordPress 5.0 and also gave a session at Twin Cities Drupal Camp titled “Everything is a Block: How WordPress Rewrote the WYSIWYG.” In response to buzz on Twitter about the Drupal Gutenberg session, Persch said Drupal needs an editorial UX improvement to stay competitive, but not necessarily by adopting Gutenberg.

“We have in-progress initiatives toward that end,” Persch said. “Gutenberg itself could turn into a distraction from that work. In both [presentations] I also mentioned that Paragraphs or Layout Builder could be better data model starting points for Gutenberg-like functionality. Delivering exactly the same thing as WordPress would be self-defeating. Structured content is the heart of Drupal. I see Gutenberg (or something like it) as a better UI for the corner of the data model (the Paragraphs part) that Drupal sites have had for years.”

It will be interesting to see how different open source communities approach Gutenberg and how more diverse feedback from outside of WordPress could impact the project.

The Drupal Gutenberg module can be downloaded from the project page. It’s currently marked as an experimental module and is recommended for developer use only. The live demo for the project will soon be revamped to reflect the latest updates with Gutenberg. You can also follow the project’s development on GitHub.