When Drupal 8.6 introduced Layout Builder as a new foundation for page building, it started a cycle of innovation that now includes over 100 contributed modules that extend and improve the new page-building experience.

Six years later, work has begun to improve the base Layout Builder functionality by incorporating many features pioneered in the contributed module ecosystem. Watching the DrupalCon Lille 2023 presentation on the Layout Builder Initiative, you can see how the work is going.

You May Like

Interview

FLDC Featured Speaker Aubrey Sambor on CSS Color Innovations

Interview

FLDC Featured Speaker Aubrey Sambor on CSS Color Innovations

We are still a year away from incorporating this new work into Drupal Core. Moreover, the new Layout Builder functionality will not include all the innovations that have appeared in contributed modules. On top of all that, the changes that arrive in Drupal core may not suit your use case exactly—so let's look at the options available in early 2024.

A Bit of History

Four contributed modules were most used in Drupal 7 when laying out pages: Panels/Panelizer, Context, Display Suite, and Paragraphs. Developers tended to pick the mechanism they liked best and stayed with it. Each option has its advantages and each has a version for Drupal 10 and above.

However, since none of these modules builds upon Layout Builder, and the community's focus tends toward Layout Builder options, most upgrades from Drupal 7 move away from the first three options. 

The one exception is the Paragraphs module, which gained significant functionality while being developed for Drupal 7. Many developers still prefer it in their Drupal 10+ builds. Additionally, it helps that it's possible to use Paragraphs and Layout Builder on the same site by focusing Paragraphs on content-editor tasks and Layout Builder on page-builder tasks.

In part 1 of this four-part series, since it is so popular and capable, we'll look at the page-building options that revolve around Paragraphs.

In part 2 of the series, we'll look at contributed modules that work with Layout Builder.

In part 3 of the series, we'll examine contributed modules that don't work with either Paragraphs or Layout Builder.

In the final part, we'll look at distributions that may work with any of the above technologies. Distributions can supercharge your next build because the many modules they contain are pre-configured and ready to use. Be sure the distribution you select has the commitment of a solid organization behind it.

You May Like

Article

Inspiring Inclusion: Celebrating the Women in Drupal | #2

Article

Inspiring Inclusion: Celebrating the Women in Drupal | #2

After you've read all the parts of the series and before you choose any solution, I recommend watching my two-part series, Layout Builder Components Can Break Your Site, Part 1 and Part 2. The principles explained in the videos apply to many solutions examined in the series.

Part 1 — Paragraphs-based Solutions

Originally, the Paragraphs module was designed to help with content layout in the center of the page, i.e., everything between the header and footer. However, because of its great flexibility, many developers use it to lay out the entire page—including the header and the footer. Arguably, this is a misuse of the intention of Paragraphs. However, it's hard to fault them since Paragraphs was developed in Drupal 7 when Layout Builder wasn't yet available. That said, since Layout Builder has caught up in functionality, if you are going to use Paragraphs, it's best to use it for content-area layout rather than the whole page.

Paragraphs

With almost a quarter million installations, the Paragraphs module is clearly a favorite for laying out content. Once the module is enabled, the developer assigns a field to be controlled by Paragraphs. A content manager then adds paragraph after paragraph, laying out text, images, slideshows, and more. It's even possible to create nested paragraphs and templates that can be used on multiple pages.

The Paragraphs Demo module includes some basic paragraph types that can be used directly or referenced as examples for building custom paragraph styles. 

By default, Paragraphs is not designed to be WYSIWYG; use the Layout Paragraphs module (described below) to get closer to that functionality.

Layout Paragraphs

Layout Paragraphs provides a WYSIWYG interface to Paragraphs. The image below shows how Paragraphs normally look on the left and how they look with Layout Paragraphs installed on the right.

Layout Paragraphs obtains its layouts from the Drupal Layout API. Thus, you can use layouts provided by any module that includes Layout API layouts—even if they aren't designed for Paragraphs.

Mercury Editor

Mercury Editor is a new tool whose makers aim for a stable release in early 2024. With its emphasis on refining the content-editor experience using paragraphs, Mercury Editor adds an off-canvas tray on the right side of the screen and a live preview with inline editing on the left. It also includes switching between mobile and desktop views to assess changes rapidly. It also comes with fine-grained permissions to help ensure the content editor doesn't break editorial guidelines.

Mercury Editor uninstalls cleanly and makes no changes to the page layout (which is fundamentally controlled by Layout Paragraphs running atop Paragraphs).

Developers who love Paragraphs should definitely investigate the extra refinements provided by Mercury Editor.

Paragraph Blocks

Paragraph Blocks adds a twist to integrating Paragraph and Layout Builder by allowing each value in a multi-value Paragraph field to be in a different block within a Layout Builder page. If that sounds a little confusing, watch Drupal Paragraph Blocks Demo.

If you already have paragraphs that have been formatted, using Paragraph Blocks is a fast way to reuse them within Layout Builder.

Some people have reported performance issues integrating Paragraphs and Layout Builder, so be sure to test the most complicated layout you can expect to have.

Conclusion

Paragraphs is a popular, capable module best suited for content editors. However, though Paragraphs had a head start (work on it began in 2013), Layout Builder has caught up, and the community's energy is increasingly moving to it. We'll look at Layout Builder next.