Drupal Gutenberg Editor: Features, Setup & Usage Guide

Gutenberg has changed the process of content creation in content management systems (CMS) by introducing a block-based editor. Originally developed for WordPress, this editor is now available for Drupal through the Drupal Gutenberg module.

It offers Drupal users the same modern, flexible, and intuitive content-building capabilities just like WordPress Gutenberg editor. In this blog, we’ll dive into the process of installation and configuration. We’ll also learn how Drupal developers use them to build sites effectively. With that, let’s start!

What is Drupal Gutenberg?

Drupal Gutenberg is a module that integrates the Gutenberg block editor, originally developed for WordPress, into Drupal. It provides a flexible, modern content editing experience by allowing users to create complex page layouts using customizable blocks.

These blocks can be used to add and style text, images, media, and other elements directly within the editor. With Drupal Gutenberg, content creators have more control over page design without needing to rely heavily on developers. That makes it easier to build dynamic and visually appealing pages.

Key Features of Drupal Gutenberg

• Block-based editing: Content is structured using individual blocks, such as text, images, buttons, and more. This modular approach makes it easier to create and manage complex layouts.
• Customizable blocks: You can create and use custom blocks to match your specific needs and branding.
• Drag-and-drop interface: Rearrange blocks easily to create different layouts.
• Preview mode: See how your content will look on different devices before publishing.
• Media integration: Images, videos, and other media can be easily inserted into blocks.
• Integration with Drupal core: Drupal Gutenberg seamlessly integrates with Drupal’s core features, such as themes, modules, and content types.
• Reusable Blocks: You can save frequently used blocks to be reused on different pages.
• Role-Based Permissions: It offers control access to Gutenberg features based on user roles.

These features make Drupal Gutenberg a powerful and flexible content creation tool, for non-technical content editors. By leveraging the block-based editing system, Drupal development experts can build sites efficiently with consistency.

Why Integrate Gutenberg with Drupal?

Integrating Gutenberg with Drupal offers several advantages, particularly in enhancing the content creation experience. Here are the key reasons why integrating Gutenberg with Drupal can be beneficial:

• Intuitive interface: Gutenberg’s block-based editing provides a more user-friendly and intuitive experience for content creators.
• Visual editing: The visual editor allows for easier content creation and manipulation, reducing the need for complex HTML coding.
• Improved flexibility: The drag-and-drop interface empowers users to create dynamic and visually appealing layouts with minimal effort.
• Efficient workflow: Its modular structure simplifies content management and reuse, streamlining the content creation process.
• Version control: The editor provides built-in version control, allowing you to track changes and revert to previous versions if necessary.
• Collaboration: It facilitates collaboration among team members, making it easier to manage and maintain content.
• Theming options: Gutenberg integrates seamlessly with Drupal themes, allowing you to customize your content.

These benefits of Gutenberg with Drupal benefits user experience and improves content management flexibility. By leveraging Gutenberg’s powerful features, professional Drupal development services can create more engaging and effective websites.

How to Install and Configure Drupal Gutenberg?

To install and set up Drupal Gutenberg, follow these steps to ensure that you get the block-based editor up and running on your Drupal site. This guide assumes that you have a Drupal site already set up and that you have administrative access.

Prerequisites

Before installing Gutenberg, make sure your environment meets the following requirements:

• Drupal Version: Ensure you are using Drupal 8.8.1 or higher (Gutenberg is designed for Drupal 9 and newer versions as well).
• PHP Version: Verify that your PHP version is compatible with both Drupal and Gutenberg.
• Composer: Ensure you have Composer installed for managing Drupal dependencies.

Once you are done with these dependencies and setup, we can begin with the Drupal Gutenberg installation.

Step 1: Open a terminal and navigate to the root directory of your Drupal installation.

Step 2: Run the following command to install the Gutenberg module and its dependencies:

composer require drupal/gutenberg:^3.0'

Step 3: You can also download the Gutenberg module from the official page.

Step 4: Now, to install the module log in to your Drupal administration panel and navigate to Extensions > Modules.

Step 5: Locate the Gutenberg Editor module and check the box next to it and then, click Install to activate the module.

Step 6: Gutenberg works with specific content types. You’ll need to enable it for the content types you want to use it with. To enable it, go to Structure > Content types and select the content type (Article) and then click on Edit.

Step 7: Now, scroll down to the Gutenberg experience section and check the box next to Enable Gutenberg experience. That will enable the editor on the Article content type.

Step 8: If you want to control these blocks, scroll down and you will find options like Gutenberg blocks, Drupal blocks, and content type blocks.

Step 9: Once configured, scroll down and click on Save to apply the changes.

Now, you’re all set to start creating and editing content using the Gutenberg block editor on your chosen content type.

How to Use Drupal Gutenberg Editor Interface?

Using the Drupal Gutenberg editor provides a block-based content creation experience that simplifies page-building. Here’s how to work with some of its essential features:

Create a Basic Block

Gutenberg organizes content into “blocks,” each serving a different purpose, such as text, images, headings, or multimedia. To add a block:

Step 1: Click the + icon at the top-left or within the content area to select from a variety of blocks like Paragraph, Heading, List, and more.

Step 2: Start typing “/” followed by the block type name (e.g., /heading) to insert a block without leaving the typing flow.

Step 3: If you start typing text without selecting a block, it will automatically insert a paragraph block. To see available blocks, click on the “+” icon in the top left corner.

Formatting Text

To format text, you can add a paragraph, heading, or list block and select the text you want to format. Then, use the toolbar to apply formatting like bold, italics, headings, and lists. A toolbar will appear above the block, offering several formatting options:

• Bold: Click the B icon to bold the selected text.
• Italic: Click the I icon to italicize the text.
• Link: Use the link icon to hyperlink selected text to URLs.
• Alignment: You can align text to the left, center, or right.
• Text Color: Some blocks allow color customization, such as changing the text or background color.

The formatting toolbar adapts based on the block type, giving relevant options for each block.

Configure Block Settings

Each block in the Gutenberg editor comes with its own set of configuration options. To access the Block Settings:

Step 1: Select the block you want to configure. Click on the “Settings” icon in the top right corner of the block.

Step 2: This will open a sidebar on the right-hand side where you can change various settings for the block, such as color, background, size, padding, and margin.

For example:

• Paragraph Block: You can change the text alignment, color, and font size.
• Image Block: Adjust the image size, add alt text, change the alignment, or link the image to a URL.
• Heading Block: Choose the heading level (H1, H2, etc.), adjust alignment, and modify the text color.

Adjust Padding and Margin

For better layout control, you can adjust the padding (space inside the block) and margin (space outside the block) for certain blocks. Here is how:

Step 1: Select the block you want to modify. On the right-hand side of the editor, you will see a section called Dimensions.

Step 2: Click on the Dimensions section, so you can adjust the padding and margin values for the block. There are options for top, right, bottom, and left padding and margin.

Step 3: Enter the desired values in the input fields and click “Apply” to save the changes.

Document Overview

As your content grows in complexity, managing different blocks can become challenging. The Document Overview feature simplifies this by showing a high-level view of the entire document structure.

To see List View, click the Document Overview button (three lines icon) to open a side panel showing all blocks used in your content. This view makes it easier to navigate, select, and rearrange blocks.

The overview also includes an outline and statistics like characters, word count and estimated reading time.

These settings help control how your content is published, categorized, and displayed on your Drupal site.

Embed YouTube Videos

Embedding YouTube videos into a page or post is simple with the Embed block. Here is how:

Step 1: Click the “+” (Add Block) button and search for the Embed block.

Step 2: Once added, the editor will prompt you to paste the YouTube video URL. Paste the link of the video, and it will automatically embed it within the content.

Step 3: You can then configure the alignment of the embedded video from the block settings and preview how it will appear on your page.

Additionally, the Embed block supports various other media sources like Vimeo, X, and Instagram. That makes it flexible for different types of content.

With these we have covered various operations we can do in Drupal Gutenberg editor. But if you want more customized and high performance sites consider hiring Drupal developers.

How to Use Drupal Blocks in Gutenberg?

Integrating Drupal blocks into the Gutenberg editor allows you to leverage core and custom Drupal functionality directly within the block-based interface. Here’s how different types of Drupal blocks work in the Gutenberg editor:

Plugin Blocks

Plugin blocks in Drupal Gutenberg are pre-built functional blocks that provide common features and functionalities. These blocks are often provided by core or contributed modules and can be easily integrated into your content. Two common examples are:

• Breadcrumb Block: This block displays a navigation breadcrumb trail, which helps users understand the structure of the website and their current location. Adding the breadcrumb block can enhance navigation and user experience, especially on content-heavy websites.
• Search API Block: The search block enables a search form to be added to pages, allowing visitors to quickly search for content across the website. This is particularly useful for large websites where content discovery is a priority.

These blocks are useful for adding dynamic site elements to your Gutenberg-edited pages without additional coding.

Content Blocks

Content blocks refer to both Drupal’s custom blocks and default blocks that contain structured content like text, media, or forms. You can use these blocks within the Gutenberg editor to embed dynamic content across pages. These blocks typically include:

• Text Block (Paragraph, Heading): The Paragraph block is used for regular text content, while the Heading block helps organize content with various heading levels (H1, H2, H3, etc.).
• Image Block: The Image block allows users to upload or select images from the media library and insert them into the content. Images can be aligned, resized, and linked as needed.
• List Inline Block: The List block is used for creating bulleted or numbered lists, which can help structure content more effectively.

To add a content block, click the “+” button in the editor and select the type of content block you need. You can then insert your content directly within the block and adjust the block’s settings (e.g., text color, alignment, and layout).

Inline Blocks

Inline blocks are a type of custom block that can be inserted directly within the content of a paragraph or other block. This allows for more granular control over the layout and content within a single block. Examples of inline blocks in Drupal Gutenberg include:

• Inline Image: This block allows you to embed an image inline with text, making it part of the paragraph flow.
• Inline Media: Similar to inline images, media files like videos can be inserted directly within text content without needing a separate block.

These blocks are useful for adding small images or videos without breaking the flow of the text.

By utilizing plugin blocks, content blocks, and inline blocks, the Drupal Gutenberg editor offers a flexible content creation experience. If you want to leverage the maximum features of Gutenberg to build sites, get in touch with our Drupal development company today!

FAQs About Drupal Gutenberg

Wrapping Up

Gutenberg has been a significant advancement in the realm of content editing for Drupal and other CMS. By installing and configuring the Drupal Gutenberg module, you can start using it.

There are various features like, creating blocks, adjusting padding, and embedding videos. Plus, you can use Drupal blocks in Gutenberg that adds to the flexibility of the content creation process.If you are looking to build a well-designed Drupal site with robust performance, hire Drupal developers.