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 significatif de WordPress 5.0 cette 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 me reposer une fois pour toutes.

Dans cet article, je couvrirai ce qui suit:

1. Qu'est-ce que Gutenberg?
2. Plus qu'un éditeur
3. Que fait Gutenberg dans WordPress?
4. Installation de Gutenberg
5. Exploration de Gutenberg
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é la presse à imprimer 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 l'édition de sites Web pour les utilisateurs non techniques moyens.

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 la section et la figure produisant un HTML solide. À l'heure où nous écrivons, Gutenberg est toujours un plugin. Toutefois, la communauté envisage 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 d'un site Web dans des blocs ou des blocs personnalisables. Vous n'avez pas besoin de parler couramment le 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 arrière et en avant) à partir d'une console unique.

Ce nouvel éditeur tente de combiner les meilleures fonctionnalités des deux plugins de constructeur de pages (19459057] Divi 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.

Cela signifie-t-il la fin des plug-ins 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, sans parler des codes courts difficiles à mémoriser, avec une interface utilisateur agile et visuelle. Ainsi, contrairement à l'éditeur WordPress actuel, vous n'avez pas à:

• importer des images, des fichiers multimédia et approuvés depuis la médiathèque ou ajouter des codes abrégés HTML;
• copier et coller des liens pour des incorporations; les actifs spécialisés de différents plugins;
• créent des images à ajouter en haut d'un article ou d'une page;
• ajoutent des extraits pour les sous-titres;
• ajoutent des widgets pour le contenu sur le côté d'une page. 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.

  Que sont les blocs?

  Considérons un bloc comme l'unité la plus élémentaire (et 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 incorporations, les codes personnalisés, les paragraphes, les séparateurs et les boutons deviendra des blocs distincts. Comme vous pouvez faire glisser et déposer chaque bloc, il est beaucoup plus facile de les identifier 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 la gauche
  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 plug-in Gutenberg
  6. Cliquez sur le bouton "Installer maintenant".
  7. Cliquez sur le bouton "Activer" pour lancer le plugin.

  

  5. Explorer Gutenberg At Length

  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 nouveau post intitulé "Gutenberg Demo". Vous pouvez vous exercer 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 lancé à Gutenberg en premier. Vous pouvez plus tard le modifier à la fois 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. Basculer entre les éditeurs

  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 (par exemple, 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 d'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. Rétablir 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 page et de document

  Ceci 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 un message public ou privé.
  • Modifier la date de publication.
  • Sélectionnez le format d'un article.
  • Ajoutez ou modifiez des catégories et des balises.
  • Rédiger un extrait
  • Activer et désactiver les commentaires, les pingbacks et les rétroliens

  
  

  H. Stick to Front Page

  Cette fonctionnalité vous sera utile 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 (+) situé à 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.

  • 
    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 avez également plus de contrôle sur les images, car vous pouvez définir des dimensions, des proportions en pourcentage et une description de texte différente pour chaque image.

  
  

  • D'autres éléments incluent :
    • citations,
    • galeries,
    • images de couverture,
    • titres,
    • listes,
    • audio,
    • fichiers,
    • sous-titres,
    • vidéo.

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

  • Tableau
    L'ajout d'une table à l'aide d'un code HTML personnalisé était un travail fastidieux. Avec le bloc de table, la tâche est beaucoup plus facile. Vous êtes en mesure d'ajouter et de supprimer des lignes et des colonnes d'un tableau 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.

  

  • :
    
    • code,
    • classique,
    • préformaté,
    • citation tirée,
    • vers.

  Mise en page

  bloc. Chaque élément de ce bloc comporte d'excellentes fonctionnalités.

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

  
  

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

  
  

  • D'autres éléments incluent :
    
    • En savoir plus,
    • page break,
    • séparateur,
    • spacer.

  Widgets

  Ces blocs vous permettent d'ajouter une archive , les catégories, les derniers messages et les derniers commentaires avec 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 de liste, les organiser en catégories et les classer par ordre alphabétique ou selon la 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 très 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

  . 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 comme un 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 "Shared Block". Plus important encore, vous pouvez revenir à un bloc normal à tout moment.

  

  Les plus utilisés

  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. Edit Block

  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 au format HTML, dupliquer et ajouter aux blocs réutilisables.

  
  

  K. Insert Blocks

  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 la quantité de pointage et de clic requise pour créer de nouveaux blocs.

  Lorsque vous ouvrez un nouveau bloc, appuyez simplement sur / (barre oblique) sur votre clavier pour sélectionner l'une des options de saisie semi-automatique. .