This article is part of a series on auditing a Drupal layout builder based website, and in particular building components for it. You can check out the full series by using the navigation in the sidebar.
However, to make this article somewhat standalone, I summarize how I arrive to this point below.
The Logic behind moving away from the Node Edit Form
During the audit process, I realised that it is possible to build the same components in multiple ways. And that attaching paragraphs types to the node edit form may not be the best solution for using paragraph types as components in a landing page builder content type. The basic reason is it adds confusion to the user experience, why have 3 places to create component instances when you can have two? Why create components on the node edit page/form when you can create the same component instances directly on the layout tab?
In this article, I discuss a better solution for this particular site set up. Please note, however, that using the node edit form to create component instances is a valid way, and in some circumstances it is a good way. I will discuss this in the conclusion for the series.
Using Paragraphs for Components
To create components to use in Drupal Layout Builder, the Paragraphs module is a great tool.
If you have been using Drupal from before the introduction of Layout Builder, you possibly used the Paragraph module to add paragraphs, reusable structured data, to a page. And then once Layout Builder was released, you used the Paragraphs Blocks Module to convert your paragraphs to blocks to use in Layout Builder.
This approach was a logical progression and it works well. However, through writing this article on building components for Drupal, and specially for a Layout Builder site, I discovered that attaching paragraphs directly to block types allows for what I feel is a better overall user experience.
Attaching Paragraph Types to Block Types
As already mentioned, I have now moved away from using the node edit form as a way to create components instances. And how it is possible to add paragraphs to custom block types using a reference field or by using the Paragraph Block module.
I have documented this in the below table. The table shows how I have moved all the components built using paragraphs attached to the node edit form to be custom blocks.
This greatly enhances the user experience; you now only have two ways to create instances. They are either:
- Reusable custom blocks types: create and edit on the custom block page.
- Non-reusable inline (custom) blocks: create and edit on the layout edit form.
Please note:
- This is only for this particular site set up. I cover in the series summary some use cases where using the node edit from might be a good solution.
- If you are using the Layout Builder Restrictions module, which you should, you will need to allow them to be used as either custom block types or Inline blocks.
The revised components table is below, for the original tables please see the build section; Build: Types of Components and How they are Built.
Extra notes:
- If a component type was only available on the node edit form, it is mark with a red cross ❌ in the custom block.
- All PN marked component types from the build section are moved to custom blocks. If you want a detailed process for using paragraphs in custom blocks, please read: Using Paragraphs in Custom Block Types to Use in Layout Builder.
| Custom Block | Paragraph on node | |
|---|---|---|
| Numbers (Statistic Panel) | ❌✅ | ← PN |
| Formatted Text (Choose Format) | ✅ (B) | ← PN |
| Hero | ❌✅ | ← PN |
| Map | ❌✅ | ← PN |
| Slider (Gallery) | ❌✅ | ← PN |
| Reviews | ❌✅ | ← PN |
| Content Highlight/ Recommendations List | ✅ (PB) | ← PN |
| Heading | ✅ | — |
| Form-based components | ||
| Booking form | ✅ (B)(PB) | ← PN |
| Booking form with Image | ❌✅ (P) | ← PN |
| Views-based Component — Lists (view) | Dynamic Block | |
| Team Component | ✅ | — |
| Articles/blog component (frontpage Content Block) | ✅ | — |
Summary
In this article, we first revisited the idea of how you can do things in many ways. In particular how it is possible to build the exact same component types for Drupal Layout Builder pages using paragraphs by attaching them to content types (the node edit form) or to custom block types.
We then looked again at how using the Paragraphs Module to build structure component types is a great way to building smart component types, and how we may have arrived at using them on the node edit form.
Finally, I visually document the move to show how we can easily create the exact same paragraph type components as custom block types, and provided a link to an article on how to create paragraphs-based custom block type components.
This I feel wraps up this audit process well, and creates what I feel is a much better user experience.
To learn how to build easy to use (for content editors) and beautiful front-ends using technologies such as Drupal, sign up below for my weekly newsletter. Thanks for reading and see you in the conclusion, following the link below. (Coming soon).
You have reach the end thus far. This article series is currently in final draft and will be published over the coming weeks. It consist of four more parts, to be notified when they are published, be sure to sign up below for the web development and design newsletter.