Layout Builder vs Layout Paragraphs

Layout Builder is a module added to the Drupal core. It allows content managers and developers to easily create visual layouts and design the content using the drag-and-drop function. With the Layout Builder, the users can set up a single page mockup, create a unified design for similar content, or develop landing pages.

There is a lot of documentation about the Layout Builder on drupal.org, which can not please developers.

As I have said earlier, the Layout Builder module is already added to the core (starting from version 8.5), so all you need is to activate the Layout Builder and Layout Discovery modules.

Let’s analyze the use of the Layout Builder through the example of the Basic Page content type.

On the display control page (/admin/structure/types/manage/page/display), click the checkbox next to Use Layout Builder and save the changes. This will allow you to create a layout for every node of such a content type. When clicking on the checkbox next to Allow each content item to have its layout customized, it allows editing the layout for every node separately and not the whole content type simultaneously.

After the changes are saved, you can see that the field display settings are disappeared, and the additional button Manage layout is now visible.

When clicking the Manage layout button, you are redirected to the page for managing the display of layout fields (/admin/structure/types/manage/page/display/default/layout) instead of the well-known interface of Manage display.

You can easily control the display of the fields, change their order, and create new ones on this page.

Besides the fields, you can also add/edit the blocks.

As it was mentioned before, the Layout Builder can be used individually for every node when clicking on the checkbox next to Allow each content item to have its layout customized.

According to the module's description, Layout Paragraphs provides a user-friendly interface, including the drag-and-drop option to create flexible layouts with paragraphs, which will help control the page content easily. Layout Paragraphs is a field widget that works like every other Drupal field.

I would say the Layout Paragraphs is a more flexible way to control paragraphs, especially if one needs to develop a page with a complex layout. You can apply multiple layouts and place the information as you wish within one content type, whether a block or a node.

Both modules, the Layout Builder and Layout Paragraphs use Layout API, which means you can actually use both modules on one website. Layout API allows describing the way the components are placed on different levels - for the whole page, from header to footer, separately for the body of the page, and for individual components as a whole.

1. Make sure the module Paragraphs is installed.
2. Download and install the Layout Paragraphs.
3. Create a new paragraph type (Admin > Structure > Paragraphs types) to use it for the layout’s items. Your new paragraph type may have various fields. However, no field is strictly required for the module to function.
4. Choose a mode of the paragraph «Layout Paragraphs» according to your layout design and pick one or several mockups you wish to make available.
5. Make sure the new paragraph type for a layout is selected in the «Reference Type» section of the content type reference field on the edit screen; click «Edit» in front of the corresponding field on the «Manage fields» tab.
6. Select «Layout Paragraphs» as a field widget for the required paragraph link field in the «Manage form display”.
7. Choose «Layout Paragraphs» as a format tool for the required paragraph reference field in the «Manage display».
8. That’s it. It’s time to create (or edit) your content to see how the module works.

Besides, you can create and use your layouts in Layout Paragraphs, which is highly convenient for content management. You can find more information on how to develop personal mockups at https://www.drupal.org/docs/drupal-apis/layout-api/how-to-register-layouts.

Using the example of an already created test node, let's consider using the Layout Paragraphs module.

1. Click the «+» in the «Paragraph» field and select «Layout».

2. Next, we need to choose the desired layout and save the changes. For instance, let’s select «Two columns».

3. And here we go. After that, you can add any content to the selected layout or just use the drag-and-drop feature.

The amount of added layouts on one page can be countless.

Both modules are used to manage the content on your Drupal website more conveniently and flexibly. I believe the Layout Builder should be used for more commonly used solutions across all content types; however, the Layout Paragraphs is better suited in flexible cases with one separate node. Such an approach allows you to use different layouts on multiple pages with the same content type. By the way, the Layout Paragraphs interface is entirely user-friendly, which is a huge advantage.

Though the Layout Paragraphs mod is still o the Beta stage, the approach and the overall idea look highly promising.