L'édition de contenu facile avec Drupal : Gutenberg ou Layout Paragraphs ?

Gutenberg

Gutenberg a dans un premier temps pénétré la communauté Wordpress. Il a été présenté au monde par Matt Mullenweg, fondateur de Wordpress, au WordCamp Europe en 2017. S'il apparait comme une référence dans la communauté Wordpress, très investie sur l'expérience de la contribution, qu'en est-il avec Drupal ?

Gutenberg et Drupal 9, une opportunité ?

Auparavant, il existait deux approches principales de la création de contenu dans Drupal :

• Une approche basée sur les paragraphes - C'est la solution que nous privilégions toujours aujourd'hui, nous allons vous dire pourquoi. Actuellement, environ 190.000 sites utilisent le module Paragraphs (selon le compteur drupal.org qui ne recense que les sites qui jouent le jeu :)
• Une approche basée sur le module layout builder, disponible dans le core depuis Drupal 8.5. Il est encore en cours d'amélioration et se présente comme un concurrent sérieux car il est vraiment bien intégré au noyau Drupal. Il est cependant assez complexe à manipuler pour certains administrateurs de sites, ce qui rend les solutions telles que les paragraphes ou Gutenberg.

Fin 2018, la communauté Drupal a porté le projet Gutenberg dans Drupal. Le projet a été conduit par l'agence norvégienne Frontkom (merci à eux !) Ce projet a été l'occasion de lier quelques intégrations intéressantes spécifiques à Drupal, nous y reviendrons. 

La libération de Drupal 9 représente une opportunité de tester Gutenberg sur nos projets, avec nos clients. L'objectif est triple :

• Quand avons-nous intérêt à ne proposer une expérience de contribution avec Gutenberg ?
• Peut-on et dans quels cas proposer une expérience de contribution avec Gutenberg et Paragraphs ?
• Quand avons-nous intérêt à proposer une expérience de contribution avec Layout Paragraphs? 

Nous avons ici exclu l'utilisation de layout builder qui implique trop de complexité pour nos utilisateurs. Il peut être utile dans une logique de réutilisation de composants, d'intégration, mais nous n'avons jamais eu à reproduire ce type d'usage jusqu'à présent. 

Testons Gutenberg

D'abord... Commencez par vous éclater : https://drupalgutenberg.org/demo !
C'est toujours grisant de tester les outils en dehors de tout contexte :)

Gutenberg kezako ?

L'éditeur Gutenberg est basé sur ReactJS. Il permet aux utilisateurs créer des entités de contenu riches avec un choix d'éléments appelés "blocs". L'outil dispose d'une bibliothèque de blocs tels que des en-têtes, des galeries, des listes, des images, des fichiers, des vidéos, des citations, des tableaux, des boutons, des espaceurs, des séparateurs, etc.

Tous les blocs peuvent être facilement ajoutés à la page de contenu par "glissé-déposé". Il permet de visualiser la contribution de contenu plus rapidement et directement dans son état final.

Éditeur Gutenberg dans Drupal - Le module Gutenberg

Gutenberg dispose aujourd'hui de son module contribué dans drupal. Son principal atout est de permettre la création de blocs réutilisables, enregistrés dans l'éditeur. Le module s'intègre à la gestion des fichiers de Drupal et à la bibliothèque de médias. Le module permet également d'avoir accès à la bibliothèque Gutenberg Cloud de blocs contribués. Il est en outre possible de combiner l'utilisation de blocs Gutenberg et de blocs Drupal traditionnels. 

Installation

Téléchargez le module Gutenberg comme tout autre module Drupal contribué. Il se compose de 3 sous-modules : Examples Block, Gutenberg cloud, Gutenberg Editor.

L'éditeur Gutenberg est le seul requis. Les deux autres peuvent être activés en option.

Activer Gutentberg pour un type de contenu

Accédez à Structure > Types de contenu - Sélectionnez le type de contenu pour lequel vous souhaitez utiliser Gutenberg et cliquez sur « Modifier ».

Dans l'onglet Modifier, l'option "Expérience Gutenberg" doit être activée.

Cette option autorise l'utilisation d'options supplémentaires - Parmi eux se trouvent les blocs Gutenberg et les blocs Drupal autorisés où vous pouvez définir quels blocs doivent être disponibles.

Cliquez sur "Enregistrer le type de contenu" et vous êtes prêt. 

Remarque : Voici les blocs activés par défaut qui seront immédiatement disponibles dans l'interface Gutenberg regroupés en catégories (sauf si vous choisissez de modifier cela dans les paramètres de type de contenu Gutenberg) :

• Blocs communs    
  • Paragragh ;
  • Image ;
  • Rubrique ;
  • Galerie ;
  • Liste ;
  • Citation ;
  • Audio ;
  • Couverture ;
  • Fichier ;
  • Vidéo.
• Mise en page
  • Code ;
  • HTML personnalisé ;
  • Texte préformaté ;
  • Emphase ;
  • Tableau ;
• Eléments de mise en page
  • Médias et texte ;
  • Boutons ;
  • Colonnes ;
  • Groupe ;
  • Séparateur ;
  • Espacements.
• Intégration
  • Twitter ;
  • YouTube ;
  • Facebook ;
  • Instagram ;
  • SoundCloud ;
  • Spotify ;
  • Flickr ;
  • Vimeo.

D'autres blocs sont disponibles mais il n'est pas utile à ce stade d'entrer plus dans les détails fastidieux :)

Créer du contenu avec Drupal Gutenberg

Finie l'habitude de CKEditor, vous contribuez maintenant en adoptant une approche par "blocs". À la droite du bloc d'édition, vous disposez d'un onglet avec les paramètres Drupal du noeud - son titre, les paramètres du menu, l'alias de l'URL, les informations de création, etc. 

Les blocs

Chaque bloc dispose de paramètres qui dépendent du type de bloc (que l'on peut modifier en cliquant sur la première icone. Le dernier bouton permet d'administrer les options de duplication, d'insertion (avant ou après), de gestion de la source html, de groupage, de suppression et d'ajout à la bibliothèque de blocs. 

L'ensemble est très intuitif et correctement intégré à l'univers de Drupal. Pour savoir à quelle typologie de projets il peut correspondre, nous devons tester son concurrent principal - Layout paragraphs qui repose sur la gestion de paragraphes traditionnels de Drupal.

Testons Layout paragraphs

Layout paragraphs propose également une expérience intéressante, sur une interface graphique, également en glissé-déposé, de mise en page de paragraphes. Le module, directement hérité du module Paragraphs fonctionne de façon transparente avec les champs de référence des paragraphes existants.

Principales caractéristiques

• Interface utilisateur intuitive et qui accepte l'organisation par glissé-déposé ;
• Fonctionnement avec les champs de référence des paragraphes existants ;
• Configuration flexible – les administrateurs du site choisissent les paragraphes à utiliser sur les sections de mise en page d'une page ;
• Utilisation de l'API de mise en page de Drupal pour créer des mises en page ;
• Utilisatio de l'API des comportements des paragraphes pour stocker les données de mise en page.

Installation et configurations

• Assurez-vous que le module Paragraphs est installé.
• Téléchargez / exécutez la commande (composer require drupal/layout_paragraphs) ;
• Créez un nouveau type de paragraphe (admin > structure > types de paragraphe) à utiliser pour les sections de mise en page, avec les champs de votre choix ;
• Activez le comportement du paragraphe et sélectionnez une ou plusieurs mises en page à rendre disponible ;
• Choisissez "Layout Paragraph" comme type de widget pour le champ de référence de paragraphe souhaité dans l'onglet de gestion de l'affichage du formulaire ;
• Choisissez "Layout Paragraph" comme formateur de champ pour la référence de paragraphe souhaitée dans l'onglet de gestion de l'affichage ;

Vous pouvez maintenant utiliser le module !

Layout paragraphs vs Layout Builder

Contrairement à Layout Builder disponible dans le noyau de Drupal, Layout Paragraphs n'est pas un outil de création de site. Layout Paragraphs fonctionne avec les paragraphes de Drupal, et non avec les blocs. Voici les principales différences entre les deux :

• Layout paragraphs fonctionne avec des paragraphes, pas avec des blocs.
• Layout Paragraphs est basé sur le système de champs de Drupal - La configuration de Layout Paragraphs est aussi simple que la configuration d'un champ de référence d'entité (champ paragraphe) ce qui le rend très flexible.
• Layout Paragraphs prend en charge les modèles de mise en page imbriqués.

Le système de mise en page des paragraphes est composé de trois parties principales :

• Un layout qui possède une collection de sections et de composants. La classe principale (LayoutParagraphsLayout) contient des méthodes pour manipuler la mise en page de différentes manières (insertion d'un nouveau composant, réorganisation des sections et de leurs composants imbriqués).
• Une section qui contient une collection de composants, un identifiant et une configuration nécessaires pour le rendu de la mise en page.
• Des composants qui permettent de décorer les entités de paragraphes avec des propriétés et des fonctionnalités supplémentaires. Les composants forment l'élément le plus simple dans le système de Layout Paragraphs.

Avec un peu de pratique, vous pouvez configurer vos modèles de mises en page et les reproduire pour vos clients. L'article suivant vous donne une méthode rapide pour y parvenir : 
https://www.chapterthree.com/blog/drupal-pretty-paragraphs-build-better-content-layout-paragraphs

Comment choisir ?

Une des grandes faiblesses de Gutenberg, qu'il soit utilisé avec ou sans Drupal, est qu'il génère un code moins accessible et moins internationalisable que les modules issus de la galaxie Drupal tels que Paragraphs et Layout Paragraphs. 

Nous vous invitons à lire comment l'agence chargée du site du W3C a poliment pointé du doigt Gutenberg - 
https://adrianroselli.com/2020/09/gutenberg-accessibility-costs-wordpress-the-w3c-work.html

Nous nous rangeons derrière ces remarques ce qui nous contraint à écarter le plus souvent Gutenberg lorsqu'un projet est soumis à de fortes contraintes en accessibilité (ce qui devrait concerner la grande majorité des projets). Pour aller plus loin dans les critères de choix, revenons sur les avantages et inconvénients des 2 méthodes d'édition de contenu -

Avec Gutenberg

Avantages gutenberg :

• Sa fonctionnalité d'Inline edition - Tempérée par la possibilité de la déployer avec CKeditor, dont la version 5 vient d'intégrer Drupal 9 en phase de test ;
• La joie de profiter de la librairie Gutenberg cloud même si nous le déconseillons souvent pour des questions d'indépendance des propriétaires de sites ;
• Son expérience de la contribution, agréable, performante et au service des utilisateurs de tous niveaux.

Risques / Inconvénients avec Gutenberg : 

• Indépendance de l'utilisation des modules du cloud (qui ne sont pas enregistrés en local) ;
• Accessibilité du code produit, comme vu précédemment ;
• Impossibilité de réutilisation des gabarits ;
• Gutenberg est moins bien intégré au système des permissions / rôles et droits que les modules Drupal traditionnels ;
• La mise en page réalisée avec Gutenberg est un tout et non un ensemble de paragraphes sur lesquels ont peut agir finement (paragraphes, droits, traductions, injection de contenu externe comme en provenance d'un CRM ou d'un connecteur).

Avec Layout Paragraphs

Avantages Layout Paragraphs :

• Une meilleure expérience de contribution (peut-être pas aussi conviviale que Gutenberg mais bien meilleure que le Drupal par defaut).
• Une intégration avec le reste de l'écosystème Drupal :
  • Paragraphes
  • Blocs
  • Vues
  • Droits d'accès
  • Migration de contenu
  • Traductions
• Une approche modulaire qui satisfera les mainteneurs de sites Drupal.

Risques / Inconvénients avec Layout Paragraphs :

Nous n'identifions pas de risques majeurs avec l'utilisation de Layout Paragraphs. Notons tout de même la complexité de son approche pour les utilisateurs débutants ou novices dans l'univers de Drupal. Mais la documentation et les multiples tutoriels en ligne doivent en principe remédier largement à cet état de faits.

Typologies de projet excluant pour l'instant la généralisation de Gutenberg

Il nous arrive de proposer Gutenberg dans certains cas. Nous savons que les utilisateurs apprécient cette expérience. Il est cependant difficile de le généraliser pour les projets suivants : 

• Lorsque le projet concerné exige une forte optimisation en matière d'accessibilité (en raison du public cible et dans le cas de marchés publics) ;
• Lorsque le projet emporte des contraintes importantes de permissions (nombreux rôles, finesse des permissions liées à l'édition de contenu et à sa modération) ;
• Lorsque le projet dispose de nombreuses versions linguistiques ;
• Lorsque le projet intègre des fonctionnalités complexes, des connecteurs tiers ;
• Lorsque le projet est susceptible de maintenance évolutive avancée, régulière et impactante.

Gutenberg est en somme parfaitement adapté aux sites simples, sans fonctionnalités particulièrement "exotiques", ni contraintes fortes en accessibilité. C'est pour cette raison que nous ne l'utilisons que très rarement ou de manière exceptionnelle en le limitant à quelques types de contenu ou rôles dans certaines conditions. 

Conclusion

Gutenberg est une alternative intéressante aux outils de création de contenu et de création de pages de base de Drupal. Cela fait de Drupal un CMS plus polyvalent ouvert aux utilisateurs avec diverses préférences. Il n'est cependant pas adapté à tous les projets, notamment pour des questions d'accessibilité et d'intégration avancée à l'ensemble de l'architecture du CMS Drupal. Nous l'utilisons avec parcimonie, dans l'intérêt des utilisateurs à qui nous expliquons ses limites, dans certains cas, comme nous venons de le faire. En espérant que notre démarche soit utile... Comme les projets sur lesquels nous aimons travailler !

Sources : 
https://www.drupal.org/project/gutenberg
https://drupalgutenberg.org/demo
https://www.drupal.org/project/layout_paragraphs
https://www.drupal.org/docs/8/core/modules/layout-builder
https://www.chapterthree.com/blog/drupal-pretty-paragraphs-build-better-content-layout-paragraphs