Improved UX in Drupal with Layout Paragraphs
Improve the Drupal Layout Builder with Layout Paragraphs
Whenever it comes to layouts in Drupal, the so-called Layout Discovery plays a role, which was introduced in Drupal 8.3 (experimental) and - even more exciting - the Layout Builder, which was introduced as an experimental module in Drupal 8.5. However, this blog article deals with a relatively new competitor: Layout Paragraphs...
The Layout Paragraphs module combines the power of Layout Discovery, a mechanism for using layouts (via drag & drop interface) and the fabulous Paragraphs module. This combination can (and indeed should) be seen as a perfect complement to the Layout Builder in Core.
The Layout Builder makes it possible to arrange the fields of a content type in a specific layout. In addition, other things such as blocks, views or freely designed, handmade (html) content can also be added. However, the main focus is on the distribution of these (atomic) fields of a content on a layout:
Layout Paragraphs: Layouts with Content Components
Layout Paragraphs can overcome the shortcomings of older Drupal mechanisms that were traditionally used to create more complex layouts. Just to name a few: Blocks, display suite, panels or even preprocessing hooks along with custom templates - depending on the task, one of them or a combination of different mechanisms was necessary in the process.
The problem with this approach is that a user without very specialized skills has no way of creating, for example, an ad-hoc landing page with freely designed content and a somewhat unusual layout that differs from the usual display of existing content types. Of course, this always leads to frustration among editors, and this question has probably been asked thousands of times: "Why can't we do this on the fly on our own without developers having to be involved?"
So what is the new Layout Paragraphs module now available for Drupal? First of all, the Layout Paragraphs module creates an unprecedented user experience in terms of simplicity, joy of use and flexibility in layouts and has a successful and intuitive drag & drop interface. On the other hand, it allows website developers to ensure design consistency, as the building blocks (i.e. groupings of fields) that can be moved around the available layouts can be perfectly defined and validated using paragraphs.
Content Components
We call these groupings of fields Content Components - in the naming convention used in Atomic Design, these would typically be organisms. They are prefabricated, meaningful content components that serve a specific purpose. Paragraphs is very well suited to defining such a system of content components. And this is crucial for our projects, as we don't usually want users to struggle with questions like:
- "Do I have to use a heading here?"
- "Should the introductory text use a larger font and be displayed as lead text?"
- "Would I use a call to action button here or rather a text link?"
... and so on. Instead of giving users complete freedom in every context and overwhelming them with all these questions and decisions, they can be guided by an exemplary content component.
Conclusion
Both Layout Builder and Layout Paragraphs attempt to achieve the creation of complex layouts in a far more convenient and intuitive way than has ever been possible with Drupal before. And both achieve this goal, although the choice of one or the other should be determined by the type of content to be edited.
For example: on a product page with many fields containing product data such as height, width, weight, color, etc., the Layout Builder would be a good choice as it is made for visually managing all these fields of a content type. In cases where the actual content does not consist of strictly defined fields, but of arbitrary sequences of optional content components (such as a magazine page), it is best to choose Paragraphs in conjunction with the new Layout Paragraphs module. Either way, both deliver a user experience that goes far beyond the familiar content editing form.