Drupal Layout Builder vs Gutenberg: How Do You Know Which Page Builder’s Right for You? 

Drupal Layout Builder vs Gutenberg: which of these 2 next-generation site-building tools to use to create your page layouts? 

Or, better said, to empower your content editors to design great-looking pages on their own. 

In order to help you make an informed decision, I've made an honest “Layout Builder modules vs Gutenberg editor module” comparison. 

Therefore, in this post you'll find your answers to the following questions: 
 

• What issues with the editing experience in Drupal do these 2 new page layout builders come to address?
• What is the Gutenberg Editor?
• What are Drupal Gutenberg's main strengths?
• What are its limitations? What is the Layout Builder for Drupal?
• What are the Drupal Layout Builder's main strengths?
• What are its weaknesses?
• When would you use one Drupal page builder over the other? 
   

1. Drupal Layout Builder vs Gutenberg: What Limitations Do They Address? 

Or, to put it this way: what makes a good content editing experience? 

Here are some of the editors' main requirements: 
 

• to be easy to use (with an intuitive drag and drop interface)
• to enable them to create custom page layouts on the fly, with zero CSS or HTML knowledge
• to be ideally flexible, enabling them to adjust the pages to their needs 
   

Now, if we put editors' requirements against the "reality" of the editing experience in Drupal, here are the limitations we can identify: 
 

• it doesn't provide a decent level of visual design
• it compromises branding for flexibility or the other way around
• it requires some HTML experience
• it doesn't go beyond the level of a basic WYSIWYG editor
• it doesn't allow them to design fully customed page layouts
• it doesn't provide a 100% intuitive user interface
• it still makes editors dependant on the site builders/Drupal developers in their teams

And these are precisely the problems that these 2 Drupal page builders "promise" to solve. 
 

2. Introducing: The Gutenberg Drupal 8 Module  

The Gutenberg Editor module is no more than WordPress's layout system integrated with Drupal. 

What sets it apart from the other tools for creating page layouts in Drupal? 

Its block-based approach. 

Creating content in Drupal becomes a matter of selecting and assembling multiple blocks. 

Each block stands for an individual piece of content: a separate block for a button, another separate block for an image, another one for a column, for a heading... 

Furthermore, you get to create content inline. To edit the media content, text, and blocks on the page that you're building. 

In short, you can take the Drupal Gutenberg module as a convenient "block editor". 

You (or your editors) can put together and visualize your page layout in one large form field. That, instead of editing every single form field that makes up a page. 
 

3. 4 Reasons to Choose Drupal Gutenberg 

Let's say that you're looking for a site building tool to build a... landing page (or one that would empower your content editors to create it). 

Why would you go with the Gutenberg content editor for Drupal 8? 

Here are 4 good reasons to choose it: 
 

• it provides you with lots of predesigned elements out of the box
• you can see what you're building on the editor side
• it doesn't require you to be experienced in working with CSS or HTML
• you can design your own blocks or use blocks created by other open-source developers 
   

4. 6 Reasons Why You Might Hesitate to Choose Gutenberg 

Any honest Drupal Layout Builder vs Gutenberg comparison must include the 2 tools' main weaknesses, as well, right? 

So, here's why you may want to think twice before choosing the Gutenberg content editor in Drupal 8: 
 

• the way it stores data could be... better
• it doesn't excel when it comes to layout flexibility: you can align your blocks left, right, center, but you can't add custom margins, for instance
• the style options that it provides are quite limited, one of the main drawbacks highlighted in any Gutenberg vs page builder comparison
• updating a page created with Gutenberg is particularly overwhelming
• the visual editing experience is not one of the best ones: visualizing your layout is a bit more difficult
• you cannot reuse your Gutenberg blocks and the page layouts that you create with this editor 
   

Tip: when it comes to the poor visual experience that you get with the Gutenberg Editor, you can always improve it with page builder plugins. There are some pretty good ones out there that guarantee you a 100% visual design.

5. Introducing: The Drupal Layout Builder Module (Core)

"Drupal 8's Layout Builder allows content editors and site builders to easily and quickly create visual layouts for displaying content. Users can customize how content is arranged on a single page, or across types of content, or even create custom landing pages with an easy to use drag-and-drop interface." (source: Drupal.org)

The Layout Builder for Drupal enables you to create layouts by putting together separate form fields and block entities. No coding know-how needed. 

No need to tweak the templates in the theme's source code. 

In short, it "spoils" you with a drag-and-drop type of visual editing experience. You can put together structured content quick and easy. 

Source: Drupal.org

"But how exactly does it work?" 

Here's how you create a custom layout with this Drupal page builder in 5 quick steps: 

• enable the module
• go over to the "Manage Display" tab of your target content type
• click the "Use Layout Builder" checkbox
• click the "Manage Layout" button
• then, you're free to use your Layouts and Blocks (after you've created them), dropping them in the defined regions of the page that you're building 
   

6. 7 Reasons to Choose the Layout Builder in Drupal 8 

Here's a legitimate question that this Gutenberg Editor vs Layout Builder in Drupal 8 comparison should respond to: 

“Why would I want to use Drupal Layout Builder?” 

The best answers would be: 
 

• you can create your content blocks and just drop them on the regions of your page layout
• you get to (re)arrange otherwise static fields the way you want to
• you're free to add views, blocks, widgets, to any section of your page
• the content that you create is specific to that page type, so all the pages of that type will have the same layout
• you get to override the default layout to create fully customed pages
• your layout is rendered on the web page in real-time
• you're free to incorporate blocks in the main content region

7. 5 Reasons Why You Might Hesitate to Choose the Layout Builder 

When comparing Drupal Layout Builder vs Gutenberg, you inevitably get to the point where you ask yourself: 

"What are the Layout Builder's main weaknesses?" 

Now, here's why you wouldn't want to jump on it right away: 
 

• you can use it only on the main content area of your page
• unlike the Gutenberg Drupal 8 module, the Layout Builder doesn't ship with prebuilt elements for you to just choose from and assemble
• with Drupal Layout Builder, you need to create your blocks and page type first; you can't "get away with" choosing user-contributed blocks
• it's not always easy to see what precisely gets overridden
• you can't rely on a granular permissions system for overriding individual pages 
   

8. When to Use Drupal Gutenberg: 4 Typical Use Cases 

You'd want to use the Gutenberg Drupal 8 module if: 
 

• your Drupal website's a content-packed one
• you need to build a landing page
• you need to create a simple layout: Gutenberg doesn't really shine when it comes to style options
• you need to create content that fits perfectly into your theme's looks: Drupal Gutenberg pulls right from your theme's styles 
   

To sum up, designing landing pages are Gutenberg's most typical use case. 

Use it to add just some extra design (nothing too "extravagant") to an "About Me" page, for instance.
 

9. When to Use the Drupal Layout Builder: 2 Typical Use Cases 

You'd want to use the Layout Builder for Drupal if: 
 

• it's a field-intensive page that you're building: a product page, a case study, etc.
• you have synced content on that page (from Salesforce, for instance)
   

The END! 

Your turn now: have you tried any of these Drupal page builders? 

Which one best serves your content goals? 

What other pros and cons would you have added to this Drupal Layout Builder vs Gutenberg comparison? 

Let us know in the comments below. 


Photo by Jason Dent on Unsplash