In light of the recent COVID-19 pandemic - OPTASY would like to offer DRUPAL website support for any Health Care, Government, Education and Non-Profit Organization(s) with critical crisis communication websites or organizations directly providing relief. Stay Safe and Stay Well.

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

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

by Silviu Serdaru on Mar 25 2020

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. 

Drupal Layout Builder vs Gutenberg: Gutenberg 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. 

Drupal Layout Builder vs Gutenberg: The Layout Builder

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 

Development

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

Is Drupal Good for eCommerce? 11 Excellent Reasons Why You’d Choose It over Another Platform
"... wanna run eCommerce on Drupal 8 but don't know if it's a good idea." But is Drupal good for eCommerce?  And, most of all: Is it better suited for your own online business needs and feature requirements than other eCommerce platforms out there? Some legitimate questions you're struggling with there… To give you a hand, here's a list of 11 excellent reasons why you'd lean towards Drupal for your next eCommerce project. Reason #1: You're in Full Control of the Source Code to Make Any Changes You Want In other words, you don't need to convince vendor first that the changes you need to make are beneficial for him/her. You're free to extend Drupal eCommerce platform's core functionality, to adapt, and extend its code till it meets your needs entirely.  … till it integrates perfectly into that specific software that you use. Which is not the case when you go for a commercial solution: you're not granted access to the core code for any custom software development work that you might need to make. Of course, this "reason" becomes a really strong selling point only if/when: you have non-standard business requirements it's a large, complex eCommerce website that you're building Reason #2: Your eStore Grows With Drupal  Drupal scales with your business... effectively. And by that I mean that it's designed to keep the resources and the time required to handle your online store's growth at a minimum. Being: flexible by nature (its open source nature) powered by the API-first initiative … the Drupal 8 eCommerce platform makes the best choice if "scalability" is on top of your list of requirements. Reason #3: You Get to Reach Out to Your Customers Across Multiple Channels  "Is Drupal good for eCommerce?" It becomes the perfect option for your own eCommerce website if you're planning to reach out to your customers across an entire network of sales channels. Let's say you have your main/central eCommerce website and you need to pull content from there and to distribute it across a whole ecosystem of channels — eCommerce apps, digital kiosks, conversational interfaces — and devices. Then, the API-first initiative allows you to tap into a headless commerce Drupal architecture and: use Drupal as a back-end content repository configure your content to fit all types of formats and reuse it whenever (and wherever) needed increase your outreach incorporate business automation into your development team's workflow: help them work smart and achieve more Reason #4: You Get to Deliver Content-Driven eCommerce Experiences With Drupal, you get the best of both worlds: an eCommerce platform (by integrating one of its specialized eCommerce modules into the content management system) a content platform And this is what makes it ideal for: tapping into the experience-led eCommerce model getting the most out of your content marketing efforts (think blog posts, effectively interconnected product pages, user guides, etc.) Reason #5: You're Free to Integrate Any Third-Party Service into Your Online Store From: marketing platforms to analytics services to payment gateways of your choice (there are 80+ payment options available with Drupal Commerce) to third-party add-ons that would automate your team's tasks and boost their productivity (while boosting online sales, as well) … Drupal & its eCommerce component accommodates any type of integrations you need to make. Reason #6: "Is Drupal Good for eCommerce?" It Is for Delivering High-Speed eCommerce Experiences Just think… real-time shopping cart updates.  Or pretty much any action that your customers would need to carry out on your eCommerce site, then turbocharge it with top speed. A decoupled Drupal Commerce setup (add the JavaScript framework of your choice here) enables you to deliver such type of dynamic user experiences.  Reason #7: You Have No Limits to How Much You Can Extend Your Drupal 8 eCommerce Website Drupal Commerce can grow as much as your business needs. Whether you need to integrate: a whole network of third-party systems a whole lot of contributed modules an eCommerce Drupal distribution (a bundle of multiple modules) a Drupal eCommerce theme  … and extend your eCommerce store's functionality, there's no limit to what you can incorporate into your Drupal eCommerce website. Reason #9:  You Benefit from an Extremely Configurable eCommerce Solution "Whereas eCommerce solutions are often developed with an application mindset, highlighting what you can do with it out of the box, Drupal Commerce was developed with a framework mindset, focusing on what you can build with it." (Source: Drupal.org) Basically, you're free to customize every little piece of your Drupal 8 eCommerce site, till it: delivers that unique shopping experience you want it to meets all your ultra-personalized requirements: to trigger certain actions based on user input, to display multiple tax rates, to have an out-of-the-ordinary checkout flow, etc. Here, it's up to you and it depends on what you need to build: Are you looking for a cookie-cutter eCommerce solution, that would help you get a generic webshop up and running in no time? Or do you want unlimited customization freedom, that comes at the cost of…  investing more time in writing custom code? Reason #10: You're Free to Sell Both Physical and Digital Goods And that thanks to Drupal Commerce's flexibility: It provides you with the functionality you need to start selling your digital products — subscriptions, tickets, online courses, etc. — on your online store. A key aspect to consider when comparing the features of your best options in terms of eCommerce platforms in 2020. Reason #11: You Can Make the Most of the Granular and Differential Access to Content Drupal allows you to define different roles for your team members and to assign several levels of permission to each role. Not everyone would then be authorized to edit content, add products, manage orders, publish content, etc. This way you get to: set up a convenient hierarchy harden your online store's security  So, Is Drupal Good for eCommerce? Maybe a more appropriate question would be: "Is Drupal the right solution for my eCommerce business?"  It might be... And these 11 reasons mentioned here do become the best arguments for you to choose it over another platform (Ubercart, Prestashop, Shopify…) if: it's a growing or an already established eCommerce business that you run (otherwise, all that configuration and custom work might be an overkill for a small business) you have complex feature needs for your online store: you need to integrate it with coupon rules, several backend systems, and so on Do you fit the eCommerce business owner "profile"? For we do fit the profile of that Drupal eCommerce agency you're looking for, capable to tweak it till it fits your complex requirements to the slightest detail. Just challenge us!   Image by StockSnap from Pixabay  ... Read more
Adriana Cacoveanu / Sep 30'2020
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 2)
Ready to compare the features of 5 other best headless CMS in 2020? We've got them ready for you to just dive in and: survey the key reasons why you'd choose one over the other discover each one's main use cases narrow down your options … and pick the one that matches your requirements. What Is the Best Headless CMS in 2020? 5.6. Directus An open source tool for managing and delivering content across an entire network of platforms and devices. And here are some of the top reasons for choosing Directus: it provides your editorial team with an easy to use admin app for managing content it can be in the cloud or self-hosted it provides API for your development team to fetch content 5.7. Netlify CMS  One of your top 10 headless CMS options, an open source one, that you get to add to any static site generator of your choice. A React single-page application that provides you with an easy to use UI, playing the role of a… wrapper for your Git Workflow. Basically, when using Netlify CMS your content gets stored in your web app's git repository (as markdown files), close to your codebase.   "How does a Netlify CMS Gatsby setup work?"   It's pretty straightforward: You enter your content via that user-friendly interface, then Gatsby uses it to come up with the right pages for your web app. Why would you use it? it fits both large and small-sized projects, with fewer pages to create, to add content to, to edit, and to manage you get to review/preview your content and make changes in real-time, and even control entries status in editorial workflow mode it provides you with an easy-to-use UI, with just 3 tabs: workflow, media, and content you're free to use it with any static site generator you get to extend its functionality: add your own UI widgets, editor plugins, customized previews, etc. 5.8. GraphCMS     An API-first content management system, a GraphQL-native one, that allows you to distribute content across multiple digital platforms. And not just anyhow, but… within minutes. Your developer team gets to create content APIs in no time, whereas your content team gets all the tools they need for a smooth editor experience.   Source: capterra.com GraphCMS vs Contentful: Main Differences GraphCMS works best for enterprise and mid-market companies, enabling them to build highly scalable applications GraphQL is its underlying technology: an open source query language for APIs, that's been growing more and more popular among developers Contentful targets top global brands, helping them distribute digital content experiences across complex networks of markets and channels REST is its underlying technology: a programming paradigm for distributed systems And here are 2 good reasons for choosing GraphCMS as your go-to headless content management system:  you get a CMS that's client-side and JAMstack compatible you get to tap into the benefits of a JAMstack approach to development (JavaScript & Markup & API) 5.9. Cosmic A cloud-hosted headless content management system that provides you with both GraphQL and REST APIs. But what makes Cosmic one of the best headless CMS in 2020? Why choose the Cosmic Headless CMS?  it ships with features like content modeling, media management, localization, and webhooks it grants you a smooth editor experience with its WYSIWYG  editor, that you can use to incorporate (by embedding code) third-party services like Typeform and GitHub. it integrates smoothly with AWS, Slack, Algolia, Stripe, HubSpot 5.10. Kentico Kontent A cloud-based content delivery API that turns your structured content into content that's easy to be "consumed" by any device or digital platform that you might use as a front-end delivery layer.  Why would you choose it over other great options of headless CMS? you get an AI chatbot when using Kentico Kontent it provides webhooks and custom elements that make third-party integrations a lot smoother you get content management API enabling content consumption And we've come to… the END of the list of 10 best headless CMS in 2020. Which one checks the most features off your list? Now, if you're facing a "Headless Drupal 8 vs Contentful" dilemma, we're here to: help you identify the one that works best for your business and your requirements make your headless CMS-based project work Just drop us a line!   Image by tdfugere from Pixabay   ... Read more
Adriana Cacoveanu / Sep 26'2020
10 Best Headless CMS in 2020, That Cover Most of Your Requirements (Part 1)
Overwhelmed with options? Are you building your first (e-commerce) headless CMS and you don't know what headless CMS platform to choose?  What are the best headless CMS in 2020, so you can at least narrow down your choices and start... somewhere? Which system matches most of your feature requirements? Here's a top 10: 1. But First: What Is a Headless CMS, More Precisely? Relax, I won't bore you with too many details — we already have an in-depth post on the differences between headless and traditional CMS. So, if we were to sum up the concept in just a few words, we could say that: A headless content management system is an architecture where content is separated from the presentation layer (the client-side front-end). Meaning that you get to create, store, and edit "raw" content (with no design or layout) in the backend and deliver it wherever needed —wearable, mobile app, website — via API. In short, what you get in a headless architecture is: a database to store your content in a dashboard for editing your content Source: Zesty.io As for the "head" that serves your content to the end-user : you're free to build your own front-end, from the ground up … and even multiple front-ends, if needed, that will all use calls from the API to retrieve and display content 2. … Then What's a Decoupled CMS? Headless CMS vs decoupled CMS: what's the difference? And why headless over decoupled? The role that the API plays… That's what makes the difference (and why you'd want to go for a headless approach): If, in a decoupled architecture, the API plays the role of an intermediary between back-end and front end, in a headless architecture the API can be used by any of the front-end portions for pulling data. In other words, a decoupled CMS does come with a built-in front-end delivery layer, that you can rely on, but a headless approach is an API-driven content repository. Which gives you more flexibility for delivering content to any type of display layer. … to multiple "heads". You're free to distribute it wherever it needs to get displayed. 3. Why Choose a Headless CMS? Top 9 Benefits Before I "divulge" the best headless CMS in 2020 to you, here's a shortlist of the key advantages of using a headless CMS software: you get to engage your customers with personalized content across an entire network of digital channels, at different stages in their journey you can deliver richer digital experience, tailored to each channel you gain platform independence you're free to choose your technology of choice you benefit from cross-platform support you get to manage your content from a central location and distribute it to multiple platforms/IoT-connected devices, in a universal format you're free to manage all your platforms from one interface your development team gets to choose the development framework of their choice, integrate new technologies and, overall… innovate you're free to redesign as often as you need to, without the dread of re-implementing your entire CMS from the ground up     4. … And When Should You Use It? 5 Best Use Cases  How do you know for sure that you need to adopt this approach? You know it because your scenario describes one of the following use cases for headless CMS: you're building a site using a technology you're familiar with you're building a website with a static site generator you're building a JS-based website or web app you're building a native mobile app you're building an e-commerce site and you know that the commerce platform you're using won't… cut the mustard as a CMS; or you need to enrich product info in your online store 5. What Are the Best Headless CMS in 2020? Top 10 "Which CMS should I use?" you wonder. "The one that meets most of your requirements…" So, you should start by pinning them down. What features are you looking for in a CMS? Maybe you need a system that should: be straightforward and easy to use for the marketers/non-technical people in your team be built on… Node be highly customizable and editable for your content team to be able to change overlay text, logo, background video/image be simple to set up integrate easily with Gatsby support multi-site setups not be tied up to (just) one specific database provide ease of content entry and rich-text support provide a granular permission system provide native support for content types What are the features that your project couldn't live without? Now, with that list of "mandatory" features at hand, just drill down through your top headless CMS options in 2020. Here they are: 5.1. Storyblok A purely headless CMS that ships with a visual editor, as well. Why would you go for Storyblok? What makes it one of the best headless CMS in 2020? it provides the experience of a page builder for all those non-technical users in your team: editors get to manage content via a more user-friendly interface it grants your developers easy access to the APIs they need 5.2. Prismic Its major selling point? It allows you to choose your own language, framework, technology… And these are the 3 good reasons to go with Prismic as your headless CMS: it allows you to model your content schema and to add your content you're free to choose whatever framework that meets your feature needs: React, Vue, Next, Nuxt, Node, Gatsby… you're free to choose either GraphQL or RESTful API to query content 5.3. Drupal 8 Headless CMS   Another great option is to exploit Drupal's headless capabilities and pair them with the JavaScript framework of your choice. Here are some of the best reasons why you'd use a Drupal 8 API-first architecture: Drupal's a mature and enterprise-level headless solution backed by a wide community, used by more than 1 million sites globally; you get to tap into its massive module collection and even create new custom ones to extend your website's functionality its JSON:API follows the JSON:API specification; developers in your team can start using the API even if they're not experts in working with Drupal you get to load your GraphQl schemas straight from your Drupal content repository; there's a specialized module for this: the GraphQL module you get to use all of  Drupal's famed features (granular access to content, processes, workflows, modules, etc.) right away; you get them out-of-the-box since the REST API is… rooted deep into Drupal 5.4. Strapi, One of the Best headless CMS for Gatsby. It's an open-source Node.js headless CMS, a "host it yourself" one, that allows you to build Node.js apps in… minutes. Why would you use it? because it generates available RESTful API or uses GraphQL shortly after installation, making data available via customizable API because it allows your developers to invest all their resources in writing reusable app logic (instead of having to use some of that time to build an infrastructure) because it's fully JavaScript because it supports plugins that extend the platform's functionality because it's open-source: you'll find the entire codebase on GitHub  5.5. Contentful  Looking for a platform-agnostic solution? A… content delivery network that would enable your development team to manage and distribute (and reuse) content to multiple channels? Then this is the API-driven headless CMS you're looking for. Here are 6 other reasons why you'd want to put Contentful on your shortlist: consistent APIs easy to set up you're free to create your own models easy to use: ships with a robust, non-technical, user-friendly UI you get to add custom plugins quick and easy you get to set your own schemas to get displayed the way you want them to, across different apps Good to know! There's even a Shopify extension available. What it does is connect your online store to your content, stored in Contentful. And if you'll need help with building, fine-tuning, and integrating your content hub, we're ready to tweak Contentful to your needs.  END of Part 1! Stay tuned, for there are 5 more candidates for the title of "the best headless CMS in 2020" waiting in line.  Image by Couleur from Pixabay ... Read more
Adriana Cacoveanu / Sep 25'2020