Drupal and Pretty Paragraphs: Create Better Content with Layout Paragraphs

What are layout paragraphs?

According to their project page, Layout paragraphs offers an intuitive drag-and-drop experience for creating flexible layouts with paragraphs. Paragraphs are the preferred method for dealing with complex problems content structures inside Drupal, and Layout paragraphs are for tackling complex problems layout structures in these paragraphs.

Layout paragraphs are meant to help separate the content and structural needs of site builders and content editors. The concept of layout paragraphs is not really a new idea. It builds on a long history of layout systems, including panels, display suite, blocks, and panelizer, but uses more core APIs like Entity API and Layout authoring API.

When using paragraphs in the past, additional paragraphs or multiple versions of the same paragraphs were required in order to provide different layouts and styles to content creators. With a very simple editing experience, it can be very difficult for content creators to get an idea of ​​how their page looks on the front-end. Layout paragraphs are there to help simplify the necessary content paragraphs and give a better idea of ​​what the page will look like when editing.

With a little practice and refinement of the steps below, it’s possible to create and reproduce a powerful layout and content system that your clients will love to use. So let’s go.

Setup steps

  1. Install modules and themes.
    • Modules required:
    • Optional:
      • Gin (Recommended admin theme. Claro and a few others work well too.)
      • gin_toolbar (recommended if you are using gin for your admin theme.)
  2. Configure the main settings for layouts and paragraphs.
    • Visit the “Layout Paragraph Labels” settings page – admin/config/content/layout_paragraphs/labels.
      • To select Show paragraph labels.
      • Deselect Show layout labels (I find this unnecessary, if the layouts are easily distinguishable from each other).
  3. Configure a paragraph to use as a layout source.

    This is known as a layout paragraph.

    • To call Layout (or whatever helps you know this is layout related) You can have multiple paragraphs that handle layouts (like one for large, complex layouts and one for simple one-to-one layouts) inside a layout), but it’s best to keep it simple.
    • In Behaviors, set to Layout paragraph.
    • Select the layouts you want to make available. You’ll have to come back to it as you create/update/delete layouts
      • Basic default layouts are available.
      • Easily create custom layouts using the basic layout API.
    • No other fields are required in this paragraph, and nothing is needed in the form display or display settings.
      • Text fields for headers and select fields with options for defining classes are things you can try to work with here, but no other fields are really needed.
  4. Configure certain paragraph types that will be used in layouts.

    These are known as content paragraphs. This part is up to you and your needs for the site.

    • A good recommendation for content paragraphs are just simple paragraphs. Here are some examples :
      • One with just a WYSIWYG body field.
      • One with an unlimited link field.
      • One for with unlimited media scope to post single images or multiple image slideshows.
  5. Configure a layout field to a content type of your choice.

    For that, I prefer to keep it simple. I’ll just have the title field, layout/content field, then rename the body field to something like “teaser/summary” and configure it to only be used in teasers and meta tag descriptions.

    • Create a field of paragraph type. I usually call him field_content of field_paragraphs.
      • Set field parameters to Unlimited.
      • Include/exclude the paragraphs you want available in your layouts. This is something you will probably need to come back to when adding new paragraph types to the site.
      • Must include the paragraph that acts as the layout paragraph.
    • Define the display of the form.
      • Set widget to Layout Paragraphs.
      • Set display mode to Preview.
      • Together 0 nesting depth (Prevent layouts within layouts. I like to keep it simple, but it will depend on your needs and desired user experience.).
      • Together require paragraphs to be added inside a layout (a layout must first be chosen before a content paragraph can be defined).
    • Adjust the display.
      • Set the label to Hidden.
      • Format for Layout paragraphs.
      • Set render as Default.
  6. Place elements in your new layouts.

    • Create a new content type page with your layout field.
    • When you hover over the field, a add the icon will appear. Click on it and you can add a paragraph type layout.
    • When you add a layout, a modal window will appear where you can set the layout as well as all the other options available (this is based on the contribution you have installed or if you have fields on your layout paragraphs).
    • Select a layout style, like One Column, and select I accept.
    • You will see a “block” representing your new layout. Hover over and you will see a add The icon appears at the top and bottom of the area.
    • Click on one of these icons and you will be given the option to set one of the content paragraphs you have made available.
    • Paragraph fields will display in a pop-up window. Add your content accordingly and press accept.
    • Repeat with a few more paragraphs of content.
    • Make sure to add the node title and hit save.
    • Review your new node. Things may seem slightly off (or wildly off). It’s based on how CSS works in your theme. But rest assured, all the pieces of the puzzle are in place for you to work your magic.

You can change the layout and move the content.

Conclusion

Many of these steps are customizable to suit your Drupal development needs and skills. I used select fields and display mode select fields inside layout paragraphs and content paragraphs to allow content creators to get creative and apply different styles predefined. I played around with preprocessing, twig models, and extra fields to create complex displays, but always allowed for a simple UI. The possibilities depend on you.