Drupal 8 Paragraphs + Layout Discovery

I recently wrote an article about Flexible Authoring with Structured Content. In this follow-up post, I'm going to dig into more detail on one specific approach we've been working on: Entity Reference with Layout. If you use the Paragraphs module and wish there was a way to more easily control the layout of referenced paragraphs on a particular node, check out Entity Reference with Layout, a new module for Drupal 8. Entity Reference with Layout combines structured content (a la Paragraphs) with expressive layout control (a la Layout Discovery in core). Now you can quickly add new sections without leaving the content edit screen, choose from available layouts, add text or media to specific regions, drag them around, edit them, delete them, add more, and so on. The experience is easy-to-use, fast, and expressive.

Background

Structured Content FTW. We’ve been working with Drupal for a very long time: since version 4.7, way back in 2006. We love the way Drupal handles structured content – something that has only improved over the years with support for important concepts like “fieldable entities” and “entity references.” Integration with flexible rendering systems like Views, and in more recent years the ability to quickly expose content to services for headless, decoupled applications, relies largely on structured content. With structured content, editors can “Create Once, Publish Everywhere (COPE),” a widely-recognized need for modern web authoring. Drupal’s support for structured content is an important advantage.

Drupal, We Have a Problem.

But Drupal’s interface for creating structured content– the part that editors use daily, often many times per day – is lagging. In the era of SquareSpace, WIX, and Gutenberg, Drupal’s clunky authoring interface leaves much to be desired and is quickly becoming a disadvantage.

Complex form for adding different types of content called paragraphs

Paragraphs to the Rescue. Sort Of.

There have been a number of really interesting steps forward for Drupal’s authoring interface as of late. Layout Builder is powerful and flexible and soon to be a full-fledged part of Drupal core. Gutenberg, an expressive authoring experience first developed for Wordpress, now offers a Drupal version. The Paragraphs module solves similar problems, providing a way for authors to create structured content that is incredibly flexible. We started using Paragraphs years ago, soon after it was first introduced in Drupal 7. We liked the way it combined structure (Paragraphs are fieldable entities) with flexibility (Paragraphs can be dragged up and down and reordered). We used nested Paragraphs to give authors more control over layout. The approach was promising; it seemed flexible, powerful, and easy-to-use. For more complex applications, though, nested Paragraphs proved anything but easy-to-use. They could be profoundly complicated. Managing intricate layouts with nested Paragraphs was downright difficult. If only there was a way to have it both ways: Drupal Paragraphs plus easy layout control. Well of course, now there is.

Introducing Entity Reference with Layout

We created Entity Reference with Layout to give authors an expressive environment for writing structured content. As the name suggests, Entity Reference with Layout is an entity reference field type that adds an important element to the equation: layout. It leverages the layout discovery system in Drupal Core, allowing editors to quickly add new paragraphs into specific regions. The authoring experience is expressive and easy, with drag-and-drop layout controls.

Give Entity Reference with Layout a Whirl

Entity Reference with Layout is available on Drupal.org. Installation is quick and easy (we recommend composer, but you can also just download the files). The module is experimental and still under active development; check it out and let us know what you think. We’d love to hear feedback, bug reports, or feature requests in the issue queue. And if you think your organization’s web editors might benefit from this approach and want to learn more, drop us a line and we’ll follow up!

Code Content Design Drupal 8 Drupal Planet

Read This Next