Paragraphs widget

About a year ago, Chris pointed the dev team toward a cool new module called Paragraphs. Since then, we've played with it on test sites, rolled it for use on sites for clients (including some big ones!), and tried combinations of bundles and fields that push the limits.

Here are some of the cool things we've done with Paragraphs:

Made a feature

It's a standard features module

Part of our slick workflow of near-instant enterprise-grade local dev sites/repos using comproinstallprofile and compro_utils is making Features for the functionality we use on multiple client sites. This allows us to develop sites quickly, and gives us standardization.

Installing compro_paragraphs makes sure:

  • Paragraphs, Media, and a few other modules are ready to go
  • Bundles for long text, blockquotes, headings, and image/video get created
  • Templates and styles abide by reasonable defaults

The feature depends on compro_content, which makes available input formats, WYSIWYG settings, image formats, etc.

Integrated it with fanciness

New features, like compro_highlight, include paragraph bundles (albeit without a strict dependency). This gives developers an easy implementation, regardless of whether the site they're working on uses paragraphs.

One thing that's cool about comprohighlight is that the single entity (a hero or call to action) and collection of entities (slideshow, gallery, etc.) are of the same type, so a bundle with an entityreference field (and inlineentity_form) can handle a ton of different configurations; especially when used in conjunction with entity view modes!

If a site needs regular content, along with the ability to insert slideshows and calls to action throughout the body, additional features like compro_highlight and its built-in paragraphs support are a great answer.

Extended the formatter

All the tweaks below are part of paragraphs_formatters module.

Flexible formatter

Let's say you wanted the teasers in the blog listing to only show text. Or maybe you want blockquotes to appear as "pull quotes" in the sidebar.

Our extended formatter lets you pick which bundles to show, how many, and can start from a delta other than zero. It makes a view-mode-centric dev workflow just that much easier!

Tweaked the widget

Good drag/drop visuals

One of the reasons Jeff Eaton gave for why Paragraphs isn't his choice for the body field is that the UI is a bit more cumbersome. The field widget we've got isn't a knock-out-of-the-park, but it shows that there's plenty of room to make paragraphs-based content entry more intuitive.

It's mostly CSS, aside from changing the weight of some buttons!

Made them reusable

Better entity labels

By default, the title of all paragraphs is "Paragraphs item". We made a little callback that give more information about the paragraph, making it possible to use paragraphs in entityreference fields.

If you wanted to write something once but display it in a bunch of places, this little label callback could be key! You could even do it in a paragraphs bundle.

Oh! And if you find yourself writing tons of label callbacks, give label_maker a shot.

Other stuff!

We've done many variations of paragraph bundles:

  • Block reference bundles
  • Classing link fields for button/CTA bundles
  • Classing text bundles to display all fancy

What's next

There's a lot more cool stuff to do:

  • Start playing with Drupal 8 and paragraphs
  • Refine the field widget
  • Dream up more formatters
  • Enhance token and views support
  • Hotkeys for widget UI?
  • Ability to insert interstitials?

We're looking forward to seeing what the Drupal community does with paragraphs, and are excited to contribute in any way we can.

Drupal Security Guide free download