This module provides the ability to create custom layouts in Drupal through the user interface. Without this module, developers are required to define custom layouts by creating layout plugins that extend the LayoutDefault plugin provided by Drupal.

Requirements

Drupal 8.9 or Drupal 9+
PHP 7.3+

Getting started

To use this module you will install it via composer:

composer require drupal/layout_content:^1.0

Then enable it via the Extend page in Drupal or through Drush:

drush en layout_content

Creating Layouts

Navigate to the Layout types page under Structure menu of the admin panel. Like other entity type pages in Drupal (blocks, nodes, taxonomy) you manage your layout types on this page.

When creating a layout, you'll see a field called Layout. This section defines what regions your custom layout will have. Currently the layout defined as YAML in this first iteration, a user interface for this is on the roadmap for the future.

Each array defined in YAML is a row for the layout. Every value in each array (row) defined is a region. As an example, if you wanted to create a custom layout with 2 rows where the first row has 1 region, and the second row has two regions, your layout definition would look something like:

- first: First
- second: Second
  third: Third

Note: The structure defined here is currently only used to generate the icon map.

Custom layouts are fieldable entities which means you can take advantage of modules like Media Library in your layouts. You configure fields on your custom layout type like other fieldable content entities in Drupal.

Overriding the Layout Template

Once your custom layout is defined, you will then need to define your layout template in the theme (or module) of your project. Custom layout templates can be overridden as custom-layout--[LAYOUT_TYPE].html.twig. So if you defined a new custom layout called One Column, the template for that would be called custom-layout--one-column.html.twig.

Your template would look something like this:

<div{{ attributes }}>
  <div class="my-custom-layout-one-column">
    {{ content.layout_regions.first }}
  </div>
</div>

Development Roadmap

Automated tests
Custom Layout UI to replace YAML definition
Improve markup generation to automatically wrap rows in a container based on layout definition for the custom layout
Improve documentation

Please Contribute!

Layout Builder is a very exciting addition to Drupal and this module's intent to improve the developer experience for Layout Builder. Please contrib to this project by opening an issue and/or submitting a patch. Thank you!

Layout Builder Consultation

Do you need help with using Layout Builder on your project? I'm available for consulting. Please send me an email at nathan@dentzau.com to connect.

RTBC issues for Custom Layouts

Filters