Snazzify Your Content with Layout Builder

“Are you kidding me with these designs?! We have 2 months; we are not having crazy drag’n’drop UIs for the landing page content type. We don’t have time!”
 — Said every developer ever on a tight deadline when handed high-fidelity designs for the site’s landing pages and the requirements ask for a “Customizable, extendable and easy-to-use drag’n’drop interface for Content Editors to visually layout pages.”

Oh and did they mention they should still be revisionable?

It’s the craze these days.

Ever since the “Gutenberg” editor was released for WordPress and gained popularity we’ve seen a surge of “Easy to use” drag and drop interfaces for various CMSes.

https://wordpress.org/gutenberg/ — Gutenberg Editor

https://www.wpbeaverbuilder.com/ — Beaver Builder

https://elementor.com/ — Elementor

https://www.sooperthemes.com/drupal-modules/glazed-builder — Glazed Builder

https://www.drupal.org/project/stacks — Stacks

… and so on. I really could just keep posting links. Seriously.

The biggest problem with these solutions is that they just aren’t 100% built with Drupal in mind. Various feature holes exist in different ways; some don’t suppose revisioning, or integrate with Drupal’s translation system, or (dare I say) don’t use the Entity API at all.

And now another challenger joins the fight; Layout Builder. (Spoiler; it comes in Drupal core as of 8.5!)

**Layout Builder Is The Hero We Need**
The layout builder module that ships in Drupal 8.5+ follows a basic concept; hand over the manage display of entities to Layouts and Blocks instead of Fields. If you boil down all of these “Page Builder” tools they all follow the same pattern:

The user drops in a section on the page. Each section can have a layout that dictates the columns that a user can customize. E.g. a section could use your Two Column layout where the user can customize the two columns.
The user selects a “Block” or “Widget” from a pre-existing library of these items and drops it into one of the above columns.
The user immediately sees what it will look like on the page, and has a simple UI provided to make changes to the “Block” or “Widget”.
The user delights with joy at how easy it was.
Layout Builder approaches this problem using the same pattern, but does so utilizing already existing tools in Drupal.

**Setting It All Up**
Ideally you should be on the latest version of Drupal 8.6. Next you should install the “Layout Builder” module. Then finally, navigate to the Manage Display tab of the content type you want to “snazzify” and check the “Use Layout Builder” checkbox.

Now, when you visit the Manage Display tab you will no longer see the field listing you will just see the “Manage Layout” button. (You can also enable the ability to customize the layout of each individual node; the next checkbox that shows below “Use Layout Builder”).

And that’s it. (Obviously that’s not all; you will still need to create the Layouts and Blocks for your pages, but there are no more extra modules or third party JS libraries needed.)

Layout API — https://www.drupal.org/docs/8/api/layout-api

**But How Does It Work?**
Internally, Layout Builder provides a new Field type called “LayoutSectionItem”. This field contains a list of “Sections” where each section can reference a Layout (https://www.drupal.org/docs/8/api/layout-api). This “Section” object also stores references to the “SectionComponent”s stored in this section, where a“SectionComponent” is really a wrapper for a renderable plugin (Drupal Blocks).

Or in simpler terms, Layout Builder lets you use Layouts defined using the Layout API where you can drop blocks in the defined regions. And this is where it really shines. Anything you can create in a block can now be dropped into the regions on your layout.

And is rendered on the page in real time.

In your front-end theme.

Since Layouts can also be dynamically created with this module (https://www.drupal.org/project/dynamic_layouts), you could create new Layouts in the Drupal GUI and then use those in the Layout Builder GUI.

**Obviously Bootstrap Is Still Useful**
You could even start off using something like Radix (https://www.drupal.org/project/radix) and you now have Bootstrap components and layouts ready to use with Layout Builder.

You can read the official documentation on it here: https://www.drupal.org/docs/8/core/modules/layout-builder/layout-builder-overview

Layout Builder, which is now stable in 8.7 by the way, is part of Drupal’s ongoing initiatives in improving the lives of Content Editors. Be sure to check out all the new goodies in 8.7 (which also includes the new Media Library module).

Leave a comment if Layout Builder changed your life as much as it changed mine!