A Quick Way for Editing and Customizing a Drupal Paragraph

For laying out content on a website, Drupal standardly uses a single body field that takes advantage of the WYSIWYG capabilities and is available immediately after installation of the CKEditor. This solution is easy to use but not flexible enough to be suitable in every case. For more advanced layouts, we can use the functionality prepared by the community in the Paragraphs module.

Drupal paragraph - characteristics

Paragraphs in Drupal are a useful solution with many possibilities. Thanks to them, we aren’t dependent on one WYSIWYG field where we place all the images and videos one under another. Paragraphs can be considered as some kind of sections on a given page. Each of these sections can have different configuration options, affecting the paragraph's appearance and its performance. This may be, for example, a color scheme, the size of images or a completely different layout of fields. With just a few paragraphs added to a page, editing them becomes time-consuming because Drupal standard UI doesn't allow for responsive editing. Is there any way to improve the UX? The answer to this question is Droopler, a Drupal distribution for building websites that uses the Geysir and Field Group modules.

Editing paragraphs in Drupal

As I pointed out above, editing paragraphs in pure Drupal is a time-consuming task. Let us analyze an example:

On the given page, we see several paragraphs that have many configuration options. Here is the configuration form for one of them:

As we can see in this example, the configuration options aren’t grouped, although the structure of the paragraph allows for separating at least two sections. The Field Group module - described further on in this article - is responsible for this functionality.

We finished the presentation of the configuration options. Below you can see how the paragraph looks like on the frontend:

The standard editing path in Drupal firstly requires going to edit entities and then editing the selected paragraph. If a paragraph has references to other paragraphs in it, and our goal is to edit one of the referenced paragraphs, then the whole process starts to get complicated. Usually, the paragraphs aren’t very well described, and it’s easy to enter the edition of the wrong paragraph. After editing, you need to save the changes and then switch to the entity view to see if you are satisfied with the modifications. Note that each time the page must be reloaded, as we don’t see the changes "live". This makes the editing process time-consuming and not very pleasant. How does it look like in Droopler?

Editing a Drupal paragraph in Droopler

Droopler is an installation profile that allows you to create websites in Drupal in a very simple and fast way. It’s great for both building business web pages and microservices, and from version 2.2 also for online stores. Starting from this version, Droopler has an integration with the Commerce module.

The frontend of this installation profile is based on Bootstrap 4, so it isn’t complicated to make any modifications to the website’s appearance. Droopler also uses Geysir and Field Group modules, which will help us improve and speed up paragraph editing.

In Droopler, there is no reason why we would want to go into editing an entire entity if we only want to make a change to a paragraph. We use the Geysir module to make changes to a paragraph, which we can launch by clicking on the Paragraph overlay button at the top right of the screen.

After entering the paragraph edit mode, point the cursor to the paragraph you are interested in and click on the edit button.

When clicked, you’ll see an overlay menu containing the same settings as in the standard view. However, this time they are grouped using the Field Group module.

Once you've made your changes, all you have to do is save them, and the page asynchronously reloads only the paragraph that was edited. This means that we just got rid of the need to reload the whole website, and we can see the changes almost immediately!

It’s worth noting that the paragraph presented in Droopler uses the Field Group module, which allows you to divide the fields available in an entity into tabs. They are configured in the edit options of the entity view form.

Among other options, we can choose here between horizontal and vertical tabs, close or open our selected tab when entering the edition, or add custom classes to sections that allow us to manipulate only selected elements using CSS or JavaScript.

Editing a Drupal paragraph - summary

Paragraphs offer many possibilities, but configuring, editing and maintaining them on a standard Drupal instance isn’t the most convenient. The approach presented in Droopler will certainly make the process of creating, editing and managing paragraphs easier and faster. We recommend taking a closer look at how Droopler manages them. If your website also uses these components, we recommend using a similar method or the Droopler installation profile.