This article first appeared on Symfony Station
In this article, I will compare the use of the Gutenberg editor ecosystem in a Drupal theme as compared to its use in WordPress FSE themes. I'll also explore the implementations of Gutenberg in general.
Obviously, the Gutenberg block system is WordPress's baby but you may not know its editor is opensource and can be used in other projects.
To quote Gutenberg Hub:
"The isolated Gutenberg block editor is designed to be easily ported anywhere, and can be integrated into any web application. It is built using React.js and allows users to create and edit content using a wide range of blocks and formatting options."
It is used in Laravel via Laraberg. And testing is ongoing for Tumblr and Day One. So, seeing it in Drupal is no surprise.
Gutenberg
Let's start with a quick review of Gutenberg.
WordPress's overhaul of its design and coding system has been going on since 2018. Its end goal is an easier experience for non-coding users. Componentization in a block-based system accomplishes this for content creators, designers, and developers.
The smallest component of the WordPress system is the block (aka Gutenberg block). The Gutenberg editor was introduced to allow the use of blocks in page and post editing.
WordPress evolved this system with block patterns and with version 5.9 block templates and block themes were added. Those eventually evolved into FSE (full site editing) themes.
The file structure of WordPress sites going forward will resemble those of object-oriented programming structured websites.
Unfortunately, WordPress choose React to build its block components. Which sucks. But at least they are just using it as a component library which sucks less than the rest of the React ecosystem.
Anyway, several years ago the Frontkom agency brought the Gutenberg editor into the Drupal ecosystem via a module. Then they unveiled the Gutenberg Starter Theme.
I am using both of these Gutenberg editors in my sites and you can see the results live. For the Drupal example which also uses the Drupal theme, visit Mobile Atom Media and for the WordPress example visit Battalion.
WordPress 2024 Theme
First up, let's examine a modern WordPress theme's structure. Below is what you will see if working with the default WordPress 2024 theme.
In the assets folder, you’ll find what you would expect in any web project: fonts, images, CSS and JS files.
The template parts folder contains HTML files, for example the header and the footer. A sidebar could be another one. Or meta data is also one.
The patterns folder has PHP files for components users use to build their pages and posts. Examples include: heroes, pricing tables, galleries, CTAs, etc.
Within the styles folder are JSON files, which offer the user options of their site's global styles.
And within the last folder, templates, you’ll find HTML files for generating pages and posts. Index, archive, and 404 pages are examples.
Theme.json is now the configuration file for a FSE block theme. Previously, theme developers used the WordPress customizer to provide features for end users customization of classic themes.
With modern WordPress, block themes and theme developers can now use theme.json to provide customization features to end users. Within the Site Editor, users can see the settings and styles that you include in your theme via the admin area.
Repository
If you want to reference the repository it's on GitHub.
Alright, let's move on to topics more relevant for Symfony Station readers.
Drupal Gutenberg Starter Theme
Let's start by mentioning the Drupal theme we will examine requires that we install the Gutenberg module first. The team at Frontkom developed them both. In particular Marco Fernandesin their Portuguese office and Thor Andre Gretland. Obrigado meninos e meninas de Frontkom!
Years ago Frontkom's motivation for the Gutenberg module was:
"Drupal 8 is a rock solid CMS framework packed with powerful admin features. Our only complaint? Drupal 8 is missing a modern UI for rich content creation. Let’s change this!"
So they did.
In fact, at DrupalCon 2023 Drupal Gutenberg was one of the winners of Pitchburg - a vote where the community chose which modules should receive funding for further development. And WordPress's founder was so impressed he funded the grant himself, freeing up money for an additional Pitchburg grant. Thanks Matt Mullenweg.
Currently almost 4,500 sites are using the module. It comes with a large library of blocks.
My expertise with Drupal's implementation is no where near where it is with WordPress's so let's see what Frontkom is thinking.
Frontkom says:
"This theme is intended to be a reference for developing Gutenberg compatible themes. It shouldn't be used in production environments.
The theme works well with a Drupal's standard installation profile when enabled.
In this project you'll find comprehensive and commented code examples for the many features delivered by Drupal Gutenberg editor.
Tooling on this project is kept to its minimal. Only esbuild is used to compile JSX files to ES6 files and only necessary if writing React components. Check scripts/build.js and the example at js/register-filters.jsx. Extensions like SASS or PostCSS aren't used for CSS. Just regular CSS.
This theme was generated from starterkit_theme.
Most modules in Drupal require generating a file, reading a manual, activating the module, etc., before seeing the changes. The new starter theme makes it easier for developers to get started and understand how Gutenberg works without much extra work and customization.
Frontkom has the ambition to make Drupal the most user-friendly enterprise CMS in the world, and further developing Drupal Gutenberg is an important piece of that puzzle. Collaborating with Matt Mullenweg and the WordPress team indicates a willingness to join forces to promote usability and further improvements of Drupal Gutenberg."
Awesome.
As you would expect its structure is different from the default WordPress theme. Even similarly named folders like templates are structured differently.
The Drupal theme does not use patterns, yet. Although you can copy and paste their code from the WordPress Patterns Library into the Drupal Gutenberg editor.
For now, only Gutenberg blocks are implemented. And fyi you can use any Drupal block as well.
Things like Twig templates, YAML files, Node JS, esbuild, and React are included in Frontkom's theme or module as opposed to being in core like they would be if accessed via a WordPress FSE theme.
The following screenshots show configuration and settings options.
Regarding configuration, here are the options:
- Gutenberg configuration file (
gutenberg_starter.gutenberg.yml)- Register client libraries on editor and frontend
- Toggle custom blocks availability from the content type edit form
- Setup editor configuration
- Add frontend styles to the editor
- Add patterns
- Limit color palette
- Register block variations (
js/register-variations.js) - Apply filters to blocks upon block registration (
js/register-filters.jsx) - Register block styles (
js/register-styles.js)
As you would think, you can also create custom Gutenberg blocks for Drupal, just like you can with WordPress. You would only need one for a very unique use case, but knock yourself out. You can even share them with the community via Gutenberg Cloud. There is more information on this in the References and Resources section below.
Explore the repositorys link below at your leisure for more information.
Coming soon
But, guess what?
Some of Frontkom's approach will change soon.
In their roadmap they say:
"Drupal Gutenberg 4.0 is where the UI within Drupal is fully refactored. It won’t make extreme differences to the everyday users of Gutenberg. But the UI itself is built specifically for Drupal. Previously we’ve been using the post edit component from Wordpress, made some adjustments to it to make it work with Drupal. It’s been working fine and was a fast way of getting Gutenberg done and ready. But now we’re building it the Drupal way - meaning no more hacks or hidden elements. We simply build what we need. This is bit more work for the Drupal Gutenberg team now in 2024, but a way more effective way to handle future updates.
As a part of the new Starshot initiative the Drupal Recipes are coming to bundle configuration, content and modules for quickly testing out Drupal features. Drupal Gutenberg already have a recipe ready and will make sure to have that available as soon as the recipe solution is up and running for Starshot."
Double awesome.
Future initiatives
Starting Q3-4 2024 Frontkom is going even further with development by implementing:
- Generative AI for Drupal Gutenberg (hmm)
- Collaborative editing in Gutenberg (ok)
- Visual editor for building layouts and field mapping (fantastic)
So, as you can see they are here to stay. And I have a feeling Gutenberg will always be an easier editor to work with no matter what Drupal does with Experience Builder.
Finally, I hope that one day Gutenberg will be in Drupal core as an alternate editor to CKEditor which is a dated approach. And I will work to make that happen as I am sure Frontkom will.
Repository
If you want to reference the theme repository it's on Drupal's GitLab.
Here is the module's repository.
Long-term Project
As an unrelated aside, wouldn't it be awesome to bring the Gutenberg editor into Symfony? Or not? I am pretty sure that would be possible. It's definitely something to think about in the long term. One could learn a lot from Frontkom's efforts.
Wrapping It Up
I hope you are now familiar with the differences between the implementation of the Gutenberg ecosystem in its traditional environment of WordPress versus Drupal's customization. Which might lead to something in Symfony one day.
The Gutenberg editor is a fantastic product for end users, content teams, and even designers. Some in the WordPress development community are not sold on it. But I am, even if not on using React as its base.
So at a minimum be sure to give it a shot in a local Drupal project during a rainy or snowy weekend.
Happy Coding Gutenbergers!
References and Resources
Gutenberg is WordPress's project so there is obviously more detailed information available via WP.
WordPress
Themes
An introduction to developing WordPress Themes
Templates
WordPress Development Resources - Templates
Patterns
Blocks
Case Study
Drupal
Gutenberg Editor: an Alternative Approach to Creating Drupal Content Pages
Drupal Gutenberg is making waves
What to think about when designing custom Gutenberg blocks
Create a custom block for Gutenberg Cloud
Module for Creating and Editing Content in Drupal – Gutenberg
Getting started with the Gutenberg editor in Drupal
The Gutenberg editor in Drupal: what it is like & how it works
This one has good coverage of the blocks available.
Top comments (0)