Drupal Paragraphs: Not Your Basic Page

If you haven’t heard of Paragraphs, this module is an answer to many of the pain points associated with a typical WYSIWYG editor:

Common WYSIWYG Issues

  • Inability to add rich content (galleries, accordions, parallax backgrounds, etc…)
  • Faulty markup and/or undesirable inline styles
  • Client confusion
  • and in general, pages that just look… well, blah. More often than not, you know a WYSIWYG page when you see one.

I’m also happy to report this module is not only available for Drupal 7, but at the time of this writing, also as an alpha release for Drupal 8 — and it works.

Why the Paragraphs module?

As a Drupal site builder, you can add an unlimited number of paragraph types to your project - each with its own set of fields and displays. Think of paragraph types as mini-content types which can then be created on nodes in whatever configuration you choose.

In many ways, Paragraphs offers similar functionality to the Field Collection module. There are some notable differences, but in my opinion, the biggest advantage of Paragraphs is the ability for a content editor to take total control over the flow of content. 

With Field Collections, a site builder creates a set of grouped fields and an editor can then add as many or as few of those collections to a node, one after another. To illustrate:

Drupal Field Captions

There could be one Field Collection of type A or fifty. The catch here is that they all must be of type A and you cannot insert any other type of content between them.

Oppositely, let’s consider three paragraph types: A, B, and C. An editor can use these three types together, in any assortment they choose, thereby creating a flow of content without restriction. For example:

Drupal Paragraphs

As cliché as it may sound, "the possibilites are endless."

Paragraphs in the Wild

I’ve used the Paragraphs module on two projects now: World Monuments Fund (Drupal 7) and Drupal.com (Drupal 8).

Drupal.com

On Drupal.com, we’re using Paragraphs on Feature pages, like the Easy Content Authoring and Content as a Service nodes. This allows content creators to add benefits directly to a Feature node rather than having to create them one-by-one and then add a manual reference to each corresponding entity.

Paragraphs on Drupal.com

World Monuments Fund

For the WMF project, we made heavy use of Paragraphs and are thrilled with the content continually being published using them.

Paragraph Types on WMF

  1. Accordion
  2. Call to Action Button
  3. Cards
  4. Full-width Image
  5. Image Slideshow
  6. One-Column WYSIWYG
  7. Photo Banner
  8. Section Title
  9. Site References
  10. Video
  11. Wow Text

Yes, there are 11 types in total, which admittedly, is ALOT. But have a look at a few of the Basic Pages our client created: Friends of WMF, Moai Circle, Adopt. I repeat, those are Basic Pages. They’re both robust and beautiful:

Paragraphs on WMF

Paragraphs on WMF

Ideas for Improvement

Overwhelmingly, I am excited about the future of this module and its impact on Drupal as a content management system. In my experience, however, I’ve noticed a few areas with room for improvement.

Fieldsets

Currently, when you add a new Paragraph to your node, its fields are printed to the form as a table with draggable rows. This works fine… until you have a page with a large number of paragraphs on it, each with their own set of fields. Dragging the rows around using the tabledrag-handle becomes burdensome and in some cases, outright frustrating due to the long vertical length of the edit form.

While you can control the weight via either the drag-and-drop functionality or through manual, numeric settings, both solutions are currently less than ideal for a node with many Paragraphs.

Have a look at the unweildy form below:

Draggability

I don't care how big your screen is, try drag-and-dropping the rows on that page.^^

It would be stronger, administratively, to add each Paragraph into a collapsible and draggable Fieldset. This solution would reduce the length of the form and consequently make the drag-and-drop functionality perform better.

Panels Integration

Another thing I’d be interested in seeing arise from Paragraphs is an ability to play nicely with Panels. There is currently no way to create a Paragraph as a new pane on a panel page. An issue is currently open on d.o discussing the path towards this functionality.

As a workaround, you can create a node with a Paragraph, rabbit hole it, and then add that node as a pane to the panel page. It’s not the most intuitive solution, but it gets the job done until an integration is developed.

-----
If you haven’t given Paragraphs a try yet, I encourage you to do so. Find us on Twitter if you feel like learning more!

Tags: