Layout Builder — a new tool for building Drupal 8 layouts

Layout Builder — a new tool for building Drupal 8 layouts

27.03.2019

Layout Builder is a new tool for building Drupal 8 entity layouts, which has recently been gaining popularity. In spite of the fact that it is still an experimental tool, developers use it more and more for building layouts.

The Layout Builder module has been included in Drupal Core starting with version 8.5 and it still undergoes significant changes and metamorphoses; however, its basic functionality remains unchanged — it helps developers to easily and conveniently build page layouts using a UI, and what is more, it enables embedding and linking any elements in a layout — fields, views, menus and forms. 

Installing and setting up the Layout Builder module

As we mentioned earlier, the Layout Builder module has been available in Drupal Core since version 8.5, which means that all you have to do is install it. 

instalacja

You don't have to do any additional configuration and you can start using it immediately, which you will see in the next step.

As of now (March 2019) the latest stable branch of Drupal is 8.6.13, and this is the version we are going to use for all our examples.

Launching Layout Builder

Given the fact that Layout Builder can be used only in entities, immediately after installation, you can find an option to use Layout Builder in place of the default display manager in the display management tab in all types of entities.

Manage display

Using Layout Builder, you can create layouts for a given type of entity, so each entity of a given type will have the same layout; however, you can also use an additional option:

Layout options

which allows individual entities to overwrite the default layout for that entity type. This, in turn, offers pretty much unlimited possibilities, allowing you to change the appearance of only one entity of a given type while keeping the layout of all the other entities.

After applying the selected options, the display management form changes its appearance — you can also find an additional button labelled as “Manage layout".

Additional options

Please note, that since version 8.6 the module allows you to enable/disable Layout Builder for a given view mode — this means that the “Teaser’ mode remains untouched and uses the standard Drupal engine.

Layout management

So, what does this mysterious “Manage layout” button do? It takes you to the layout editing page, which uses the default page layout.

Edit layout page

In this mode, you can manage sections and blocks in a section. You can also easily change the section order, as well as move blocks inside and between sections by dragging and dropping. 

It is important to confirm all operations by clicking “Save Layout" button.

edit layout

To add a new section, click "Add Section". Then the available layouts will appear on the right-hand side

choose a layout

After you select one of them, a section will be added using the selected layout. You can then fill the section with blocks.

Choose a block

To do this, click “Add Block”.

You can select from many available options. Apart from fields, you can also easily embed a form, view, menu or blocks in an entity. 

If you need something even more powerful, combine Layout Builder with Entity Blocks module (entity_block), which enables you to embed any entity in a selected view mode as a section block. By doing so, you can easily reuse previously created elements and place them anywhere in the layout.

Single entity layout

So far, we have been working on a layout for the entity type. But let’s assume that you want a single entity to display a bit different than the rest, for example with your own block?

Layout Builder expands entity routing with an additional page with /layout argument, which means that you can find an additional “Layout” tab when editing a block or node.

edit custom block

When viewing a node, you can also find a quick shortcut to layout editing available in the tabs:

editing tabs

All you have to do now is to modify the existing default layout according to your needs and apply all changes. Just like that.

If you ever find yourself having to restore a default layout, you also have the option to “Revert to defaults”.

Defaults

Important: If you have used the option of changing the layout for a single entity, the possibility of disabling the Layout Builder will be blocked.

manage display

Only after restoring all changed layouts to their default values will enable you to change the layout options again.

Layout Builder under the hood

Layout Builder is definitely impressive when it comes to GUI management. However, the programming tasks that you will encounter while working with the tool on a daily basis might be a bit more complex. You might then ask how to work with Layout Builder with code.

It turns out that enabling and unlocking templates for a single entity is relatively easy.

Simply load the display:

$entityViewDisplay = \Drupal::entityTypeManager->getStorage('entity_view_display')->load('ENTITY_TYPE.ENTITY_BUNDLE.VIEW_MODE');

It will return a LayoutBuilderEntityViewDisplay type object, which you then have to modify like so:

$entityViewDisplay->enableLayoutBuilder();

to enable the Layout Builder for a given view mode, or additionally set the flag:

$entityViewDisplay->setOverridable(TRUE);

to enable creating individual layouts for a single entity.

Then, you need to save everything.

$entityViewDisplay->save();

What actually happens under the hood is that the Layout Builder module adds the layout_builder key to the third_party_settings of a given entity type, containing values for the parameters shown above (enabled, allow_custom) and stores the default layout for this type of entity under ‘sections'.

If the setOverridable flag is set to TRUE, it creates a new entity field called layout_builder__layout, which stores the modified layout for this particular entity.

On the other hand, creating a section with code and filling it with appropriate content is a bit more complicated.

Let's start with creating a new section. To do this, we need to create a new instance of the \Drupal\layout_builder\Section class, including the layout_id parameter, which serves as a layout identifier. 

Pro tip: Layouts are defined in *.layouts.yml files and the default templates can be found in the layout_discovery module.

Then the simplest way is simply to add another element to the section, in which case you are going to use the appendComponent method, which takes on an instance of the \Drupal\layout_builder\SectionComponent class as an argument. First, however, you will need to prepare a couple of things before you can create such a section component. First of all, you will need:

  • the uuid of the embedded element;
  • the name of the region in the section;
  • plugin configuration;

In this example, we are going to use the plugin provided by Entity Blocks to embed a sample node in a single-column section:

$section = new Section('layout_onecol');

$uuid = $node->uuid();
$region = ‘content’;
$pluginConfiguration = [
  'id' => 'entity_block:node',
  'provider' => 'entity_block',
  'label_display' => FALSE,
  'view_mode' => 'default',
  'entity' => $node->id(),
];
$component = new SectionComponent($uuid, $region, $pluginConfiguration);
$section->appendComponent($component);

You always have to keep in mind that layouts are stored in third-party settings or in a field, so in order to save the section you will have to save it in one of these places.
In our example we are using a field, so:

$entity->layout_builder__layout->setValue($section);
$entity->save();

By doing all of these steps, you now added a single column section to an entity and displayed a sample node in it.

Pros and cons

Below we prepared a short list of some pros and cons that I discovered while working with Layout Builder:

Pros:

  • ease of deployment – the module is already in the core, there is no need to implement new entity types;
  • convenient interface with drag&drop functionality
  • customisation options for individual entities;
  • an easy way to combine fields with other entities, without having to create additional reference fields;
  • a convenient way of embedding existing entities using Entity Blocks;

Cons:

  • as the website grows (new entity types and embeddable elements), the loading time of all available elements increases drastically;
  • given that the module is UI-focused, adding new layouts could be more intuitive – currently we need to create .yml files and templates using code;
  • with a large number of elements in the layout, dragging elements between sections becomes a bit difficult;
  • difficult access to sections in twig, names are suffixed with uuid, which makes it difficult to render a selected section.

Summary

Layout Builder brings many interesting possibilities in terms of layout management, using both user interface and code. Is it going to replace all existing solutions?
In my opinion, it is a perfect tool that solves the problem of layouts on a macro scale. Creating closed components using popular modules such as paragraphs, field group, and then building ready – made layouts made up of these components using Layout Builder seems like a perfect solution.
Like each and any module, Layout Builder has its own specific use – so, as always, it’s going to do better in solving some problems, and in case of other challenges it’s going to fare much worse. Just see it for yourself!

 

Need a team of Drupal and PHP web development experts?

Contact us now!