Drupal Module

Enhance Drupal Layout Builder with Layout Paragraphs

Whenever we think of layouts in Drupal, it is the layout discovery mechanism introduced in Drupal 8.3 (experimental) and – even more exciting – the layout builder module which was introduced as an experimental module in Drupal 8.5. This blog article, however, deals with a relatively new competitor: layout paragraphs.

The layout paragraphs module combines the strength of the layout discovery, a mechanism to use layouts with a very nice drag & drop ui and the fabulous paragraphs module together. Those combined can (or really should) be seen as perfectly complementing the layout builder in core.

The layout builder allows you to arrange the fields of a content type in a specific layout. Besides that, you can also add other things like blocks, views or free form, handcrafted (html) content. But the main focus lies on distributing these atomic fields of a node to the layout:

Layout paragraphs: using content components with layouts

Layout paragraphs can possibly overcome the shortcomings of previous drupal mechanisms that were traditionally used to generate more complex layouts. Just to recall some of them: blocks, display suite, panels or even preprocessing hooks together with custom template files - depending on the specific task, one of them or a combination of different mechanisms did the job.

The problem with this approach is: there is no way for a user without very special skills to create e.g. an ad hoc landing page with free form content and a somewhat fancy layout that differs from the usual presentation of existing content types. Clearly, this led to frustration among editors and this question might have come up thousands of times: "Why can't we do this quickly on our own without having developers involved?"

So what exactly is so exciting about the new layout paragraphs mechanism now available to Drupal? First of all: the layout paragraphs module establishes a great user experience in terms of simplicity, joy of use and flexibility regarding the layout part and the nice and intuitive drag & drop interface. On the other hand, it allows themers and site builders to enforce design consistency as the building blocks (i.e. groupings of fields) that may be moved around in the available layouts can be perfectly defined and validated by means of paragraphs.

Content components

We call these groupings of fields content components - in terms of atomic design, these would typically be organisms. They are pre-built, meaningful content chunks that serve a specific purpose. The paragraphs module is very well suited to achieve such a system of content components. It is crucial for our projects as we typically don't wan't the users to be bothered with questions like:

• "Do I have to use a headline here?"
• "Should the intro text use a larger font and be displayed as a lead paragraph?"
• "Would I use a call to action button here or rather a text link?"

... and so on. Instead of leaving users total freedom in every context and hereby overburdening them with all these questions and decisions, they should be guided by an exemplary content component.

Conclusion

Both the layout builder and the layout paragraphs modules seek to simplify the task of creating complex layouts in a far more convenient and intuitive manner than it was ever before possible with Drupal. And both of them reach this goal, where however the choice of either should be driven by the type of content that is to be edited.

For example: on a product page with many fields containing product data like height, width, weight, color etc., layout builder would be good choice because it is made to work with all these fields of a content type. In cases where the actual content is not made up of strictly defined fields and cannot be foreseen (like a magazine page), you would do best to choose paragraphs in conjunction with the new layout paragraphs module. Either way - both of them deliver a user experience that is far beyond the old node edit form.

Links:

Paragraphs module
Layout Paragraphs module
Deutsche Fassung dieses Artikels
Presentation at the Drupal Meetup Germany, Aug 2020