Avec WordPress 5.0, WordPress est sur le point de subir l'un des changements les plus importants depuis très, très longtemps.

La nouvelle fonctionnalité ? Un tout nouvel éditeur de contenu par défaut, baptisé Gutenberg.t

L'éditeur de blocs Gutenberg remplacera complètement le Auparavant l'éditeur TinyMCE par défaut que vous utilisez depuis des années. En tant que tel, la façon dont vous créez du contenu sur votre site WordPress va complètement changer.

Pour aider à rendre cette transition aussi indolore que possible, nous avons créé ce tutoriel WordPress Gutenberg afin que vous puissiez être opérationnel dès que vous mettez à jour votre site vers WordPress 5.0.

En quoi l'éditeur de blocs WordPress Gutenberg est-il différent ?

Ok, au cas où vous seriez un peu confus quant à ce dont je parle, voici à quoi ressemble l'éditeur TinyMCE (cela devrait vous être assez familier !):

Éditeur TinyMCE

Et voici à quoi ressemble le nouvel éditeur de blocs Gutenberg :

Éditeur WordPress Gutenberg

Alors… quelle est la différence ?

Eh bien, le plus important est ce mot – “bloc”.

Plutôt que d'utiliser un seul champ pour tout votre contenu comme l'éditeur TinyMCE, chaque “chose” dans Gutenberg est un bloc séparé.

Alors:

  • Chaque paragraphe est un bloc séparé
  • Une image est un bloc séparé
  • Un devis est un bloc séparé
  • Une vidéo intégrée est un bloc séparé
  • …vous avez eu l'idée! Tout ce que vous pourriez éventuellement utiliser est son propre bloc

Question suivante – pourquoi les blocages sont-ils bénéfiques ? Pourquoi changer la façon dont les choses étaient?

Eh bien, l'éditeur de blocs Gutenberg facilite grandement la création de mises en page plus compliquées et l'utilisation de types de contenu plus intéressants. Au-delà de cela, c'est aussi beaucoup plus visuel car vous pouvez voir exactement à quoi ressemblera chaque bloc.

Par exemple, supposons que vous souhaitiez ajouter un bouton à votre message.

Avec l'éditeur TinyMCE, vous devez utiliser le Texte tab pour ajouter une classe CSS ou utiliser un shortcode à partir d'un plugin de bouton. Avec Gutenberg, il suffit d'ajouter le Bouton bloquer et vous pouvez voir le bouton juste là dans l'éditeur:

bouton gutenberg

L'autre gros avantage de Gutenberg et des blocs concerne les codes abrégés que j'ai mentionnés ci-dessus.

Les shortcodes ne sont pas un moyen très intuitif ou visuel d'ajouter du contenu. Avec Gutenberg, les développeurs de plugins peuvent créer leurs propres blocs au lieu de s'appuyer sur des shortcodes, ce qui simplifie beaucoup l'ajout de contenu de plugin.

Tutoriel WordPress Gutenberg : Utilisation du nouvel éditeur

Maintenant que vous avez quelques informations de base sur le nouvel éditeur, passons à la partie “comment faire” de ce guide.

Je vais diviser ce didacticiel de l'éditeur Gutenberg en deux parties.

Tout d'abord, je vais montrer comment utiliser Gutenberg pour faire le même genre de choses que vous déjà capable de faire avec l'éditeur TinyMCE. L'objectif de cette première section est de vous permettre de continuer à créer le même type de contenu que vous créez déjà sans interruption.

Après cela, j'irai un peu plus loin et vous montrerai des conseils de productivité avancés, ainsi que certains des Nouveau choses que Gutenberg vous laissera faire.

Comment créer un article de blog ou une page de base avec Gutenberg

Ajouter du texte normal à Gutenberg est simple. Comme avant, vous cliquez et tapez. La seule différence est que chaque fois que vous appuyez sur Entrée, Gutenberg créera désormais un nouveau bloc de paragraphe.

Pour formater votre texte (gras, alignement, etc.), vous verrez une barre d'outils flottante qui apparaît une fois que vous arrêtez de taper :

taper

Beaucoup de gens n'aiment pas cette approche de “barre d'outils flottante”. Donc, si vous préférez l'approche de la barre d'outils fixe de l'éditeur TinyMCE, vous pouvez utiliser le menu déroulant dans le coin supérieur droit pour “fixer” la barre d'outils en haut de l'éditeur. Sélectionnez simplement l'option pour Barre d'outils supérieure:

barre d'outils fixe

Comment insérer un nouveau bloc

Lorsque vous écrivez, vous pouvez créer automatiquement de nouveaux blocs en tapant.

Pour tout le reste – images, vidéos, titres, etc. – vous devrez ajouter un nouveau bloc.

Il existe plusieurs façons d'ajouter de nouveaux blocs :

  1. Pour ajouter un nouveau bloc en bas de l'éditeurvous pouvez cliquer sur l'icône plus dans le coin supérieur gauche de l'éditeur.
  2. Pour ajouter un nouveau bloc entre les blocs existantsvous pouvez passer votre souris sur l'endroit où vous souhaitez insérer le bloc et cliquer sur l'icône plus à cet endroit.

Ajouter un nouveau bloc

Une fois que vous avez cliqué sur l'un des plus icônes, une fenêtre contextuelle apparaîtra qui répertorie tous les blocs disponibles.

En haut de la fenêtre contextuelle, vous obtiendrez une liste des blocs que vous utilisez le plus souvent :

Blocs communs

Mais vous pouvez aussi :

  1. Utilisez le champ de recherche pour rechercher un bloc par son nom
  2. Faites défiler vers le bas pour voir les onglets accordéon pour toutes les catégories de blocs disponibles

Tutoriel WordPress gutenberg nouveaux blocs

Passons en revue quelques exemples…

Si vous souhaitez insérer une image…

Vous ajouteriez le Image bloquer. Ensuite, vous pouvez utiliser les options pour choisir d'où obtenir l'image :

bloc d'images

Si vous souhaitez intégrer une vidéo YouTube…

Vous ajouteriez le Youtube bloquer. Ensuite, il vous suffit de coller l'URL de la vidéo et vous verrez un aperçu en direct :

wordpress gutenberg guide 10 - Sabma Digital

Si vous souhaitez insérer un titre (h2, h3, etc.)

Vous pouvez ajouter le Titre bloc et choisissez le niveau de titre dans la barre d'outils :

wordpress gutenberg guide 11 - Sabma Digital

Ou, vous pouvez également choisir un bloc de paragraphe existant et utiliser la barre d'outils pour le “convertir” en bloc de titre (ou un autre type de bloc – comme une citation):

wordpress gutenberg guide 12 - Sabma Digital

Comment configurer un bloc

Pour les choses de base comme le gras, l'italique, l'alignement, etc., vous utiliserez la barre d'outils.

Cependant, pour d'autres paramètres de bloc, vous utiliserez le Bloquer onglet de la barre latérale à droite.

Par exemple, si vous ajoutez un Bouton block, vous pouvez utiliser la barre latérale à droite pour changer ses couleurs :

wordpress gutenberg guide 13 - Sabma Digital

Comment réorganiser le contenu

Dans l'éditeur TinyMCE, vous deviez utiliser le copier-coller si vous vouliez réorganiser le contenu.

Avec Gutenberg, vous avez deux options :

  • Flèches haut/bas qui déplacent un bloc vers le haut ou vers le bas d'un endroit
  • Fonctionnalité de glisser-déposer qui vous permet de faire glisser un bloc n'importe où

Pour activer ces commandes, survolez le bloc que vous souhaitez déplacer.

wordpress gutenberg guide 14 - Sabma Digital

Si vous souhaitez utiliser la fonctionnalité glisser-déposer, vous devez passer votre souris sur le six points entre les flèches. Ensuite, vous pourrez glisser-déposer comme ceci :

wordpress gutenberg guide 15 - Sabma Digital

Comment configurer les informations de base sur les publications (catégories, slug, etc.)

Les étapes ci-dessus devraient vous donner tout ce dont vous avez besoin pour créer des publications et des pages de base.

Mais qu'en est-il des informations en coulisse telles que :

  • Bloc d'URL
  • Catégories
  • Mots clés
  • Etc.

Pour configurer toutes ces informations, vous pouvez utiliser le Document de la barre latérale, qui agit de manière très similaire à la barre latérale de l'éditeur TinyMCE :

wordpress gutenberg guide 16 - Sabma Digital

Qu'en est-il des plugins comme Yoast SEO ?

Vous avez probablement d'autres plugins que vous devrez configurer poste par poste. Des exemples courants seraient les plugins SEO, les plugins de médias sociaux, etc.

Alors, comment ça marche?

Eh bien, certains plugins – comme Yoast SEO – ont déjà intégré le support de Gutenberg. Pour accéder aux paramètres Yoast SEO ou à d'autres plugins avec un tel support, vous pouvez cliquer sur l'icône dans le coin supérieur droit. Ensuite, vous pourrez configurer le plugin dans la barre latérale :

wordpress gutenberg guide 17 - Sabma Digital

Pour les autres plugins, vous pourrez toujours utiliser les “méta-boîtes” qui apparaissent sous l'éditeur de texte, comme avant :

wordpress gutenberg guide 18 - Sabma Digital

Cinq conseils plus avancés pour utiliser l'éditeur de blocs Gutenberg

Le didacticiel de l'éditeur Gutenberg ci-dessus vous aidera à continuer à créer le même type de contenu que celui que vous avez déjà créé avec l'éditeur TinyMCE.

Voyons maintenant quelques astuces plus avancées pour tirer le meilleur parti de l'éditeur Gutenberg.

1. Apprenez les raccourcis clavier pour une meilleure productivité

Parce que tout est un bloc séparé à Gutenberg, il y a beaucoup plus de “clics de souris” pour faire avancer les choses. Cela signifie un travail plus lent, surtout au début.

La meilleure façon d'éliminer ce problème est d'apprendre les raccourcis clavier de l'éditeur Gutenberg. Ceux-ci vous permettront d'ajouter ou de supprimer rapidement des blocs selon vos besoins.

Pour ouvrir la liste complète des raccourcis, utilisez le Maj + Alt + H raccourci:

wordpress gutenberg guide 19 - Sabma Digital

2. Blocs d'insertion rapide avec barre oblique

Plutôt que d'utiliser la fenêtre contextuelle d'insertion de bloc chaque fois que vous souhaitez ajouter un bloc, une méthode plus rapide consiste simplement à taper “/” dans un bloc vide et à rechercher le bloc par son nom.

Voici un exemple :

wordpress gutenberg guide 20 - Sabma Digital

3. Faites glisser des images de votre bureau vers Gutenberg

Pour accélérer l'ajout d'images, vous pouvez les faire glisser directement de votre bureau vers un endroit spécifique de l'éditeur. Gutenberg les téléchargera automatiquement dans votre médiathèque :

wordpress gutenberg guide 21 - Sabma Digital

4. Utilisez le bloc de colonnes pour des mises en page plus compliquées

Si vous souhaitez créer des mises en page plus compliquées, Gutenberg inclut un Colonnes bloquer. Une fois que vous avez ajouté le bloc de colonnes, vous pouvez ajouter autres blocs à l'intérieur de celui-ci :

wordpress gutenberg guide 22 - Sabma Digital

Pour plus de flexibilité avec les mises en page, vous pouvez installer le Plugin Kadence Blocks. En parlant de…

5. Profitez des plugins de blocs tiers

L'un des avantages de Gutenberg est que vous pouvez utiliser des plugins tiers pour ajouter de nouveaux blocs. De nombreux développeurs travaillent à créer de nouveaux blocs de contenu et de mise en page, ce qui peut aider à étendre les fonctionnalités de Gutenberg. Quelques bons pour commencer sont:

le Plugin Gutenberg Cloud est également un projet intéressant qui vous permet d'installer des blocs spécifiques à partir d'une variété de développeurs.

Au-delà de cela, certains plugins que vous utilisez déjà ajouteront des blocs pour remplacer les shortcodes. Par exemple, si vous avez une boutique WooCommerce, vous pourrez insérer des produits WooCommerce dans votre contenu à l'aide d'un nouveau bloc.

Qu'advient-il de votre ancien contenu après la mise à jour vers WordPress 5.0 ?

Si vous avez déjà un site WordPress, il est naturel de se demander ce qu'il adviendra de tout le contenu que vous avez déjà créé avec l'éditeur TinyMCE.

Ne vous inquiétez pas, l'équipe principale n'a pas oublié votre ancien contenu.

Voici comment cela va fonctionner.

Supposons que vous ayez un article créé à l'aide de l'éditeur TinyMCE qui ressemble à ceci :

petit message

Lorsque vous passez à WordPress 5.0 et à l'éditeur de blocs Gutenberg, WordPress mettra tout l'ancien contenu dans un seul Classique bloquer. Le bloc Classic est essentiellement l'éditeur TinyMCE… juste à l'intérieur de l'interface Gutenberg.

Ainsi, plutôt que chaque élément soit un bloc séparé, tout est juste dans ce bloc classique. Il ressemble à ceci :

bloc classique

Si vous avez besoin de modifier le contenu, vous pouvez soit le modifier dans le bloc Classic comme vous le feriez avec l'éditeur TinyMCE :

convertir des blocs

Ou, vous pouvez également choisir l'option de Convertir en blocs. Une fois que vous avez choisi cette option, Gutenberg divisera tout votre ancien contenu en blocs séparés et vous pourrez travailler avec lui comme si vous aviez créé le message à partir de zéro avec Gutenberg.

Devez-vous utiliser l'éditeur Gutenberg ? Pouvez-vous continuer à utiliser l'éditeur TinyMCE ?

Vous faites ne pas devez utiliser le nouvel éditeur de blocs Gutenberg. Alors qu'il deviendra l'éditeur par défaut dans WordPress 5.0, il y a aussi un officiel Plug-in de l'éditeur classique cela vous permettra de continuer à utiliser l'éditeur original TinyMCE que vous connaissez déjà. De plus, l'équipe principale de WordPress continuera à prendre officiellement en charge l'éditeur TinyMCE jusqu'à au moins fin 2021.

Tout ce que vous avez à faire est d'installer le plugin de WordPress.org. Une fois activé, il désactivera l'éditeur de blocs Gutenberg et vous créerez du contenu exactement comme vous le faisiez avant WordPress 5.0.

Si vous le souhaitez, le plugin a également une autre option qui vous permet d'utiliser les deux l'éditeur TinyMCE et l'éditeur de blocs Gutenberg et basculez entre eux contenu par contenu.

Pour activer ce paramètre, accédez à Paramètres → Écriture et choisissez l'option pour Utilisez l'éditeur de blocs par défaut et incluez des liens facultatifs vers l'éditeur classique :

Désactiver l'éditeur Gutenberg

Il y a votre tutoriel WordPress Gutenberg Editor !

Il y a eu beaucoup de débats dans la communauté WordPress à propos du nouvel éditeur de blocs Gutenberg.

Nous n'essayons pas de déterminer si c'est une bonne ou une mauvaise chose. Tout ce que nous voulons faire, c'est nous assurer que vous êtes toujours en mesure d'avoir une excellente expérience WordPress une fois WordPress 5.0 livré, ce que nous espérons que ce didacticiel de l'éditeur Gutenberg vous aidera.

Et si vous recherchez un autre type d'éditeur qui vous aidera à créer un contenu plus compliqué, vous voudrez peut-être consulter notre article sur les meilleurs constructeurs de pages WordPress par glisser-déposer.

Avez-vous d'autres questions sur le nouvel éditeur de blocs Gutenberg ? Laissez un commentaire et nous essaierons de vous aider !