L'anatomie complète de l'éditeur WordPress de Gutenberg

Il semble que Gutenberg ait été un terme controversé dans le monde de WordPress ces derniers temps. Salué comme le changement le plus important apporté à WordPress 5.0 cette année, l'éditeur Gutenberg a reçu une réponse mitigée de la part des développeurs Web et des gens ordinaires. Tout ce chaos rend difficile de voir Gutenberg pour ce qu'il est vraiment. Donc, je vais essayer de dissiper une partie de la confusion une fois pour toutes.

Dans cet article, je couvrirai les points suivants :

1. Qu'est-ce que Gutenberg ?
2. Plus qu'un simple éditeur
3. Que change Gutenberg dans WordPress ?
4. Installer Gutenberg
5. Explorer longuement Gutenberg
6. Avantages et inconvénients
7. Comprendre les problèmes de compatibilité
8. Gutenberg est l'avenir
9. Dernières nouvelles et autres ressources

1. Qu'est-ce que Gutenberg ?

Nommé d'après Johannes Gutenberg, qui a inventé la presse à imprimer mécanique, Gutenberg a été présenté au monde par Matt Mullenweg au WordCamp Europe en 2017. En substance, Gutenberg est un nouvel éditeur WordPress, avec des dizaines de fonctionnalités de pointe. Il simplifie la création et l'édition de sites Web pour l'utilisateur moyen non technique.

Il a reçu plusieurs distinctions, de « la nouvelle expérience de publication de WordPress » à « l'avenir de la création de sites Web ». Certains sceptiques pensent que c'est le clou du cercueil pour WordPress. Tout ce bavardage mis à part, Gutenberg sera bien plus qu'un simple éditeur pour WordPress (dont je parlerai ensuite).

Il permet aux créateurs de sites Web de créer un site Web à l'aide de blocs, qui sont de petites unités de glisser-déposer. Ainsi, il remplace le processus de personnalisation incohérent et distrayant actuel. Il active également les balises HTML telles que section et figure , produisant du HTML solide. Au moment d'écrire ces lignes, Gutenberg est toujours un plugin. Cependant, la communauté prévoit de le fusionner avec WordPress 5.0 cette année.

2. Plus qu'un simple éditeur

Gutenberg est plus qu'un simple éditeur car il vous permet de gérer le contenu du site Web en morceaux ou en blocs personnalisables. Vous n'avez pas besoin de maîtriser le HTML ou d'écrire des shortcodes. Vous pouvez contrôler l'ensemble de la mise en page d'un site Web (à la fois back-end et front-end) à partir d'une seule console.

Ce nouvel éditeur tente de combiner les meilleures fonctionnalités des plugins de création de pages tels que Divi et Visual Composer, ainsi que des plateformes de bricolage telles que Medium, Wix et Squarespace. Ainsi, tout comme ces plugins de création de pages, vous pouvez gérer des mises en page multi-colonnes via une seule interface.

Cela sonne-t-il la fin des plugins tels que Divi et Beaver Builder ? C'est un sujet pour un autre article, mais la réponse courte est non. Il est peu probable que Gutenberg remplace complètement ces plugins. Vous pouvez continuer à les utiliser même une fois que Gutenberg devient l'éditeur par défaut.

3. Que change Gutenberg dans WordPress ?

Le seul but de l'éditeur Gutenberg est de fournir une alternative à l'éditeur de texte ouvert actuel, sans parler des shortcodes difficiles à retenir, avec une interface utilisateur (UI) agile et visuelle. Ainsi, contrairement à l'éditeur WordPress actuel, vous n'avez pas à :

• importer des images, des fichiers multimédias et approuvés à partir de la médiathèque ou ajouter des codes abrégés HTML ;
• copier et coller des liens pour les intégrations ;
• écrire des shortcodes pour les ressources spécialisées de différents plugins ;
• créer des images vedettes à ajouter en haut d'un article ou d'une page ;
• ajouter des extraits pour les sous-titres ;
• ajouter des widgets pour le contenu sur le côté d'une page.

En bref, Gutenberg ne change pas le fonctionnement de WordPress. Cependant, cela change la façon dont les propriétaires (ou les créateurs) de sites Web interagissent avec lui. Au lieu de tout un tas de shortcodes et de méta-boîtes, vous utiliserez des blocs simples.

Que sont les blocs ?

Considérez un bloc comme l'unité la plus basique (donc la plus petite) du nouvel éditeur. Ils seront les blocs de construction de WordPress 5.0. En d'autres termes, tout, y compris le contenu, les images, les citations, les galeries, les images de couverture, l'audio, la vidéo, les en-têtes, les intégrations, les codes personnalisés, les paragraphes, les séparateurs et les boutons, se transformera en blocs distincts. Comme vous pouvez faire glisser et déposer chaque bloc, il devient beaucoup plus facile d'identifier ces éléments et de les placer sur la page.

4. Installer Gutenberg

Vous pouvez télécharger la dernière version de Gutenberg directement depuis le référentiel WordPress. Vous pouvez également le rechercher sous les plugins "Ajouter de nouveaux" dans votre tableau de bord WordPress. Je recommanderais de l'installer dans votre environnement de staging. Cependant, vous aurez besoin de la dernière version de WordPress (version 4.8 ou ultérieure) pour installer l'éditeur Gutenberg.

1. Connectez-vous à votre tableau de bord d'administration WordPress.
2. Accédez au menu Plugins sur le côté gauche du tableau de bord.
3. Cliquez sur "Plugins" pour ouvrir le menu "Ajouter un nouveau".
4. Tapez « Gutenberg » dans le champ de recherche, situé dans le coin supérieur gauche.
5. Vous verrez le plugin Gutenberg dans les résultats.
6. Cliquez sur le bouton "Installer maintenant".
7. Cliquez sur le bouton "Activer" pour lancer le plugin.

5. Explorer longuement Gutenberg

Une fois installé et activé, Gutenberg affichera une icône dans la barre de menu de gauche. Lorsque vous le lancez pour la première fois, vous verrez un nouvel exemple de publication, intitulé « Gutenberg Demo ». Vous pouvez vous entraîner sur le post de démonstration avant de créer le vôtre.

A. Ajouter nouveau

Allez dans "Messages" dans la barre de menu de gauche de votre tableau de bord WordPress. Le nouveau poste sera d'abord lancé à Gutenberg. Vous pourrez ensuite le modifier à la fois dans l'éditeur classique et dans Gutenberg.

B.Modifier

Allez dans le menu "Messages" et passez la souris sur un message enregistré pour voir l'option permettant de choisir entre les deux éditeurs. Bien que l'option d'éditeur classique soit disponible pour le moment, elle sera très probablement supprimée avec le lancement de WordPress 5.0.

C. Basculer entre les éditeurs

Vous pouvez également basculer entre les deux éditeurs lors de la modification d'un message. Cliquez sur le menu déroulant dans le coin supérieur droit pour basculer entre le mode éditeur visuel et l'éditeur de texte (c'est-à-dire le code). Alternativement, vous pouvez également utiliser le raccourci Ctrl + Maj + Alt + M pour basculer entre les éditeurs.

Éditeur de texte:

Éditeur visuel :

D. Copier tout le contenu

Cette fonctionnalité vous permet de copier tout le contenu de la version HTML en un seul clic. Vous pouvez ouvrir cette fonctionnalité dans les deux éditeurs en cliquant sur le menu déroulant dans le coin supérieur droit du tableau de bord.

E. Structures de contenu

Cette fonctionnalité vous permet de compter le nombre de mots dans un message entier. Vous pouvez également voir le nombre de titres, de paragraphes et de blocs en un seul clic. Cliquez sur l'icône d'information (i) dans la zone supérieure gauche.

F. Rétablir et Annuler

Vous pouvez trouver ces options à côté de l'icône d'information (i). Ils permettent d'annuler ou de refaire la dernière commande.

G. Paramètres de page et de document

Cela vous permet de modifier divers paramètres de page et de document. Vous pouvez le trouver dans la barre de menu de droite. Vous pouvez effectuer les ajustements suivants :

• Rendre une publication publique ou privée.
• Modifier la date de publication.
• Sélectionnez le format d'une publication.
• Ajoutez ou modifiez des catégories et des balises.
• Télécharger des images en vedette.
• Écrivez un extrait.
• Activez et désactivez les commentaires, les pingbacks et les trackbacks.

H. Rester sur la page d'accueil

Cette fonctionnalité vous sera utile si vous gérez un blog. Lorsque vous activez cette option dans les paramètres du document, ce message particulier apparaîtra toujours sur la première page de votre blog. Et il suffit de le désactiver pour le supprimer de la page d'accueil.

I. Utiliser des blocs

Comme mentionné, les blocs sont l'unité fondamentale du nouvel éditeur Gutenberg. Pour utiliser efficacement Gutenberg, vous devez comprendre comment utiliser ces blocs. Je couvrirai les blocs principaux un par un. Cliquez sur le bouton plus (+) à côté de l'option rétablir/annuler pour ouvrir le menu des blocs.

Blocs communs

Les blocs communs vous permettent d'ajouter les éléments requis pour créer une interface utilisateur riche.

• Paragraphe
  Le bloc de paragraphe est livré avec quelques excellentes fonctionnalités, telles que des tailles de police personnalisées, des lettrines, des couleurs d'arrière-plan et des couleurs de texte, entre autres. Vous pouvez également ajouter plus de classes CSS ici.

• Image
  Cet élément est livré avec une nouvelle fonctionnalité qui vous permet de basculer entre les mises en page de galerie et d'image. Vous obtenez également plus de contrôle sur les images car vous pouvez définir des dimensions de taille particulières, des rapports de taille en pourcentage et une description textuelle alternative pour chaque image.

• D'autres éléments incluent :
  • devis,
  • galeries,
  • images de couverture,
  • rubriques,
  • listes,
  • l'audio,
  • des dossiers,
  • sous-titres,
  • vidéo.

Mise en page

Comme leur nom l'indique, ces blocs comprennent tous les outils de formatage.

• Table
  L'ajout d'un tableau à l'aide d'un code HTML personnalisé était un travail fastidieux. Avec le bloc de table, cependant, la tâche est beaucoup plus facile. Vous pouvez ajouter et supprimer des lignes et des colonnes d'un tableau sans codage.

• HTML personnalisé
  Vous pouvez utiliser un code HTML personnalisé dans Gutenberg. Et la bonne partie est que vous pouvez insérer votre code et voir un aperçu dans le bloc lui-même.

• D'autres éléments incluent :
  
  • code,
  • classique,
  • préformaté,
  • tirer un devis,
  • verset.

Mise en page

Utilisez votre imagination pour créer une mise en page époustouflante à l'aide de ce bloc. Chaque élément de ce bloc est livré avec d'excellentes fonctionnalités.

• Bouton
  Vous pouvez ajouter des boutons tels que "S'abonner maintenant" et "Acheter maintenant" en utilisant ce bloc. Il a différentes options, y compris l'alignement et les styles de police. Vous pouvez également définir la couleur d'arrière-plan et la forme du bouton.

• Colonnes (bêta)
  La création de colonnes dans l'éditeur basé sur du code prend du temps et est laborieuse. Ce bloc vous permet d'ajouter des colonnes de texte. Vous pouvez ajouter une à six colonnes sur une seule ligne.

• D'autres éléments incluent :
  
  • Lire la suite,
  • saut de page,
  • séparateur,
  • entretoise.

Widget

Ces blocs vous permettent d'ajouter une archive, des catégories, les derniers messages et les derniers commentaires d'un simple clic n'importe où sur la page. Vous pouvez également ajuster ces éléments sans aucun codage.

• Dernier message
  Avec cet élément de bloc, vous pouvez afficher les articles dans une vue de grille ou une vue de liste, les organiser en catégories et les classer par ordre alphabétique ou en fonction de la date de publication. Vous pouvez également choisir d'afficher la date de publication.

Intègre

Vous pouvez facilement accéder à toutes les intégrations à l'aide de ces blocs. Que vous souhaitiez ajouter un lien YouTube ou Twitter, c'est super simple et rapide. Tout ce que vous avez à faire est de coller l'URL dans l'espace vide donné, et Gutenberg intégrera le code pour vous. Voici un exemple d'insertion d'un lien YouTube :

Blocs réutilisables

Les blocs réutilisables offrent aux développeurs une meilleure convivialité. Vous pouvez convertir n'importe quel bloc en un bloc réutilisable afin de pouvoir l'utiliser à un autre endroit. Vous pouvez le modifier et l'enregistrer à nouveau en tant que nouveau bloc réutilisable.

Vous pouvez également voir un aperçu d'un bloc réutilisable. Tous les blocs réutilisables sont disponibles sous les options "Bloc partagé". Plus important encore, vous pouvez en transformer un en un bloc normal à tout moment.

Plus utilisé

Sous cette option, vous verrez les blocs les plus utilisés, pour un accès rapide. Vous pouvez également utiliser la zone de recherche pour rechercher un bloc par son nom.

J. Modifier le bloc

Pour modifier un bloc, ouvrez le menu déroulant en cliquant dans le coin supérieur droit du bloc. Vous verrez différentes options, y compris pour éditer en HTML, dupliquer et ajouter aux blocs réutilisables.

K. Insérer des blocs

Grâce à cette fonctionnalité, vous pouvez insérer un nouveau bloc à tout moment. Lorsque vous passez votre souris sur un bloc, vous verrez une icône plus (+). Cliquez dessus pour insérer un nouveau bloc.

L. Slash Autocomplete

La fonctionnalité Slash Autocomplete est disponible dans Gutenberg 1.1.0 et les versions ultérieures. Il y a de fortes chances que vous connaissiez déjà la fonctionnalité similaire de Slack. Il a été ajouté pour réduire le nombre de pointages et de clics nécessaires pour créer de nouveaux blocs.

Lorsque vous ouvrez un nouveau bloc, appuyez simplement sur / (touche barre oblique) sur votre clavier pour sélectionner l'une des options de saisie semi-automatique. Cela ne fonctionne que dans le bloc de paragraphe par défaut, mais il pourrait devenir une partie d'autres types de blocs à l'avenir.

M. Déplacer des blocs

Gutenberg vous permet de déplacer chaque bloc de haut en bas. Vous pouvez utiliser les flèches (sur le côté gauche de chaque bloc) pour les déplacer verticalement.

6. Avantages et inconvénients de Gutenberg

Avantages

• Aucune compétence technique n'est requise pour créer une mise en page personnalisée pour un article de blog ou un site Web. Cela fonctionne comme Medium, donc les personnes à la recherche de ce genre de style et d'une expérience d'édition conviviale vont l'adorer.
• Il vous permet de créer une conception cohérente et avancée sans trop compter sur TinyMCE.
• De plus, les blocs sont un excellent concept. Ils permettent aux non-développeurs de créer intuitivement des mises en page complexes. Si vous êtes nouveau sur WordPress ou si vous n'en avez aucune connaissance, vous allez toujours l'adorer.
• L'éditeur Gutenberg lui-même fonctionne bien sur mobile (il est réactif). Contrairement à son prédécesseur, il vous permet d'effectuer des modifications rapides lors de vos déplacements. En fait, les développeurs avertis en matière de mobile peuvent réussir à faire plus que quelques modifications rapides.
• L'espace d'écran accru s'avère être une expérience utilisateur moins distrayante pour de nombreux développeurs.
• Les développeurs hardcore peuvent toujours créer des blocs réutilisables personnalisés à l'aide de HTML5. Donc, cela semble être un gagnant-gagnant pour les geeks et les utilisateurs non techniques.

Les inconvénients

• Pour le moment, il n'y a pas de support Markdown dans la version bêta de l'éditeur WordPress.
• Il ne prend toujours pas en charge les colonnes réactives. Vous devrez effectuer un codage personnalisé pour rendre cette fonctionnalité réactive. Donc, utiliser cette fonctionnalité sur mobile n'est pas une option pour le moment.
• Les options de mise en page de conception sont inadéquates pour le moment.
• Les problèmes de compatibilité pourraient être une préoccupation importante pour certains utilisateurs de WordPress.
• Vous n'obtenez qu'une prise en charge partielle des méta-boîtes, cependant, les développeurs travaillent dur pour étendre la prise en charge des méta-boîtes.
• La rétrocompatibilité va être une préoccupation majeure pour la plupart des développeurs. Cela détruira les plugins et les thèmes actuels, en particulier ceux qui nécessitent une intégration avec TinyMCE.

7. Comprendre les problèmes de compatibilité

Malgré sa simplicité et son agilité, Gutenberg n'est peut-être pas la tasse de thé de tout le monde. La plupart des développeurs WordPress pourraient avoir du mal à travailler avec, surtout au début. Ils devront recycler leurs réflexes pour s'habituer à la nouvelle UX.

• En raison du problème de rétrocompatibilité, vous devrez mettre à jour de nombreux plugins et thèmes pour vous assurer qu'ils sont entièrement compatibles avec le nouvel éditeur.
• Pour le moment, les blocs sont plus axés sur le contenu. En conséquence, Gutenberg manque de précision et de contrôle sur la mise en page des sites Web personnalisés.
• Les shortcodes sont remplacés par des blocs de shortcode. Cependant, vous pourrez toujours ajouter des shortcodes à partir du bloc widget.
• Les méta-boîtes seront disponibles sous un nouveau nom et une nouvelle interface utilisateur. Les méta-boîtes conflictuelles sont susceptibles de conduire à l'éditeur classique, au lieu de Gutenberg, avec une alerte. Bien que ce système puisse s'avérer utile, certaines méta-boîtes ne seront pas prises en charge dans Gutenberg.
• Les types de publication personnalisés sont pris en charge et restent rétrocompatibles dans Gutenberg.
• Vous ne pourrez plus désactiver Gutenberg une fois qu'il sera intégré au cœur de WordPress. Cependant, vous pouvez le désactiver à tout moment à l'aide du plugin officiel.

8. Gutenberg est l'avenir

Contrairement à l'opinion populaire, Gutenberg ne remplace pas l'éditeur de texte actuel. C'est une nouvelle façon de créer des sites Web. J'aime le considérer comme Facebook pour WordPress.

Vous n'avez pas besoin d'être un geek en informatique pour publier des choses sur Facebook ou sur toute autre plate-forme de médias sociaux. Gutenberg est juste un moyen d'apporter cette simplicité et cette flexibilité à WordPress, afin que les gens n'aient pas besoin de coder pour créer et publier des sites Web. C'est pourquoi je pense que ce sera l'avenir, non seulement pour WordPress, mais pour le Web en général.

Certes, Gutenberg a un long chemin à parcourir. Des gens (y compris moi) ont eu des problèmes avec sa mise en œuvre, mais bientôt nous aurons des thèmes, des plugins et des outils prêts pour Gutenberg qui apparaîtront partout. Néanmoins, il faut bien commencer quelque part. Donc, vous pourriez aussi bien faire partie de ce changement depuis le début.

9. Dernières nouvelles et autres ressources

Si vous êtes intéressé à prendre le train Gutenberg depuis le début, voici quelques liens pour trouver le dernier buzz. Gardez à l'esprit qu'aucun de ces sites Web n'est officiellement approuvé par WordPress.

• Actualités Gutenberg
• Centre Gutenberg
• Le temps de Gutenberg

Pour les mises à jour et les actualités officielles, vous pouvez essayer ce qui suit :

• « Gutenberg, ou le vaisseau de Thésus », Matias Ventura Bausero
• "Aperçu technique de l'éditeur", Matias Ventura Bausero, WordPress.org
• « Principes de conception », WordPress.org
• "wp-post-grammaire", Dennis Snell
• « #gutenberg (résumé du chat des développeurs : 27 juin) », Jeffrey Paul
• "Introduction à Gutenberg", WordPress.org

Emballer

Que cela vous plaise ou non, Gutenberg arrive sur WordPress 5.0. Essayez de faire partie de la discussion en cours à ce sujet sur le Web. Cela aidera certainement. En fait, pendant que vous y êtes, essayez d'accélérer le processus de développement avec vos compétences. En attendant, faites-moi savoir si ce post a fait la lumière sur le sujet. Déposez vos questions et suggestions dans la section des commentaires. J'aimerais continuer la conversation.