Bringing Gutenberg to Drupal: A Modern Admin UI, a Better Editing Experience in Drupal 8

It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still) lacks a modern UI that would make building rich web content —  such as landing pages — a breeze. But there is hope: the Gutenberg editor has been ported over, promising a better editing experience in Drupal 8.

The team behind this daring project? Frontkom, a Norwegian digital services agency that:
 

• refused to just sit and wait (for a year or two) for the in-progress initiative of modernizing Drupal's admin UI to grow into a core solution
• decided to capitalize on their experience in working with the Gutenberg page builder 
• … and on this content editor's open source nature, too
• … to bring it over to Drupal 8
   

Now, if you're determined to improve the editorial UX on your Drupal site, to “spoil” your editors with a modern, intuitive and flexible admin UI, keep on reading...
 

1. The Drupal Gutenberg Project: Aiming for a Modern Admin UI in Drupal 8

And by “modern” I do mean the opposite of the Panels & Paragraphs & Layout combo solutions currently available for editing text in Drupal.

Solutions that only manage to make the entire workflow... discouragingly complex.

Especially if it's rich web content that editors need to create via the Drupal admin UI.

And this is precisely the context where the Drupal Gutenberg project was born: Drupal desperately needed/needs a modern, JavaScript-based admin UI.

With WordPress 5 users already enjoying this fancy content editor and the Frontkom team's having gained experience in using it, the idea of porting it to Drupal started to form:

"Why wouldn't we make it possible for Drupal users, too, to benefit from this content editor?" 

And here are some of the original Gutenberg project's features that lead them into thinking that, once ported, the editor would significantly improve the editing experience in Drupal 8:
 

• it's (highly) decoupled
• it's open-source
• it's React.js-based 
• it provides a simplified, smooth and cool functionality-packed admin UI
• it's Medium and Squarespace's inspired
• it turns the creation of complex landing pages into a breeze
   

Page editing in Drupal 8 wasn't going to be the same again!

Their initiative turned into a Drupal 8 module —  Gutenberg Editor —  currently still an experimental one. 

Curious enough?

The first step to satisfy your curiosity is to take a look at their live demo: an interactive glimpse into the Gutenberg text editor implemented in Drupal 8.
 

2. The New Gutenberg for Drupal: Top Features Improving the Editing Experience in Drupal 8
 

2.1. All the Page Elements Are... Content Blocks

That's right, the team behind this project capitalized on the “everything is a block” Drupal 8 concept when adapting the Gutenberg UI to Drupal.

The result?

Both the Drupal core blocks and 20+ Gutenberg blocks are available in the resulting admin UI.

Basically, a Drupal 8 editor can insert into the web page that he/she's creating any of the core Drupal blocks and of the Gutenberg blocks of choice.

Speaking of which, let me point out just a few:
 

• Heading
• Image gallery
• Auto embedded social posts
• Buttons
• Custom Drupal blocks
• Layout blocks
   

Needless to add that you're free to enrich this list with your own custom blocks, too.
 

2.2. Easy Switch from Visual to Code Editor

That's right, the Gutenberg UI enables you/your editors to quickly switch to code editor —  opening up a neat markup —  and to apply any needed tweaks on the output.
 

2.3. Positioning Content Is Straightforwardly Intuitive

Editors get to select precisely where they want to position different types of content on a page.

And the very same results that they generate while in the Gutenberg admin UI get instantly reflected on the live web page, as well.

And there's more! More great admin features improving editing experience in Drupal. For instance:

Full control over font sizes and colors; tweaking them becomes a breeze with the new editor.
 

2.4. There's a Blocks Search Box

And not only that:
 

1. using this search box you can track down precisely those content blocks that you need to add to your page
2. but you can access them inline, as well, using “/”.
    

2.5. Full Control of the Layout

Another great thing about the content blocks available in the Gutenberg UI is that: they can have child blocks, too!

This way, it'll get unexpectedly easy for your editors to split their used blocks into columns on a grid.
 

2.6. Auto Embedded Social Posts/Videos

And all it takes is pasting their URL.
 

The Story of a Real Challenge: Making Gutenberg CMS-Agnostic

Open source, but not fully CMS-agnostic... 

The team behind the Drupal Gutenberg project had to come up with a suitable solution for this challenge. And they did come up with a multi-step solution to make the fancy text editor work in Drupal 8, as well:
 

• first, they created a fork and removed the WordPress specific features
• they used the Gutenberg editor as a dependency 
• next, they set up a standalone NPM package
• then they built the Gutenberg Editor module
   

In short: a fork of the initial Gutenberg project is still maintained while being used as a dependency of the new Drupal 8 module. Therefore, each time Gutenberg gets an update, the corresponding Drupal module, too, gets a new release.

Now, digging deeper into the project's architectural design, we discover 2 elements that the team had to re-write for Drupal:
 

1. the URL defining the editor routes (edit page route, new page route, preview page route)
2. the API-request, now configured to “talk to” Drupal (instead of the WordPress API)
    

How does the new module work?
 

• as a text editor, which can be easily enabled for each content type
• all it takes is a long text field for it to work: it replaces the node edit UI for that specific content type
   

Note: the Frontkom team also “promises” us to re-use many of the Drupal-specific stylings for the editor's UI elements in order to add a familiar Drupal feeling to it.
 

What Next? What's The Project Roadmap

Ok, so what we know for sure now, regarding this ambitious initiative turned into a Drupal module is that:
 

1. the Drupal Gutenberg module is downloadable, yet still experimental (for developer use only)
2. the team's still working on the project, implementing new features and functionalities aimed at making it feel more... Drupal native
3. the final version will be presented to the eager/intrigued/curious/skeptical Drupal users and developers in the coming months
    

The END! Can't hide that I'm more than curious what you think about this contrib solution for improving the editing experience in Drupal 8:
 

1. Are you looking forward to using it, hoping that this editor would make up for the inconvenience of working with Drupal's current admin UI?
2. Are you skeptical about the perspective of being tied up to a WordPress page builder?