Don’t forget to subscribe to our YouTube channel to stay up-to-date.
The Gutenberg Editor is a powerful page building tool for Drupal that utilizes a block building system to create and edit content.
This comprehensive guide walks you through each step of setting up and using the Gutenberg Editor.
From downloading and installing the Gutenberg module, to enabling it on your content types, and finally using it to create your content using blocks, this guide has you covered.
To get the most out of this guide, follow the video above.
What is the Gutenberg Editor?
The Gutenberg Editor is a content editor for WordPress that uses a block system to build pages. Each element added to the page is a block. These blocks can be text, images, videos, and more. The Gutenberg Editor allows for high customizability, with options to format text, adjust block settings, embed media, and more.
How do I Enable Gutenberg on a Content Type?
Go to Structure, “Content types” and edit the content type you want to enable it on. Scroll down to “Gutenberg experience” and check “Enable Gutenberg experience”. Save the form and you’re done.
Before we begin, download and install the Gutenberg module.
Run the following Composer command:
composer require 'drupal/gutenberg:^3.0'
Install the module by going to Extend and install the “Gutenberg Editor” module.
Configure Gutenberg on Content Type
Let’s go and enable Gutenberg on the Article content type.
1. Go to Structure, “Content types” and click on Edit on the Article row.
2. Scroll down to “Gutenberg experience” and check “Enable Gutenberg experience”.
This will enable the editor on the Article content type.
3. If you scroll down you can control what Gutenberg and Drupal blocks will be available in the editor.
4. Once configured, scroll down to click Save.
NOTE: As of this writing you can only enable the editor on content types.
Gutenberg Editor Interface
If you go and create a new article, you should see the Gutenberg editor, which will take over the whole screen.
Create “Basic” Blocks
Gutenberg uses a “blocks” system to build pages. Anything added to the page is a “block” (Gutenberg block, not Drupal block).
Blocks can be added by clicking on the + icon.
Or, by typing “/”.
And if you just start typing it’ll automatically add a paragraph block.
If you want to see all available blocks, then click on the “+” icon in the top left corner.
The text can be formatted by adding a paragraph, heading, or list block.
Select the text and format it using the toolbar.
Configure Block Settings
A block’s settings can be changed from the right-hand side when selected.
Each block will have its own set of options, but on most, you can change color, background, size, etc…
Adjust Padding and Margin
Padding and margin can be applied to blocks from the Dimensions section on the right.
This gives you extra control over the spacing of the blocks.
When you have a large page with lots of blocks, it can be difficult to select the correct block.
Just click the “Document Overview” button to see a nice overview of the blocks.
From the “List View” you can see all the nested blocks. You can select a block and even move it around.
Outline shows all headings and stats about the post, such as characters, words and “time to read”.
Embed YouTube Videos
Gutenberg allows you to paste URLs to popular platforms such as YouTube, and it’ll automatically embed the assets into the page.
You can see all the embed blocks below “Embeds” when viewing all the blocks.
The editor comes with more embed blocks than are visible from within the editor. Go back to the “Gutenberg experience” on a content type and click on “Allowed Gutenberg blocks” to see all “Core Embed” blocks.
Media Handling in Gutenberg
Gutenberg allows you to drag and drop files directly into the editor from your computer.
You can upload images directly from your computer by dropping them into the editor.
When you drop an image or file in the editor it’ll upload and create the file entity in Drupal.
Crop Images Directly in Editor
You can even crop images directly from the editor. Just click on the crop icon to start cropping.
You can zoom in or change the aspect ratio.
Once you’re ready to crop just click on Apply.
When you crop an image, a copy is created, and the original is left unchanged. You can see the file by going to Content -> Files.
If the media module is installed, it’ll upload the file and create a media entity (which can be used in other parts of Drupal) when you drop a file into the editor.
Gutenberg integrates nicely with the media library.
When you add an image block, an image can be uploaded, selected from the media library, or added via a URL.
If you click on “Media Library” you can select any media asset from your Drupal library.
Even ones that have been uploaded outside of Gutenberg.
Suppose you want absolute control over how you embed media assets and would like to select a custom view mode. In that case, you’ll need to enable the Media block from the “Gutenberg experience” section.
First, make sure that you have Media installed and you should see the Media block. Check it so it’s enabled.
Then you’ll be able to select a Media block in Gutenberg.
Select a media type.
Then insert the asset.
You’ll see a view mode drop-down on the right-hand side with available options.
The ability to create view modes and embed assets is a powerful feature.
Drupal Blocks in Gutenberg
The editor integrates with Drupal’s block system. You can embed any Drupal block into the editor.
Plugin Blocks (Breadcrumb, Search)
If you go to the Gutenberg experience section, and click on “Allowed Drupal blocks” you can see all of the blocks that will be displayed in the editor.
Any content block created from the “Blocks” page can also be embedded into a page.
Just make sure you enable them.
Custom block types such as “Basic block” can be added inline in the editor.
First, allow the custom block types from the Gutenberg experience section.
Then add the basic block into the editor.
Fill out the custom fields from the right-hand side.
NOTE: Blocks added this way are inline, which means they won’t be visible on the Blocks page (Content -> Blocks).
Permissions for Adding Inline Blocks
When configuring roles and permissions, you must assign an editor role the “Create and edit content blocks” permission which comes with the Layout Builder module.
Or they won’t be able to see any custom fields on inline blocks.
Patterns can be created to group Gutenberg blocks together and reuse them in multiple pages.
You can use patterns to create a reusable footer section.
Create your collection of blocks, then right click and click on “Create pattern”.
Enter in a name and click on Create.
To add a pattern just search for the block using its name.
You can view all available patterns from the “Patterns (Gutenberg)” tab.
If you want to give a role access to Gutenberg make sure you assign them the following permissions:
- Use the Gutenberg Blocks text format text format
- Use Gutenberg experience
Create Gutenberg Blocks
If you want to create your own Gutenberg block from scratch. Look at the example_block sub-module that comes with the Gutenberg module.
This tutorial taught you how to download, install, and configure the Gutenberg Editor for Drupal.
You’ve also learned how to create and format blocks, embed media, and adjust settings to suit your needs. Additionally, you’ve discovered how to integrate the Gutenberg Editor with Drupal’s block system and media library and how to create and use Gutenberg patterns.
You can create and manage content with the Gutenberg Editor with these skills.