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

Une analyse approfondie du nouvel éditeur Gutenberg et de son impact sur le développement Web WordPress. Dans cet article, vous apprendrez quelques astuces pratiques qui vous seront utiles, surtout si vous utilisez Gutenberg pour la première fois.

Il semble que Gutenberg ait été un terme de controverse dans le monde de WordPress ces derniers temps. Salué comme le changement le plus important de WordPress 5.0cette année, l’éditeur de 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 la vision de Gutenberg. Donc, je vais essayer de mettre une partie de la confusion pour se reposer une fois pour toutes.

Dans cet article, je couvrirai les points suivants:

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

1. Qu’est-ce que Gutenberg?

Nommé d’après Johannes Gutenberg, qui a inventé l’imprimerie mécanique, Gutenberg a été présenté au monde par Matt Mullenweg à WordCamp Europe en 2017 . Essentiellement, Gutenberg est un nouvel éditeur WordPress, doté de dizaines de fonctions de pointe. Il simplifie la création et la modification du site Web pour l’utilisateur moyen non technique.

Il a été plusieurs fois récompensé, 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 dans le cercueil pour WordPress. En dehors de tout cela, Gutenberg sera bien plus qu’un éditeur pour WordPress (dont je parlerai plus loin).

Il permet aux créateurs de sites Web de créer un site Web en utilisant des 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 sectionet figure, générant du HTML solide. À l’heure où nous écrivons, Gutenberg est toujours un plugin. Cependant, la communauté prévoit de la fusionner avec WordPress 5.0 cette année.

2. Plus qu’un éditeur

Gutenberg est plus qu’un éditeur, car il vous permet de gérer le contenu du site Web dans des blocs ou des blocs personnalisables. Vous n’avez pas besoin de parler couramment HTML ou d’écrire des codes courts. Vous pouvez contrôler l’intégralité de la mise en page d’un site Web (à la fois en amont et en aval) à partir d’une seule console.

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

Est-ce que cela signifie 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. Gutenberg est peu susceptible de remplacer complètement ces plugins. Vous pouvez continuer à les utiliser même lorsque Gutenberg devient l’éditeur par défaut.

3. Qu’est-ce que Gutenberg change dans WordPress?

L’éditeur Gutenberg a pour seul objectif de fournir une alternative à l’éditeur de texte ouvert actuel, sans parler des codes courts difficiles à mémoriser, avec une interface utilisateur agile et visuelle. Donc, contrairement à l’éditeur WordPress actuel, vous n’avez pas à:

• importer des images, des fichiers multimédia et des fichiers approuvés à partir de la bibliothèque multimédia ou ajouter des codes abrégés HTML;
• copier et coller des liens pour incorporer;
• écrire des codes courts pour les actifs spécialisés de différents plugins;
• créer des images en vedette à 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. Cela change cependant la façon dont les propriétaires de sites Web (ou les créateurs) interagissent avec elle. Au lieu de beaucoup de shortcodes et de méta-boîtes, vous utiliserez des blocs simples.

Quels sont les blocs?

Considérons un bloc comme l’unité la plus élémentaire (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, audio, vidéo, en-têtes, incorporations, codes personnalisés, paragraphes, séparateurs et boutons, se transformera en blocs distincts. Parce que vous pouvez faire glisser et déposer chaque bloc, il est 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 «Ajouter de nouveaux» plugins dans votre tableau de bord WordPress. Je vous recommande de l’installer dans votre environnement de stockage. 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. Allez dans le 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 Gutenberg à la longueur

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

A. AJOUTER UN NOUVEAU

Allez dans «Messages» dans la barre de menu de gauche de votre tableau de bord WordPress. Le nouveau poste sera lancé à Gutenberg en premier. Vous pourrez ensuite l’éditer dans l’éditeur classique et dans Gutenberg.

B. MODIFIER

Allez dans le menu « Posts », et passez la souris sur un message enregistré pour voir l’option de choisir entre les deux éditeurs. Bien que l’option classique de l’éditeur soit disponible pour le moment, elle sera probablement supprimée avec le lancement de WordPress 5.0.

C. PASSER D’UN ÉDITEUR À L’AUTRE

Vous pouvez également basculer entre les deux éditeurs lors de l’édition d’un article. Cliquez sur le menu déroulant dans le coin supérieur droit pour basculer entre le mode éditeur visuel et l’éditeur de texte (code). Vous pouvez également utiliser le raccourci Ctrl+ Shift+ Alt+ Mpour 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 situé 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 article entier. Vous pouvez également voir le nombre de titres, paragraphes et blocs en un seul clic. Cliquez sur l’icône d’information (i) dans la zone supérieure gauche.

F. REFAIRE ET ANNULER

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

G. PARAMÈTRES DE LA PAGE ET DU 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:

• Faire un post public ou privé.
• Changer la date de publication
• Sélectionnez le format d’un article.
• Ajouter ou modifier des catégories et des balises.
• Télécharger des images en vedette.
• Ecrivez un extrait.
• Activer et désactiver les commentaires, les pingbacks et les rétroliens.

H. COLLEZ SUR LA PREMIÈRE PAGE

Cette fonctionnalité sera pratique si vous utilisez un blog. Lorsque vous l’activez dans les paramètres du document, ce message apparaîtra toujours sur la page d’accueil de votre blog. Et éteignez-le simplement pour le retirer de la page d’accueil.

I. UTILISATION DE BLOCS

Comme mentionné précédemment, les blocs constituent l’unité fondamentale du nouvel éditeur Gutenberg. Pour utiliser Gutenberg efficacement, 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 refaire / annuler pour ouvrir le menu des blocs.

Blocs communs

Les blocs communs vous permettent d’ajouter les éléments nécessaires à la création d’une interface utilisateur riche.

• Paragraphe
  Le bloc de paragraphe comporte 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 d’autres classes CSS ici.

• Image
  Cet élément est livré avec une nouvelle fonctionnalité qui vous permet de basculer entre les présentations de galerie et d’image. Vous bénéficiez également d’un meilleur contrôle sur les images, car vous pouvez définir des dimensions de taille particulières, des ratios de taille en pourcentage et une description de texte alternative pour chaque image.

• Les autres éléments incluent :
  • citations,
  • des galeries,
  • images de couverture,
  • rubriques
  • listes,
  • l’audio,
  • des dossiers,
  • sous-titres,
  • vidéo.

Mise en forme

Comme son nom l’indique, ces blocs comprennent tous les outils de formatage.

• Tableau
  Ajout d’ un tableau à l’ aide du code HTML personnalisé est un travail fastidieux. Avec le bloc de table, la tâche est beaucoup plus facile. Vous pouvez ajouter et supprimer des lignes et des colonnes d’une table sans coder.

• 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.

• Les autres éléments incluent :
  • code,
  • classique,
  • préformaté,
  • tirer une citation,
  • verset.

Disposition

Utilisez votre imagination pour créer une mise en page magnifique en utilisant ce bloc. Chaque élément de ce bloc comporte d’excellentes fonctionnalités.

• Bouton
  Vous pouvez ajouter des boutons tels que «S’abonner maintenant» et «Acheter maintenant» à l’aide de 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.

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

• Les autres éléments incluent :
  • Lire la suite,
  • saut de page,
  • séparateur,
  • spacer

Widgets

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 publications dans une vue de grille ou une vue de liste, les organiser en catégories et les classer par ordre alphabétique ou par date de publication. Vous pouvez également choisir d’afficher la date de publication.

Intégrations

Vous pouvez facilement accéder à toutes les incorporations en utilisant 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, et Gutenberg intégrera le code pour vous. Voici un exemple d’insertion d’un lien YouTube:

Blocs réutilisables

Les blocs réutilisables améliorent la convivialité des développeurs. Vous pouvez convertir n’importe quel bloc en bloc réutilisable afin de pouvoir l’utiliser à un autre endroit. Vous pouvez éditer le même et le sauvegarder 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 dans les options «Shared Block». Plus important encore, vous pouvez revenir à un bloc régulier à 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 trouver un bloc par nom.

J. Modifier le bloc

Pour éditer 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

En utilisant cette fonctionnalité, vous pouvez insérer un nouveau bloc à tout moment. Lorsque vous déplacez votre souris sur un bloc, vous verrez une icône plus (+). Cliquez dessus pour insérer un nouveau bloc.

L. Slash Autocomplete

La fonctionnalité de saisie semi-automatique Slash est disponible dans Gutenberg 1.1.0 et les versions ultérieures. Les chances sont que vous êtes déjà familier avec la fonctionnalité similaire dans Slack. Il a été ajouté pour réduire le nombre de pointages et de clics requis pour créer de nouveaux blocs.

Lorsque vous ouvrez un nouveau bloc, appuyez simplement sur la touche /(barre oblique) de votre clavier pour sélectionner l’une des options de saisie semi-automatique. Il ne fonctionne que dans le bloc de paragraphe par défaut, mais il pourrait faire 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. Gutenberg Avantages et inconvénients

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 gens qui recherchent ce genre de style et 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 d’élaborer intuitivement des mises en page complexes. Si vous êtes nouveau sur WordPress ou si vous n’en avez aucune connaissance, vous allez toujours l’aimer.
• L’éditeur Gutenberg lui-même fonctionne bien sur le mobile (c’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 chevronnés du mobile peuvent 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 une situation gagnant-gagnant pour les geeks et les utilisateurs non techniques.

LES INCONVÉNIENTS

• Pour l’instant, 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 constituer une préoccupation majeure pour certains utilisateurs de WordPress.
• Vous ne bénéficiez que d’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 compatibilité ascendante sera une préoccupation majeure pour la plupart des développeurs. Il va détruire 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 peuvent trouver difficile de travailler avec, en particulier au début. Ils devront réorganiser leurs réflexes pour s’habituer à la nouvelle UX.

• En raison du problème de compatibilité ascendante, vous devrez mettre à jour de nombreux plug-ins et thèmes pour vous assurer qu’ils sont entièrement compatibles avec le nouvel éditeur.
• Pour le moment, les blocs sont davantage axés sur le contenu. Par conséquent, Gutenberg manque de précision et de contrôle sur la présentation des sites Web personnalisés.
• Les shortcodes sont remplacés par des blocs de shortcode. Cependant, vous pourrez toujours ajouter des raccourcis depuis le bloc de widgets.
• Les méta-boîtes seront disponibles sous un nouveau nom et une nouvelle interface utilisateur. Les méta-boîtes contradictoires sont susceptibles de mener à 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 compatibles avec Gutenberg.
• Vous ne pourrez pas désactiver Gutenberg une fois qu’il sera intégré au noyau WordPress. Cependant, vous pouvez le désactiver en utilisant le plugin officiel à tout moment.

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 bien le considérer comme Facebook pour WordPress.

Vous n’avez pas besoin d’être un geek informatique pour publier des choses sur Facebook ou sur toute autre plateforme de médias sociaux. Gutenberg est juste un moyen d’apporter cette simplicité et cette flexibilité à WordPress, afin que les utilisateurs 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. Les gens (y compris moi-même) ont eu des problèmes avec son implémentation, mais bientôt nous aurons des thèmes, des plugins et des outils prêts pour Gutenberg qui apparaîtront partout. Néanmoins, vous devez commencer quelque part. Donc, vous pouvez aussi faire partie de ce changement depuis le début.

9. Dernières nouvelles et ressources supplémentaires

Si vous êtes intéressé par 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.

• Gutenberg News
• Hub de Gutenberg
• Gutenberg Times

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

• « Gutenberg, ou le bateau de Thesus », Matías Ventura Bausero
• « Présentation technique de l’éditeur », Matías Ventura Bausero, WordPress.org
• « Principes de conception », WordPress.org
• « Wp-post-grammar », Dennis Snell
• « #Gutenberg (résumé de discussion de Dev: le 27 juin) », Jeffrey Paul
• « Introduction à Gutenberg », WordPress.org

Emballer

Que vous le vouliez ou non, Gutenberg vient sur WordPress 5.0. Essayez de faire partie de la discussion en cours 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 cet article a permis de mieux comprendre le sujet. Supprimez vos requêtes et suggestions dans la section des commentaires. J’aimerais continuer la conversation.

par Manish Dudharejia source : https://www.smashingmagazine.com/