Layout Builder in Drupal

The Layout Builder module for Drupal provides a layout user interface (UI), a set of flexible visual design tools that allows content creators and site administrators to customize the layout of a page via a powerful drag-and-drop UI. You can use Layout Builder to customize the layout of a single page, create a custom layout for all content of a certain type, or build landing pages.

At a high level it allows users to generate a layout -- two columns with a header, for example -- and then place a content type's fields and any blocks into that layout.

Layout Builder provides an API, and layout discovery feature, that themes and other modules can use to provide new templates. It allows more consistent tooling across the entire page-building ecosystem.

In this tutorial we'll:

• Give an overview of what Drupal Layout Builder is, and its common uses
• Introduce terminology and concepts related to Layout Builder

By the end of this tutorial you'll have a better understanding of what the Drupal core Layout Builder module does and how it might help with your specific use-case.

A new favorite page-building and design module in Drupal's core software, Layout Builder makes it possible to create content-type-specific layouts. All nodes of the associated content type will display their content using the defined layout. This allows site builders to display a page's content in two columns, or three, or two columns with a full-width banner image, etc. Then you can place the content type's fields and Drupal blocks into the sections of the defined layout, all via the Drupal UI.

In this tutorial we'll:

• Enable the Drupal Layout Builder and Layout Discover modules
• Create a new two-column flexible layout via the user interface
• Update the Basic page content type so that all nodes use the new two-column layout

By the end of this tutorial you should know how to create a new flexible layout, and apply it to one or more content types.

The Layout Builder module allows editors to create flexible layouts per content type, and per node. When configured to allow per-node layout customization, each node inherits the base layout for the content type. But editors can choose to further customize the layout on a node by node basis. This allows them to tailor the layout to better suit the specific node, and to have presentation flexibility that can be managed through Drupal's UI instead of in code. This also makes it harder to enforce design consistency, and future updates to the content type specific layout won't be applied to pages using a node specific layout.

In this tutorial we'll:

• Learn how to enable node-specific layouts
• Create a custom layout that is used on only one page

By the end of this tutorial you'll understand how to configure per-node-specific layouts.

When building with Layout Builder, the list of blocks available for a site administrator to place in a layout can grow and become overwhelming to navigate. This is especially true when you've got a lot of different modules enabled, as each can add new blocks. As well, complex configurations may require site admins to create more and more custom blocks. Some blocks, like certain Views, or default core blocks like "Who's online", are not meant to be used within the Layout Builder. These blocks can clutter the UI and also impact the performance of Layout Builder UI. The contributed module Block List Override is designed to help solve this problem.

In this tutorial we'll:

• Learn what the Block List Override module does
• Install and configure the module to improve the user experience when creating layouts

By the end of this tutorial you should know how to use the Block List Override module to improve the UX of the Layout Builder interface.

The Layout Builder Restrictions module allows you to configure which layouts, and which blocks, should be available in the Layout Builder UI. This helps improve the user experience by removing blocks that you don't want someone to place into a layout. It also restricts which layouts are available for a content type. For example, you may allow an editor to change the layout for a blog page but restrict them to choosing between 1- or 2-column layouts. Yet, you can still provide a 3-column layout option for use in other scenarios.

In this tutorial we'll:

• Install the Layout Builder Restrictions module
• Learn how to curate the list of layouts for use on a per-content type basis
• Restrict the list of blocks available for placement via Layout Builder's UI

By the end of this tutorial you'll know how to use the Layout Builder Restrictions module to curate the list of layout and block options available to editors in the Layout Builder UI.

Like many things in Drupal, there are multiple ways to solve the same problem when using Layout Builder. The Layout Builder system is very flexible. In order to be successful when using it, it helps to plan ahead and think through your specific use-case. Picking a pattern, and sticking to it, will help ensure your configuration is more maintainable, and easier for others to understand. While there's nothing to prevent you from mixing and matching, in our experience we've found it's helpful to at least set some ground rules.

In this tutorial we'll outline 3 different patterns to use with Layout Builder, and the pros and cons of each. We'll include:

• Using content fields in scenarios where a few pages use Layout Builder, but the majority of the site's layout is done via the theme and is generally not configurable by editors.
• Using a blocks-based approach to layouts for scenarios where you want to use Layout Builder instead of the traditional blocks and regions approach and allow editors to make changes via the UI.
• And finally, using an Entity view modes approach for sites that rely heavily on Layout Builder and contain lots of interrelated content types with complex layout requirements.

By the end of this tutorial you should have a better understanding of how to approach using Layout Builder for your specific use-case, and the advantages and disadvantages of different common patterns.

We recommend planning ahead when using Layout Builder, documenting how you intend to use Layout Builder for your specific use-case, and then doing your best to stick to it. One approach that we've found works well for sites that need a maximum amount of flexibility (and have the resources to do the upfront planning and theming required) is using entity view modes.

This approach is similar in concept to component based design systems, where you do the initial work of creating a set of components that all work well together up-front, and then allow them to be mixed and matched in whatever way is necessary.

In this tutorial we'll:

• Create new view modes for the Basic Page content type representing the different components.
• Use the ctools blocks module to allow displaying an entity as a block and choosing which view mode to use when rendering the entity.
• Provide custom HTML and CSS styling for the new components.

By the end of this tutorial you'll know how to use Layout Builder in combination with entity view modes.

One of the biggest UX problems with the current Layout Builder UI in core is that the control panel is often too narrow. This is especially noticeable when creating inline blocks, and working with WYSIWYG fields. The contributed Layout Builder Modal module is one solution to address this problem. It moves the UI for creating, and editing, custom blocks in a Layout into a wider modal window.

In this tutorial we'll:

• Install the Layout Builder Modal module
• Demonstrate how it can be used to improve the UX of managing custom blocks in Layout Builder

By the end of this tutorial you should know what the Layout Builder Modal module does, and determine if it's useful for your project.

Layout Builder module comes with some common layouts that can be used out of the box. The Drupal community has created modules that provide more layout options. However, perhaps your project requires special layouts that cannot be constructed with already existing options. Or you require more precise control over the CSS classes and HTML markup, especially if your website is based on a third-party front-end framework. In these cases you can define custom layouts in a module or theme and make them discoverable by the Layout Builder.

In this tutorial we'll:

• Define a new layout plugin
• Create a corresponding Twig template file for HTML markup
• Use our new layout in the Layout Builder UI

By the end of this tutorial you should know how to define a new layout in code, within a module or a theme.

Layout Builder is one of many different approaches to handling editorial layouts in Drupal. Now that it's stable, and part of Drupal core, we expect to see it become the dominant approach over time. However, as with most things in Drupal, there are multiple ways to solve the problem of creating component based flexible layouts that can be administered via the user interface.

It's a good idea to understand the different approaches and know what's available.

When it comes to component based design and ability to construct flexible layouts, it is important to understand the benefits and risks of the most popular techniques: Paragraphs, Bricks, entities and view modes, and Layout Builder. Understanding which approach fits the needs of your project best can be critical for its success in the future.

In this tutorial we'll look at some common approaches to administering layouts in a way that gives content editors controls including:

• Drupal core's Layout Builder
• Using core's entity reference fields and view modes
• The contributed Paragraphs module
• The contributed Bricks module

By the end of this tutorial you should have a broad overview of the different popular approaches to creating editor-controlled layouts.

One of the challenges that comes with Layout Builder is increased complexity of front-end development. Layout Builder offers site administrators increased flexibility regarding the placement and use of fields and blocks; a theme developer needs to account for this. Depending on how Layout Builder is used, this could mean a small number of new combinations, or virtually infinite combinations. Therefore, predicting and theming all of these combinations becomes a difficult but necessary task in order to ensure maintainability and overall design consistency.

In this tutorial we'll look at some things we've found helpful to consider when theming Layout Builder including:

• Design, and theme, atomic components
• Limit the number of possible combinations of fields by using entity view modes
• Handle edge cases

By the end of this tutorial you should have a better understanding of how using Layout Builder can impact theme development, and how to account for it.

Views is one of the most utilized modules in Drupal. When combined with Layout Builder, it provides a powerful tool for adding related content to a layout. Combining Views with Layout Builder can solve several common problems, including:

• Placing blocks of related content within Layout Builder sections
• Constructing search pages with custom layouts
• Placing call-to-action cards or buttons within a custom layout
• Allowing editors to use Views blocks in the layout without the need to export and import configuration and alter code

In this tutorial we'll:

• Learn how to place views blocks into a layout
• Explore the Views related settings available from within the Layout Builder UI
• Explain how to allow a View's exposed filters to be displayed and used in a layout
• Use contextual filters to control what is displayed in the View

By the end of this tutorial you should know how to place lists created with Views into a Layout Builder layout.

The Layout Builder Styles module extends the Drupal core Layout Builder UI to add the ability for editors to apply custom CSS classes to the blocks and sections that make up a layout. This gives layout editors more control over the look and feel of elements within a layout. It's especially useful when using Drupal's Layout Builder in conjunction with a design system like Bootstrap, Material UI, or your own predefined utility classes.

The module allows site builders to define new styles. Then, when placing a block into a layout, if there are any styles available for the block type, the user is presented with a select list where they can choose one or more to apply. When a style is applied, any CSS classes associated with the style are added to the markup. Also, a new style-specific theme hook suggestion is added to the block to allow for further customization.

In this tutorial we'll:

• Install and configure the Drupal Layout Builder Styles module
• Learn how to define new styles
• Learn how anyone editing a layout can apply the styles we defined to a block or section in the layout to change the UX

By the end of this tutorial, you should be able to use the Layout Builder Styles module to allow editors to add predefined styles to existing layouts and blocks without writing any code.

When defining new layout plugins for Drupal you can add custom CSS and JavaScript via asset libraries. This allows for the creation of layouts with complex structures and interactive elements. Those elements might include grids, tabs, and accordions. Drupal allows you to attach custom CSS and JavaScript directly to a layout plugin, or via the layout's Twig template file.

In this tutorial we'll:

• Define a custom asset library with JavaScript and CSS functionality
• Attach the asset library to the custom layout plugin
• Transform a multicolumn layout into tabs

By the end of this tutorial you should know how to attach custom CSS and JavaScript to a layout plugin to add interactivity and styling.