Réordonner facilement des paragraphes embarqués dans d'autres paragraphes avec Drupal 8

Le module Paragraph permet, entre autres usages, de proposer des mises en pages structurées diverses et variées selon les besoins d'un projet, directement accessibles et pouvant être gérés par un rédacteur de contenu, sans droits d'administration particuliers.

Un des inconvénients majeures que j'ai pu rencontré avec Paragraph, pour la conception de pages d'atterrissage complexes, est l'impossibilité de changer le parent d'un paragraphe dans le cas de paragraphes (de type picto ou image/texte, etc par exemple) embarqués dans d'autres paragraphes (de type conteneur par exemple permettant de contrôler l'agencement). Et dans ce cas il était nécessaire de supprimer puis de refaire le paragraphe au niveau du bon parent pour faire des modifications structurelles de l'agencement de ce type de page (landing page, page d'accueil, etc.).

Utilisateur du module Paragraph depuis de nombreuses années, j'avoue peut-être n'avoir pas lu toutes les releases notes du module. Et c'est sans doute pour cela que je découvre seulement maintenant que le module Paragraph propose désormais nativement une fonction de glisser / déposer permettant de réordonner complètement l'agencement de paragraphes, et ceci qu'ils soient embarqués ou non dans d'autres paragraphes. En un clic il est désormais possible de modifier le parent d'un paragraphe.

Et je viens juste de (re)-lire le README du module. Chose sans doute qu'on fait peu souvent quand on croit bien connaître un module.

Drag & drop
-------------

The experimental widget offers a separate mode that allows to re-sort paragraphs
not just within the same level but it is also possible to change the hierarchy
and move paragraphs including their children around and into other paragraphs.

During drag & drop mode, paragraphs are also displayed as a summary only, which
results in a very compact display that makes it easier to move them around.

To use this, an additional library is necessary, which needs to be put in the
/libraries folder. Download from https://github.com/RubaXa/Sortable/releases,
make sure that the folder name is Sortable (with uppercase S) so that the path
to the javascript file is /libraries/Sortable/Sortable.min.js.

Use the version 1.10+ as it's tested and approved. Older versions may introduce
bugs with nested drag & drop functionality.

If the file exists, the feature will automatically be available.

Donc en installant la librairie jQuery Sortable, cette fonctionnalité est activée automatiquement. Nous disposons alors d'un bouton action Glisser / Déposer au niveau du champ Paragraph lui-même.

Et une fois activé, l'ensemble des paragraphes du champ passent en mode Glisser / Déposer et cela nous permet alors de réordonner à volonté tous les paragraphes de la page et notamment de changer le cas échéant leur parent.

En conclusion, à chaque mise à jour de module, pensez à lire la release note, mais également à parcourir son fichier README, même brièvement. Cela pourra vous éviter de passer à côté de nouvelles fonctionnalités majeures et extrêmement utiles, pendant de nombreux mois, comme cela a pu m'arriver.

Mise à jour : et depuis la version Drupal Core 8.8 et Paragraph 8.x-1.11 il n'est plus nécessaire d'installer la librairie Sortable. C'est désormais disponible Out of the Box.