Gutenberg in Drupal – Popular Module for Editors

Do you create websites in Drupal or manage their content? In this article, we'll show you why you should choose a tool recognized by editors – the Gutenberg module! It will make your work much easier, even if you are a less experienced user.

Working on the design of a website in Drupal is getting easier and easier. Each new release brings improvements and simplifications in this regard.

Most editors use CKeditor on daily basis. The tool is the default content editor which has been added to the software core in Drupal 7. While this is a great solution that will work successfully in most cases, you can go the extra mile!

In this article, we'll try to introduce you to one of our clients' favorite modules, namely Gutenberg, which boils the design and management of page content down to clicks and cursor drags.

The history of content editing in Drupal

Once upon a time, at the very beginning of Drupal, working with content on a page required a lot of knowledge and experience. You had to create so–called nodes, consisting of two elements: Title and Body. While the former simply involved entering a title, the latter required the use of HTML to, for example, adjust the text or even add simple graphics.

Then came the Content Construction Kit; a small module that has worked wonders for us. It allows additional fields to be added to nodes while creating corresponding tables in the database. This was a breakthrough of sorts.

Drupal's programmers would prepare individual fields that together formed a page template, and editors would simply fill them in with content. This approach eliminated the need for HTML tags because the data was rendered accordingly when displayed.

Additional capabilities were provided by the Views module, which allowed queries to be created in the admin interface. Many Drupal sites are still successfully created this way today.

However, some users needed more flexibility and the ability to customize content. This is how the WYSIWYG approach emerged. The phrase stands for “what you see is what you get”. The content editors we know today, such as CKEditor and TinyMCE, leaped to prominence. The latest version of CKEditor 5 in Drupal 10 is presented in the image below.

Image

Instead of filling in the boxes, editors also have a template in front of them, but one that already resembles the final shape of the page. Among other things, they can modify defined boxes, add multimedia and links, and edit text.

The Gutenberg module is another step forward in the approach to content editing in Drupal. This editor reduces work on content almost entirely to visually moving “blocks” around the screen.

Gutenberg module in Drupal

The Drupal community looked at WordPress competitors using such a great tool with envy. Therefore, they have also implemented it as a module (FrontKom is responsible for the work on this module). For years, this module has been, in the eyes of many, the advantage of the latter CMS. For people who are not “technically savvy,” it was simply easy to use in a project and required almost no IT knowledge and experience. Everything could be done by “mouse clicks".

Gutenberg, also known as the “block editor”, is based on React. It is a collection of libraries divided into categories. Thanks to its simple and intuitive interface, in order to add a new paragraph, graphic, or link to Social Media, it is literally just one click and drag-and-drop the element to the right place on the page. Despite its simplicity, the Gutenberg editor has tremendous potential if you know how to use it properly.

Image

The fact that Gutenberg is also available for Drupal users may make many people convert to it and eventually abandon the WordPress CMS, which relies on commercial plug-ins and subscriptions. Want to know why it's better to bet on Drupal when it comes to choosing the right solution for your business? Read this article.

The module's developers even allow you to test the editor without installing the module. Want to see how easy it is to work with? Visit Gutenberg Editor Demo site.

Installing the Gutenberg module in Drupal

Gutenberg is the same module as others created by the Drupal community, so you can download and install it, preferably via the admin panel. You can download it from this site. Inside you will find three options:

Image

The first two are not necessary, you can skip them. The third item on the list represents the editor itself, and this is the option you should choose to install it. The process is not complicated and should go smoothly.

Below is a list of the blocks that are available by default, as soon as you switch on the editor. These can be divided into 4 categories:

Image

Of course, this is just the tip of the iceberg. You can add other blocks and thus extend the capabilities of the editor. It also allows you to create your own and save them for later re–use.

Creating content with Gutenberg in Drupal

With a first glance at the editor interface, one can see the difference with the classic approach known from CKEditor. Instead of filling in predefined fields, we can now work with blocks. Everything is clear and very intuitive.

To add another block, simply click “+” and select the appropriate one from the list. You can also find it by typing its name into the search engine.

Image

Each block has its own settings. For example, in the Paragraph block, which is used to add a text box, you'll find a toolbar where you can change the font typeface, align text, insert links, make text bold, and so on.

You can also duplicate a block, delete it, and change it using HTML code or save the settings for reuse. Do you often insert images of the same size or a video player with the correct aspect ratio? The "Reusable Blocks" option will save you valuable time.

Summary

We hope that after reading this article you already know that Gutenberg is a very helpful solution to consider when planning the creation and management of the content of your digital platform. It's an extremely interesting tool that offers a lot of site-building and editing possibilities for less tech-savvy editors as well.

Gutenberg used to be reserved for WordPress users only. Now it is also available on Drupal. This is another strong argument for betting on this open-sourced CMS.

If you need help with your digital project, don't hesitate to contact us! At Direktpoint, we have been acquiring expertise in building ambitious corporate projects for years, so you can rely on our experience. Let's create something together!