Getting Started with Gutenberg (Block Editor) in Drupal (2024)

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.

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.

Getting Started

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.

Install Gutenberg 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.

Formatting Text

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.

Document Overview

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.

Media Module

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.

Media Library

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.

Media Block

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.

Content Blocks

Any content block created from the “Blocks” page can also be embedded into a page.

Just make sure you enable them.

Inline Blocks

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.

Gutenberg Patterns

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.

Gutenberg Permissions

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.

Summary

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.

1 thought on “Getting Started with Gutenberg (Block Editor) in Drupal (2024)”

  1. Thank you so much Ivan! Great article, so helpful.
    Can I ask if you have used Radix + Gutenberg in combination? I’m kind of afraid of this combination. A full-blown front-end library like Bootstrap together with a bunch of Gutenberg (cloud) blocks with custom code, sounds like a massive overhead. So we’re currently leaning towards using mostly/only local custom Gutenberg blocks instead of cloud blocks (or providing a Bootstrap Gutenberg Blocks module if https://www.drupal.org/project/gutenberg_bs_blocks isn’t upgraded to BS 5).

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top