Module pour la Création et l'Édition de Contenu dans Drupal – Gutenberg

Les sites web modernes nécessitent des solutions modernes pour leurs éditeurs. De nos jours, un éditeur de texte WYSIWYG basique ne suffit souvent plus. Pour répondre aux attentes du marché actuel, de nombreuses solutions offrant aux utilisateurs la possibilité d'une édition de contenu avancée et visuelle ont été créées. L'un de ces éditeurs est Gutenberg. Dans cet article, nous tenterons de décrire ses principales fonctions et avantages, ainsi que de présenter d'autres solutions intéressantes.

Éditeur WYSIWYG pour Drupal

L'acronyme WYSIWYG signifie What You See Is What You Get (Ce que vous voyez est ce que vous obtenez). Les outils de ce type facilitent le travail de l'édition de contenu et offrent également diverses options de formatage pour le texte et le multimédia. Grâce à ces outils, l'apparence finale reflète ce que l'éditeur voit dans la fenêtre d'édition. La solution la plus populaire mise en œuvre dans Drupal est CKEditor. Ce n'est pourtant pas la seule option, car il existe de nombreuses extensions de ce type dans le dépôt de modules contrib. Nous décrirons brièvement quelques-unes d'entre elles ci-dessous.

CKEditor

Depuis Drupal 8, la quatrième version de ce module est disponible dans le noyau. Il vous permet de remplacer un champ de texte ordinaire par un panneau d'édition similaire à ceux connus des logiciels tels que MS Word. CKEditor est très rapide et intuitif, et grâce à la licence open source, sa popularité et sa grande communauté, vous pouvez trouver de nombreux plugins sur le web qui introduisent de nouvelles fonctionalités et développent les fonctions de base. La version 5 est également disponible, elle est actuellement une implémentation expérimentale, mais remplacera son prédécesseur dans la prochaine version de Drupal. CKEditor 5 introduit une nouvelle expérience d'édition. Il a été amélioré en termes de visuels, de fonctionnalité et d'utilité. Les développeurs ont également de quoi se réjouir, car la nouvelle version est bien plus pratique en termes d'écriture de vos propres extensions.

TinyMCE

Cette solution permet l'édition avancée du contenu du site web. C'est une alternative à CKEditor, mais en raison de sa moindre popularité et du fait que l'outil mentionné a été intégré dans le noyau de Drupal, TinyMCE n'est pas suffisamment flexible pour s'intégrer aux autres fonctionnalités de Drupal telles que la bibliothèque multimédia ou l'intégration des entités.

N1ED

Un plugin qui élève les modules Drupal mentionnés ci-dessus à un niveau supérieur. Il est disponible dans Drupal en tant que module extension contrib pour CKEditor. Il existe également un plugin pour TinyMCE, mais pas sous la forme d'une intégration avec Drupal. L'aspect le plus important est que N1ED ajoute ses propres widgets, un éditeur de mise en page Bootstrap, un gestionnaire de fichiers et un éditeur d'images. Des outils de création de blocs Bootstrap sont également disponibles. Le concept principal est d'éditer les articles bloc par bloc, en les sélectionnant dans la galerie ou en utilisant la fonction de construction. Vous pouvez également les créer vous-même et les enregistrer dans votre galerie de blocs personnelle. La version de base de N1ED est gratuite, mais il existe également une version payante qui propose encore plus de fonctionnalités.

Expérience d'édition exceptionnelle – Gutenberg

Gutenberg est un éditeur similaire à CKEditor, mais offre une bien meilleure expérience lors de la création de contenu. En termes d'UX, il est plus proche de Layout Builder, mais il est beaucoup plus simple et pratique. En tant que constructeur de pages, il est également comparé à Glazed Theme, HAX et le module Paragraphs.

Gutenberg est un éditeur de pages web moderne, extrêmement puissant et flexible. Les auteurs de Drupal Gutenberg ont tenté de rendre cet outil aussi convivial et utile que possible pour les créateurs de contenu. Tous les éléments du site web qui prennent en charge Gutenberg sont des blocs. En plus du fait que le module lui-même contient un grand nombre de widgets et de blocs utiles que vous pouvez utiliser, ses créateurs ont veillé à ce qu'il soit bien intégré à Drupal, grâce auquel vous pouvez utiliser les blocs du noyau de Drupal ou vos propres blocs personnalisés.

Initialement, Gutenberg a été écrit en tant que plugin pour WordPress, à qui il doit sa popularité. Au moment de l'écriture, plus de 300 000 sites web utilisent déjà ce plugin. Dans Drupal, c'est une solution relativement nouvelle et moins de 3 000 sites web l'utilisent. Cependant, l'intégration avec Drupal offre beaucoup plus de possibilités de manœuvre, aussi bien pour les éditeurs de contenu que pour les développeurs. Un outil aussi incroyable, combiné aux possibilités illimitées de Drupal, est vraiment quelque chose de merveilleux. Nous tenterons de vous en convaincre en discutant des fonctionnalités clés du module Gutenberg.

Édition de contenu visuelle et seuil d'entrée bas pour les éditeurs

Contrairement aux solutions standard disponibles dans Drupal, Gutenberg vous permet d'éditer virtuellement l'ensemble de l'article ou une seule page presque en temps réel. L'éditeur peut immédiatement voir les effets de son travail, et grâce aux panneaux pratiques et conviviaux pour le formatage du contenu, il peut aisément disposer chaque élément du site web exactement comme il le souhaite.

Blocs fournis avec le module

Gutenberg contient environ 60 blocs de base. Environ la moitié d’entre eux sont des blocs pour intégrer des services (tels que Twitter ou YouTube). D'autres permettent aux éditeurs de créer des éléments de page de base tels que des en-têtes, des paragraphes ou des listes. Il y en a également qui permettent de créer des systèmes complexes et des composants attrayants d'une manière simple et intuitive.

Blocs Drupal

Grâce à la fonction d'intégration des blocs Drupal, les éditeurs peuvent utiliser les blocs de base et personnalisés préparés par les développeurs. Cela rend le module Gutenberg encore plus flexible, et le processus créatif est limité uniquement par la créativité des auteurs du site.

Composants réutilisables

Les nouveaux blocs créés peuvent être enregistrés dans la bibliothèque afin qu'ils puissent être réutilisés dans d'autres articles. Une telle solution facilitera certainement le travail dans de nombreuses rédactions.

Champs personnalisés

Il est également possible d'ajouter tous types de champs disponibles dans Drupal, grâce auxquels vous pouvez facilement intégrer le type de contenu avec les méta-balises, par exemple. Les champs personnalisés seront ajoutés dans une section séparée qui ne perturbera pas l'expérience de l'édition du contenu principal.

Cela, bien sûr, ne couvre pas toutes les fonctionnalités que Drupal Gutenberg offre, seulement les principales. Vous pouvez en savoir plus sur le site web de promotion du module et dans la documentation.

Installation du module Drupal Gutenberg

1. Téléchargez et décompressez le module dans le répertoire modules/contrib ou utilisez la commande "composer require drupal/gutenberg".

2. Activez le module principal Gutenberg Editor. Pour ce faire, allez à la page "/admin/modules", trouvez et sélectionnez le module, puis cliquez sur le bouton Installer.

Vous pouvez également utiliser la commande Drush "drush en gutenberg".

3. Allez modifier le type de contenu pour lequel vous souhaitez activer Gutenberg.

4. Dans l'onglet Gutenberg experience, cochez la case Enable Gutenberg experience et définissez toutes les options de Gutenberg en conséquence.

Modèle

Dans ce champ, vous pouvez définir quels blocs et dans quel ordre seront disponibles par défaut pour votre type de contenu. Si vous souhaitez que l'éditeur décide par lui-même quels blocs ajouter, laissez ce champ vide.

Verrouillage du modèle

Ce champ vous permet de définir comment les éditeurs pourront utiliser Gutenberg. Trois options sont disponibles :

• Aucun. Les éditeurs pourront ajouter et supprimer de nouveaux blocs. Cette option offre la plus grande liberté lors de la création de contenu.
• Insérer. Elle permettra d'éditer et de déplacer les blocs déclarés dans le champ Modèle. Après avoir sélectionné cette option, les éditeurs ne pourront pas ajouter de nouveaux blocs, indépendamment des paramètres du champ Modèle.
• Tous. Elle ne permettra que d'éditer les blocs déclarés dans le champ Modèle. Les éditeurs ne pourront pas déplacer les blocs ni en ajouter de nouveaux, indépendamment des paramètres du champ Modèle.

Blocs Gutenberg autorisés

Sélectionnez les blocs Gutenberg qui seront disponibles pour les éditeurs. Gardez à l'esprit qu'il sera possible de les ajouter indépendamment des paramètres du champ Modèle uniquement si vous choisissez l'option Aucun dans le champ Verrouillage du modèle.

Blocs Drupal autorisés

Sélectionnez les blocs Drupal qui seront disponibles pour les éditeurs. Gardez à l'esprit qu'ils seront disponibles pour être ajoutés indépendamment des paramètres du champ Modèle uniquement si vous choisissez l'option Aucun dans le champ Verrouillage du modèle.

5. Enregistrez le type de contenu, et vous êtes prêts. Maintenant vous pouvez ajouter du nouveau contenu et profiter de l'expérience Gutenberg !

Gutenberg Cloud

Ce module est l'extension de base disponible pour Gutenberg. Il s'agit en fait d'une bibliothèque de composants prêts à l'emploi et extensibles, que vous pouvez bien sûr étendre avec les vôtres si vous avez des connaissances et des compétences. Les principaux avantages de ce module incluent :

• Pas besoin d'installer des modules supplémentaires. Gutenberg Cloud a été conçu pour être suffisant pour quiconque souhaitant parcourir et installer de nouveaux blocs. Cela introduit une standardisation et une commodité tant pour les éditeurs que pour les développeurs.
• Réutilisabilité des blocs, quel que soit le système. En raison du fait que Gutenberg Cloud n'est pas un outil strictement conçu pour Drupal ou WordPress, mais offre seulement une intégration avec ces systèmes, les blocs peuvent être utilisés sans gros problèmes dans les deux systèmes.
• Possibilité de partager le code. Partagez votre code avec le monde en créant un package NPM. Cela permettra à d'autres d'utiliser votre code. Bien sûr, cela fonctionne dans les deux sens, et vous pouvez également utiliser le code partagé par d'autres développeurs, ce qui rendra votre travail plus rapide et plus agréable.

Installation de Gutenberg Cloud

Grâce au fait que Gutenberg Cloud est un sous-module du module principal Gutenberg, disponible immédiatement après le téléchargement, vous n'avez pas besoin de télécharger d'extensions supplémentaires. Vous devez simplement l'activer ! Pour ce faire, allez à la page /admin/modules, trouvez et sélectionnez le module, puis cliquez sur le bouton Installer.

Vous pouvez également utiliser la commande Drush "drush en gutenberg_11".

Après avoir activé le module, il est également nécessaire d'activer les blocs qui doivent être disponibles pour les éditeurs. Pour ce faire, allez à la page /admin/config/gutenberg-cloud et installez les blocs dont vous avez besoin.

Les blocs nouvellement installés peuvent être ajoutés immédiatement, sans configuration supplémentaire du type de contenu utilisant Gutenberg.

Drupal Gutenberg en pratique

C'est le moment de la partie la plus importante, à savoir présenter comment Gutenberg fonctionne en pratique. Le type de contenu préparé pour la présentation a été configuré de manière à ce que les éditeurs voient initialement deux champs à remplir : le titre et la description. Ils peuvent également ajouter de nouveaux blocs, et nous allons en profiter dans un instant. Allons-y !

Pour ajouter du nouveau contenu, allez à la page d'ajout de contenu. Dans notre cas, c'est /node/add/article. Nous voyons un éditeur plein écran avec une barre latérale dans laquelle nous pouvons remplir les champs de contenu de base ou passer à la configuration des blocs.

Tout en haut, il y a une barre d'outils avec :

• Sur le côté gauche :
  • Icône Drupal, qui vous redirigera vers la liste contenant tout le contenu,
  • bouton pour ajouter des blocs,
  • bouton d'édition,
  • boutons d'annulation et de rétablissement des modifications,
  • bouton pour afficher les détails de l'article,
  • bouton pour afficher ou masquer la liste des blocs.
• Sur le côté droit :
  • Bouton d'aperçu, avec lequel vous pouvez changer l'aperçu de la page (bureau, tablette ou mobile),
  • icône d'engrenage, avec laquelle vous pouvez masquer ou ouvrir la barre latérale droite,
  • icône avec trois points pour développer les autres options,
  • deux boutons Drupal de base - Enregistrer et Aperçu.

Commençons par remplir les champs de contenu de base dans la barre latérale. Entrons le titre, la description de la révision, partageons le contenu dans le menu et définissons l'alias du contenu.

Passons maintenant à remplir l'en-tête et la description que nous avons déclarés comme éléments de base. Après avoir cliqué sur le premier champ au-dessus de son contenu, les paramètres de formatage et les options supplémentaires apparaîtront, et la barre latérale passera à l'édition des blocs. Nous pouvons y définir, par exemple, la taille ou la couleur du texte.

Ensuite, ajoutons quelque chose de supplémentaire : un bloc qui diversifiera visuellement notre article. Pour ce faire, nous cliquons sur l'icône "+" dans la barre des tâches en haut de l'éditeur et sélectionnons l'un des blocs. Pour les besoins de cette présentation, nous avons décidé d'ajouter une bannière héroïque.

Nous réglons le mode pleine largeur et l'arrière-plan, et changeons l'élément texte et graphique.

Ajoutons encore du texte et une galerie. Si vous voulez vous exercer un peu et voir par vous-même à quel point il est agréable de travailler avec Gutenberg, nous vous encourageons à essayer les autres éléments par vous-même. Voici ci-dessous l'aperçu des blocs ajoutés pour la présentation.

Enregistrons maintenant le contenu et vérifions à quoi ressemble notre article. Il s'est avéré vraiment bien, et, surtout, le résultat final correspond à ce que nous avons vu dans l'éditeur.

Drupal Gutenberg - résumé

Nous pouvons définitivement dire que Gutenberg est un outil très intéressant et créatif qui peut être utilisé avec succès dans toutes sortes de sites web modernes, y compris ceux basés sur Drupal, dont les éditeurs attendent un peu plus que de simples logiciels d'édition. Gutenberg fournit l'effet "WOW" – il y a des dizaines de composants, voire des centaines, si nous prenons en compte ceux strictement pour Drupal. Il y a aussi des options pour les développeurs pour personnaliser ce module. Il offre pratiquement tout ce dont vous pourriez avoir besoin d'un éditeur de nos jours !