Layout Builder has been stable in core since Drupal 8.7.0, but are Drupal shops using it? Does it replace the popular Paragraphs module? Having built sites with Layout Builder both from the ground up and from adding to an existing paragraph-heavy site, I can confidently say that Layout Builder is a freakin’ amazing module, just don’t expect to simply turn it on and start building great landing pages on the same day.
Drupal's Layout Builder allows content creators and site builders to customize and preview in real-time how content is arranged on a page. It’s a powerful tool that finally delivers the drag and drop flexibility that contrib modules like Panels and Paragraphs have provided with debatable degrees of success since Drupal 7. Developers tend to be opinionated about this topic, so be careful what you bring up at Drupal parties.
Drupal.org has some great documentation, and I have found some great articles out there about the nuts and bolts of Layout Builder. These are all great but are either introductory or dive deep into back-end heavy concepts (for which I am very thankful). But for content creators, site builders, or developers considering Layout Builder for your next project, there are some real-world challenges and pragmatic ways to fine-tune Layout Builder that I wanted to share.
Why We Love the Paragraphs Module
Since Drupal 7, Paragraphs has been the go-to module (186,224 sites report using this module) in providing both a component-based editing experience and the flexibility to move elements around. I haven’t built a site without Paragraphs yet. But it usually requires a series of additional contrib modules for key features, and any previews are still not seamless. The experience for content editors can get complex very quickly with tabs within tabs within tabs just to change a single field. All that said, Paragraphs remains unmatched for bundling fields into reusable components and integrates seamlessly with Layout Builder.
Planning matters
Layout Builder is a dramatic change in the UX for building pages. For content editors and site builders who already have familiarity with Drupal, the learning curve is low. That said, it does change the workflow, and even for developers, wrapping your head around the concept of inline blocks vs blocks vs fields can get your head spinning a little.
Spend the extra time in planning out sections, blocks, paragraphs, and usage patterns along with the types of variants and controls your content editors will need to build pages. I can’t emphasize enough that even the smallest attention to detail, like naming blocks, views, and fields well will pay big dividends. In fact, it may be more important to decide what features not to include. Having too many inline-block types, extra sections, and even style variants quickly becomes confusing for both content editors and the development team maintaining the site.
An Easy to Follow Recipe
Keep in mind that in Drupal Years, Layout Builder is still just a toddler. So as I’ve mentioned earlier, it definitely has some rough edges and will need some features from contrib to be truly easy for your site builders to create custom layouts. Here are my suggestions to make sure content creators can get the most out of Layout Builder and some great contrib modules that I think make big UX improvements.
You only need one content type with Layout Builder
In 99% of cases, you are not going to want to use Layout Builder for every content type on your site - I’ve tried that and won’t do it again. Content types like Articles and Staff Bios usually have a consistent layout and work better for everyone with fields and templates. I have found having one content type that is full Layout Builder is usually sufficient. The UX and development team are going to define sections and components (blocks) that can be used in combinations to layout just about any type of page.
Caution: Installing on an existing site
Developers should expect that installing Layout Builder on an existing site can be more time-consuming than building from scratch. The Layout Builder interface loads the site theme (not the admin theme) and so interface items like forms, buttons, fieldsets, and tabs all pick up your theme’s styles - custom form styles will have a dramatic impact. So plan for the time to adjust your theme to not affect standard Drupal admin elements like forms, buttons, tabs, paragraphs, etc. More about this later.
Layout Builder UI tuneup
Even if you are working on a new project, there are still some parts of the Layout Builder interface that are wonky out of the box. I want my content editors to focus on building pages, following design patterns, and great content, not trying to navigate around clunky UI problems.
First, I focus on streamlining the interface by disabling or minimizing elements that just add noise to the layout experience. I found the simplest way is to add a custom module that loads an additional stylesheet and javascript that targets just Layout Builder elements. This way I can reuse it on multiple projects and customize it a bit more per project.
In your custom module, define a library for your styles and scripts, and then attach it for users who have the right permissions. I chose “access contextual links” since users must have those permissions to use Layout Builder.
<?php
use Drupal\Core\Form\FormStateInterface;
/**
* @file
* Add a custom stylesheet and javascript to the admin theme.
*/
/**
* Implements hook_preprocess_hook().
*/
function modulename_page_attachments(array &$attachments) {
if (!\Drupal::currentUser()->hasPermission('access contextual links')) {
return;
}
$attachments['#attached']['library'][] = 'modulename/admin_styles';
}
You may have other ideas about how to clean up the UI, but my goals were to remove unnecessary space and reduce the size of the Add Section elements, providing the editor with a better feel for the layout. I also move and reduce the size of the buttons at the top and hide altogether the descriptive text.
Before (default UI)
After (streamlined UI)
Install these modules right away
There are some great contrib modules for Layout Builder, I haven’t had the chance to try them all, but these are my must haves…
Layout Builder Restrictions module
https://www.drupal.org/project/layout_builder_restrictions
By default, the list of blocks to place in the offcanvas tray is super long, and most items listed you won’t ever need to place in your layout. Layout Builder Restrictions gives you granular control, on a section by section basis, over what blocks will show up in that tray. The goal here is to simplify the listed blocks and limit possible confusion as to which blocks should be used.
Default
Better
I set the “Default restriction for new categories of blocks not listed below” to: “Restrict All Blocks From Newly Available Categories”. For the “Layouts Available For Sections”, I go with “Allow Only Specific Layouts”, which lets me select blocks on a section by section basis. There is a submodule “Layout Builder Restrictions By Region” if you need to control blocks by region.
It ends up looking like this:
Organization tip:
The list of available blocks is extensive even when grouped by block category. In reality, you can probably set most block categories to “Restrict all existing & new blocks”. The List (views) blocks are where I find the list to be messy, since it lists each view and all possible displays. To make it easier to find only the views I want to make available, I edit my views and define a custom block category named “Layout (views)” only for specific displays. Now, when I look at the list of block categories, I can easily find the views I plan to use, and I might even be able to set it to “Allow all existing & new blocks”.
There’s also a Layout Builder Restrictions By Role module but I haven’t needed that level of control as of yet.
Layout Builder Modal
https://www.drupal.org/project/layout_builder_modal
By default, when you create/edit a block, the block edit form is displayed in the Layout Builder offcanvas tray. I find that unless you have a really simple block, this becomes a bit claustrophobic to edit. Layout Builder Modal opens that block edit form in a modal and gives you some controls for modal size. Recently added is the Theme select, so you can add the admin theme styles. This doesn’t fix every CSS conflict, but it goes a long way.
Layout Builder Direct Add
https://www.drupal.org/project/lb_direct_add
There are two reasons I use this module. First, it reduces the number of clicks for editors to add an inline-block. It replaces the “Add Block” button with a Select listing of available inline blocks. No need to open the offcanvas tray (if using Layout Builder Modal) and then click the “Create Custom Block” button just to add an inline-block. The last option in the select list is “More” which expands the offcanvas tray to access global blocks. The second reason this module is helpful I learned later. Just by adding a direct link to add an inline-block without expanding the tray, it helps editors grasp the difference between the two types of blocks: inline vs. reusable.
Feel free to fine-tune the UI in your custom module.
Layout Builder Styles
https://www.drupal.org/project/layout_builder_styles
I can’t live without this module, since developers can define styles that can be applied to a block or section. Restrict styles to specific blocks or sections and limit to 1 or multiple styles on a block/section. Yes, you could accomplish this with a field on blocks, but this module stores the styles as config entities and can therefore be exported/imported and changed. Plus, the UI is easy to follow and I find it gives the developer a chance to easily experiment with the types of styles you add. I try to limit to a couple at most per block or section type.
Layout Builder Additions
https://www.drupal.org/project/layout_builder_additions
I like the small tweaks this little helper module makes to the UI. The module moves the block description to the modal header, a minor difference in vertical space, but small improvements like this reduce clutter. As a bonus, this module adds a direct link to layout in the operations dropbutton on the admin content page.
Integrating Paragraphs
I find that the Paragraphs module still plays a key role in every site we build. Both as essentially a replacement for the Field Collection module, and to provide an easy way for any content type to add structured content. In Layout Builder, a common use case is a card paragraph bundle (with image, text, link). The card bundle could be added to a block, which makes it easy for an editor to add multiple cards to a single block. The same bundle could then be used for other content pages. The same twig template and styles could be used for both instances, making a component that works anywhere on your site.
Default layouts
With all this focus on streamlining the interface and helper modules, it still takes some effort to build out pages. When possible, I set up a default layout with commonly used sections and block patterns as a starting point. This way when an editor creates a new node, they never start from a blank canvas. Someday there will be a node/entity clone module that really works, but until then, default layouts are a simple enough way to set up your editors for success.
Pseudo style guide pages
To close this out, I’d suggest creating a number of example layout pages to demonstrate how the sections and blocks work. Create multiple sections where you show the same block with each style or variant applied. While this isn’t a formal style guide, it gives your content creators examples of how each component can be used. As you add components, this is another great way to test and provide working examples. I also include several examples of “What not to do” to hopefully prevent any unplanned patterns.
The same example pages give your development and QA team a way to thoroughly test and identify gaps in functionality or theming. We usually find some minor spacing or color adjustments are necessary, or even ways to make the UI a little better. In the long run, your content creators will have a way to reference the intended usage of your components, sort of like built-in documentation.
Our stamp of approval
Like many Drupal shops, we embraced using paragraphs with both Drupal 7 and 8, and while we were excited to see what the new Layout Builder core module could do, we were a bit hesitant to dive into a new tool like Layout Builder. Now with projects upgrading to Drupal 9 and Drupal 10 around the corner, our team uses Layout Builder for many of our projects and we have found many benefits to it. With a bit of developer help and guidance from our UX/UI team, Layout Builder empowers our clients to design dynamic pages, the flexibility to customize each layout, and improves the overall site building experience.
If this sounds like the solution for you and you’re ready to work with us on a project using Layout Builder, contact us today so that we can discuss what your site could look like with you at the helm.