How to improve the ergonomics of the Paragraph module in the back office?

The Drupal Paragraph Module

The paragraph module is a module that allows you to make groups of repeatable Drupal fields. Imagine that we want to create slides with an image, a caption and a link. You can't easily do that natively with Drupal. With Paragraph, you simply have to create a “slide” type of paragraph in which you add our native Drupal fields: image, text and link.

We then add a paragraph field to our content type. The user can then add as many paragraphs as desired. Each paragraph becomes a slide. The ergonomics are the same as for Drupal fields, so the user can easily find their way around.

Ergonomics

The content editing form can contain many paragraphs which themselves contain several fields. This makes the edit form very long and difficult to read. The first solution to manage this problem is to set the display of paragraphs folded by default. We immediately have a much bigger overview to manage.

By default, this view displays the fields that are in the paragraph. This is mostly irrelevant to the user and confusing.

Solution: Enable preview mode and change edit mode

We activate the “preview” display in the display management of the form of the type of content that contains this paragraph. We also modify the modification mode which we set to "closed": the paragraph will therefore be folded by default.

Enable preview mode in paragraph type

You must then go to the management of the type of paragraph, tab "manage the display". Here, we have a custom display setting that is not activated by default: preview. Simply activate it and drag a text or image field depending on what you want.

Result

The result is much more ergonomic. In this example, only the image that is displayed on the front is displayed. The user can directly see which paragraph it is and can order them easily.