Layout Builder is a Drupal module that makes working with content easy

The advantages of Drupal CMS always include its friendliness to users who cannot write code. In most cases, these users are content managers. This is only natural: if you want to be seen in the market, lower the entry barrier. However, competitors such as Tilda and WordPress lowered it earlier.

From the day it launched, Tilda positioned itself as a platform where you could create websites with tons of pre-built layouts, drag and drop elements around the screen and arrange them however you like, and the result would still be great — just like the work of a professional web designer.

In 2018, WordPress, for its part, added the Gutenberg plugin to its core, which allowed you to edit the website using the modular approach: you could arrange content blocks, the header, the footer, and widgets in any order.

Tilda and Gutenberg do not require writing code. So, when it came to Drupal, the community suggested the Layout Builder module. In this post, we will discuss its working principles, peculiarities, and installation process.

Layout Builder glossary

In this section, we will give definitions to the terms related to creating a Drupal website with the help of the Layout Builder. We will also need these terms for our next post, where we will explain how to build pages using the Layout Builder. 

1. A Drupal section is a page area with a structure composed using one of the layouts (see next point). In Drupal, you can add sections before or after other sections and change their order. 

2. A Drupal layout, also known as a Drupal template, is a model that dictates how the content will be arranged in the section. Layouts can be accessed and added to the page using the Add Section function. You can choose from Drupal’s four default layouts: one-, two-, three- or four-column layout, or create your own. The layout consists of blocks.  

3. A Drupal block is an area within the layout intended for different content entities: headers, descriptions, images, users, etc. In Drupal, you can drag and drop blocks within the layout and between sections.

Is it a layout or a template?

When Drupal developers talk to each other, they use different terms but still understand each other. However, these notions are not identical because within a Drupal theme there are twig files that store HTML code, and these very files are called templates. But when we talk about development using the Layout Builder, we say “layout”.

4. A Drupal object, or Drupal entity, is a PHP object that reflects the data retrieved from a repository (database or file). This can be data on the page, post, case (the Node entity); user’s name, e-mail, password (the User entity); images, pdf documents (the File entity).

5. A Drupal content entity is anything a site user sees and interacts with, from pages to comment fields. The blocks within the sections are filled with these entities.
6. Drupal content types include any static content that can be grouped by an attribute, for instance, according to page types: posts, products, news, sellers. Each content type contains a specific set of fields.
7. A Drupal field is a place in the database reserved for specific information. When you add a field in Drupal, you need to specify the type of content you want to add (text, link, image, etc.).
8. A Drupal node is any representative of a content type. For example, a page of any content type is considered a node in Drupal.

What is the Layout Builder?

The Layout Builder is a module that combines drag-and-drop and WYSIWYG principles: interface elements can be freely arranged on the page and you can see the result of your actions immediately. You get a finished page structure, but in most cases without CSS, which you have to write separately. The module first appeared in Drupal 8.5 as an experiment and became stable by May 2019 when version 8.7 was released. Today, the Layout Builder is part of the Drupal core. 

The module allows you to use one of the four ready-made layouts or to add and customize your layouts for a more original result. A page can consist of several sections, each built with its own layout. Layouts consist of blocks, and each block consists of content entities, such as the author name, publication date, buttons, comment section, data fields, and so on. Paragraphs are not content entities, although entities can refer to paragraphs. The Layout Builder does not allow you to add paragraphs to sections right out of the box, but the Drupal community has already come up with modules that allow you to do this by wrapping paragraphs in blocks.

Is the developer really no longer necessary?

It is important to note that a content manager simply fills the ready-made structure with content. But it’s better to rely on professionals to create this structure. A back-end developer will add fields, arrange content types, views, and other components used to build a page, while a front-end developer will style the structure according to the design. Therefore, it is too early to compare the Layout Builder to Tilda.

How did the Layout Builder come about?

The admin panel of a Drupal site has a Structure tab. This tab will take you to the Block Layout section, which is a part of the Blocks module. This is where the developer defines the page areas where specific blocks will be displayed. A reusable structure is created in the Custom Block Library.

Sometime later, the Paragraphs module appeared. It is not included in the Drupal core, doesn’t support the drag-and-drop principle, and requires full developer involvement.

The Views module is used to display dynamic content requested from the database. You can use this module to create a page, but only with a simple predefined structure.

It is safe to say that these modules are the basis of the classic approach to developing Drupal sites. However, the standard set of their functions is not always sufficient to make the page look as the web studio client requires, so developers had to write custom code.

The Layout Builder has incorporated the best practices of working with classic modules. It allows you to structure all necessary types of content and gather all display settings in one place, so there would be no heaps of custom code under the hood of a complex website waiting for tedious optimization and code review.

Layout Builder features and benefits

• Full customization of your content design, structure, and layout.
• Drag-and-drop and WYSIWYG principles. Not only the blocks but also the fields of content types can be dragged.
• Flexibility in creating customized pages.
• Saving and using created Drupal layouts on all pages of an individual content type.
• Layout configuration for different cases.
• Creation of layouts for different types of content on the site, as well as for content with special designs. For example, this feature is indispensable when the owners of online stores want to highlight one or more of their products among others.
• Modules included in the Layout Builder are easy to launch and do not require a new type of entity for launching.
• The Layout Builder interface and the markup it creates meet level AA of the WCAG and ATAG accessibility standards.

Does the future lie with the Layout Builder?

It’s not that Drupal’s Layout Builder has suddenly made the Paragraphs, Blocks, and Views obsolete. Of course, you still need them because the module extends but by no means replaces them. There are many opinions on the Layout Builder: some developers would have preferred to use it for everything on the website, while others say that it is more convenient for developers to use paragraphs. However, for content editors, the Layout Builder is a key to working quickly and independently.

An ADCI Solutions’ developer on working with the LB:

In one of our projects, we were asked to develop several blocks, each of a different type and structure: for example, an image on the left, text on the right and vice versa, or just text and just an image. All content managers had to do was choose from a list of pre-designed blocks, arrange them on a page, fill them with content, and it all looked great at once. We created a page for them that showed all the blocks, about 20 of them. That way, they could see how everything would look like. As far as I know, they filled a lot of pages in this way and no longer needed our constant participation. I think this approach is the thing of the future.

And if you ask me which websites the Layout Builder creates the best, you will not get a clear answer (unlike React.js, for example, which is ideal for high-load interactive applications). 

Conclusion: the use of the module depends on preferences and circumstances, but the overall regard for the Layout Builder is quite high.