Skip to content
Article

Choosing the Best Editor: Gutenberg vs. Drupal Layout Builder

Gutenberg and Drupal Layout Builder are two editors aiming to solve the same challenges. Implementing either of these solutions can enable content editors to publish their own content, build pages quickly, and have the flexibility to adjust pages. No HTML, CSS, or developer knowledge is required.

With both options, content editors can change the layout of the page without having to change templates in the source code. This makes for an easy and flexible tool to create great-looking pages.

Depending on your content goals, one option may work better for your Drupal website than the other. Let’s take a look at the key features of each to choose the best editor for your website.

Gutenberg Editor Pros and Cons

Gutenberg is the new editor for WordPress 5.0+, but is is also available as a standalone library that easily integrates with Drupal.

You will no longer have to edit a page as individual form fields that are then output by a template in the source code. Instead, content editors can create and visualize their layouts in one large form field that accepts HTML.

Content editors assemble pages using blocks (not to be confused with Drupal Block entities, which we’ll discuss later), which are HTML elements like headings, columns, and image galleries.

Gutenberg Pros:

  • Use quick, visual editing.
  • Gutenberg is integrated with Drupal’s new media library to find and re-use media assets.
  • You don’t have to know HTML or CSS.
  • You can use blocks developed by other open-source developers, or develop your own.

Gutenberg Cons:

  • Individual instances of blocks and layouts aren’t reusable. That means, if users want more than one page to look the same, they have to manually lay out the content the same way each time.

Drupal Layout Builder Pros and Cons

Drupal Layout Builder is a new editing experience in Drupal 8.7.0+ that allows non-developers to change page layouts without changing templates in the theme’s source code. It uses a drag-and-drop interface to customize content on a page or across pages.

Drupal Layout Builder makes more sense for a traditional Drupal page structure, where users enter data into separate form fields, or build pages using block entities. Block entities are reusable chunks of content that can have fields like the content types.

Layout Builder allows content editors to mix the data entered into fields and block entities in new ways, which would have previously required coding know-how.

Drupal Layout Builder Pros

  • You can reorder field output in a more visual way.
  • You can embed Blocks in the main content area in a new way (intermingled with field output).
  • The content is laid out once per page type, and every new page of that type can use that layout. You can also override the layout for individual pages.

Drupal Layout Builder Cons

  • It only works in main content area of page.
  • It is hard to see what is overridden where.
  • There are no granular permissions for overriding individual pages.
  • Developers or site builders must still build page types and Blocks (as opposed to Gutenberg’s library of user-contributed blocks).

How to Get the Most Out of Both Options

With both Drupal Layout Builder and Gutenberg, it’s important to give content editors some guidelines about what components can be used where, and what should be avoided. It’s important to develop strong style guides, training programs, and governance documents to keep the site and message aligned with the website’s brand.

Taking some time to implement standards and training will help you find the balance between flexibility in layouts and brand compliance.

Need Help Choosing Between Technologies?

The best technologies to use for your website will heavily depend on your business goals and types of content you are publishing. Whether you are looking for the right CMS, editor, or hosting solution; Atlantic BT can help you strategize for your next web project. Contact us to talk about your options or schedule a free consultation.

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

What is the best web development framework?
Many people commonly ask “what is a framework in web development?” Web development frameworks can easily be confused with web development tools, languages, or parts of the web development stack (like .NET, PHP, JavaScript, or Ruby).
Learn More about What is the best web development framework?
What is the best programming language for web development?
If there was one “best” programming language, then everything else would be obsolete. The reality is that there are so many different programming languages because there is no “best” language for any situation.
Learn More about What is the best programming language for web development?
How much does web development cost?
Web development can vary from a few hundred to millions of dollars depending on what is needed. You may simply need some changes to something that already exists, or you'd like to build a large or complex application.
Learn More about How much does web development cost?
What is web design and development?
People often lump web design and development together, so what's the difference? As the Internet has evolved, the skills required to produce a high quality website or web application have changed.
Learn More about What is web design and development?
What is React web development?
React is a popular JavaScript library. It is primarily used for building interactive user interfaces (UI).
Learn More about What is React web development?
What is PHP web development?
PHP is a back end language primarily used for custom applications, content management systems (such as Wordpress), eCommerce engines (such as Magento), or even massive sites like Facebook.
Learn More about What is PHP web development?
What is bootstrap in web development?
Bootstrap is a framework used in front-end development to save time, specifically for mobile-first development. It combines CSS and JavaScript templates and libraries to speed up the development process.
Learn More about What is bootstrap in web development?