Layout Paragraphs

Layout Paragraphs provides an intuitive drag-and-drop experience for building flexible layouts with Paragraphs. The module was designed from the ground up with Paragraphs in mind, and works seamlessly with existing Paragraph reference fields.

Key Features

• Intuitive drag-and-drop interface.
• Works with existing Paragraph reference fields.
• Flexible configuration – site admins choose which Paragraphs to use as “layout sections,” and which layouts should be available for each.

How it Works

• Provides a new Field Widget and Field Formatter for paragraph reference fields.
• Leverages Drupal’s Layout API for building layouts.
• Uses the paragraphs behaviors API for storing layout data.

Part of the Mercury Editor™ ecosystem

Layout Paragraphs is a key component of the Mercury Editor ecosystem. Mercury Editor empowers content editors to create custom layouts in seconds with an easy-to-use Drupal page builder.

Getting Started

• Make sure the Paragraphs module is installed.
• Download and install Layout Paragraphs.
• Add a Paragraphs reference field to a content type.
• Choose “Layout Paragraphs” as the field widget type for the desired paragraph reference field under “Manage form display”.
• Choose “Layout Paragraphs” as the field formatter for the desired paragraph reference field under “Manage display”.
• To create layout sections, create a new Paragraph type to use for layout sections. Your new paragraph type can have whatever fields you wish, although no fields are required.
• Enable the “Layout Paragraphs” Paragraph behavior for your layout section Paragraph type, and select one or more layouts you wish to make available.
• That’s it. Start creating (or editing) content to see the module in action.

Layout Paragraphs vs Layout Builder

Layout Paragraphs provides an effortless drag-and-drop editing experience for writers, editors, and marketers. It has been designed from the ground up to meet the needs of people who work with content.

Key Differences between Layout Paragraphs and Layout Builder

• Layout Paragraphs works with Paragraphs, not Blocks.
• Layout Paragraphs is built on Drupal’s field system. Configuring Layout Paragraphs is as easy as configuring a Paragraphs reference field.
• Layout Paragraphs supports quickly toggling between different layouts within a given section.
• Layout Paragraphs supports nested layouts.
• Layout Paragraphs provides a “What You See Is What You Get” authoring experience, especially when coupled with Mercury Editor.
• Because Layout Paragraphs works with entity reference fields, it is flexible and offers a broad range of applications.
• Layout Paragraphs is by design simpler than Layout Builder, focused entirely on the content entry – or authoring – experience.

(Note that Layout Paragraphs is compatible with Layout Builder, meaning both can be installed and used on the same site.)

Note for Themers

Layout Paragraphs works as designed for unaltered Paragraph templates out-of-the-box. However: if you need to customize your paragraph templates, you must adhere to the following requirements for this module to work:

• Your customized paragraph templates must output the attributes variable in the main wrapper HTML attribute. (see paragraph.html.twig for an example).
• Section paragraphs must output content.regions to correctly render layouts (by default this is already output correctly, since the entire content variable is rendered).
• As of #3244654: Add controls and insert buttons using data attributes and Javascript instead of template variables, controls and insert buttons are inserted with Javascript. As long as your template outputs the attributes array correctly, you do not need to worry about outputting specific variables for controls to work.