Tutoriel Gutenberg : Comment utiliser le nouvel éditeur de blocs WordPress

Nommé d'après l'inventeur de la presse à imprimer, Johannes Gutenberg, le nouvel éditeur de blocs WordPress Gutenberg a fait ses débuts dans la version WordPress 5.0 en tant qu'éditeur par défaut pour WordPress.

La mission est simple, créer une nouvelle expérience d'écriture et d'édition avec WordPress.

Doté de blocs, l'éditeur Gutenberg offre une expérience unique dans la création de contenu riche en médias avec WordPress.

Il apporte de nombreuses fonctionnalités natives à l'éditeur qui, avec l'éditeur classique, nécessiteraient des plugins pour accomplir des tâches.

Dans un instant, je vais vous expliquer comment utiliser l'éditeur de blocs Gutenberg.

Travaillant avec de nombreux clients utilisant WordPress, peu d'entre eux ont été ravis de la transition difficile vers leur expérience d'édition.

Cela explique probablement pourquoi des millions d'utilisateurs de WordPress ont installé l'éditeur classique une fois que le choix leur a été retiré avec la sortie de Gutenberg.

Une partie de la justification pourrait être la compatibilité avec des thèmes plus anciens, une autre partie simplement l'indignation de l'utilisateur ou le manque de connaissances sur l'utilisation de l'éditeur de blocs Gutenberg.

J'espère qu'après avoir parcouru cet article, pour la suite, vous serez à l'aise avec l'éditeur de blocs.

Pas à pas : Comment utiliser l'éditeur de blocs Gutenberg ?

Cela commence par la création d'une page ou d'un article. Quelque chose que vous connaissez déjà.

Lorsque vous ajoutez une nouvelle page ou un nouveau message, la première chose que vous devriez remarquer est cette barre d'outils.

Sur la gauche, nous avons la barre d'outils + Ajouter des blocs. C'est l'un des endroits où vous pouvez ajouter des blocs à votre contenu.

Vous pouvez également ajouter un bloc en cliquant sous le dernier bloc, puis cliquez sur l'icône + qui apparaît.

Sinon, survolez entre les blocs, l'icône Ajouter des blocs apparaît, cliquez dessus pour ajouter le bloc.

Viennent ensuite les boutons Annuler et Rétablir.

L'icône suivante de la barre d'outils supérieure affiche la structure de votre contenu.

Vient ensuite le bloc de navigation

Si et quand votre contenu grandit avec de nombreux blocs, vous pouvez accéder aux blocs à partir d'ici. Cool n'est-ce pas.

Sur la droite,

Celles-ci sont assez simples, enregistrer le brouillon, prévisualiser votre message (l'ouvre dans un nouvel onglet) et publier.

L'icône suivante bascule l'affichage des paramètres. Il affiche ou masque les volets de droite.

Si les paramètres sont visibles, cliquez dessus pour les masquer pour un éditeur plus large sans distraction. Cliquez à nouveau dessus pour afficher les paramètres.

À la fin de la barre d'outils se trouvent trois points verticaux. Cela vous permet de masquer ou d'afficher plus d'outils et d'options.

Alors, que pouvez-vous faire exactement avec plus d'outils et d'options ?

• Vous avez la barre d'outils - accédez à tous les outils de bloc et de document en un seul endroit.
• Mode projecteur. Vous permet de vous concentrer sur un bloc à la fois
• Mode plein écran. Faites exploser votre éditeur pour une expérience d'édition totale sans distraction.
• Basculez entre l'éditeur visuel - ce que vous voyez maintenant, et l'éditeur de code - si vous avez besoin d'écrire du code que les blocs Code et HTML ne peuvent pas gérer.
• Gérer les blocs réutilisables
• Raccourcis clavier et
• Copiez tout le contenu sur l'éditeur.

Les blocs Gutenberg

Jusqu'à présent, vous avez continué à voir des blocs, mais quels sont-ils ?

Nous prendrons le long chemin pour voir comment ils fonctionnent, et j'espère que cela aura alors un sens, et vous pourrez lui donner une définition basée sur votre compréhension de celui-ci.

Il existe six catégories de blocs dans Gutenberg, notamment les blocs les plus utilisés, les blocs communs, le formatage, les éléments de mise en page, les widgets et les intégrations.

Lors de la création de contenu, avec l'éditeur classique, il vous suffisait de saisir du contenu dans les zones de texte.

Avec le nouvel éditeur, vous utiliserez des blocs organisés en fonction du type de contenu. Pour ajouter du contenu textuel, il faut le bloc texte/paragraphe, le bloc Images – Images, Html, le bloc HTML.

C'est quelque chose de différent de l'éditeur classique où vous insérez tout votre contenu au même endroit.

Utilisation des outils de bloc

Chaque bloc a ses outils que vous pouvez utiliser lors de la création et de la modification de contenu.

Contrairement à l'éditeur classique qui avait tous les outils visibles.

Pour accéder à ces outils, cliquez sur le contenu du bloc. Nous utiliserons le paragraphe/contenu puisque c'est celui que vous utiliserez souvent.

Lorsque vous cliquez sur le texte ou le contenu d'un bloc, une boîte à outils s'ouvre au-dessus du contenu.

Les outils que vous verrez sont exclusifs au bloc que vous utilisez, alors ne vous attendez pas à voir les mêmes outils lorsque vous cliquez sur un bloc média.

Le bloc de paragraphe, par exemple, dispose d'outils de mise en forme du texte aligner à gauche, aligner au centre, aligner à droite, gras, italique, insérer un lien hypertexte et texte barré.

De plus, d'autres outils de formatage sont ajoutés par d'autres plugins que vous installez pour étendre la fonctionnalité des blocs par défaut.

Les deux fonctionnalités du kit d'outils de bloc qui traversent les blocs sont le " bloc de transformation " au début, puis à la fin, vous devriez voir l'icône " Plus d'options" - trois points verticaux - qui contient plus de paramètres pour le bloc vous travaillez avec.

Transformer un bloc Gutenberg

Pour transformer un bloc, cliquez sur le bloc comme vous l'avez vu dans le bloc de paragraphe ci-dessus.

En supposant que nous voulions transformer notre premier paragraphe en citation, vous cliquez dessus, puis cliquez sur l'icône Transformer en puis choisissez le nouveau bloc vers lequel vous souhaitez le transformer.

Transformer le bloc de paragraphe en citation ressemble maintenant à ceci.

Le bouton Plus d'options

L'autre bouton du kit d'outils de bloc est l'icône " Plus d'options " - les trois points verticaux. Cliquez sur n'importe quel bloc pour le voir.

Avec Plus d'options, vous pouvez faire plus avec votre bloc comme; Masquer les paramètres du bloc, Dupliquer le bloc, Insérer le bloc avant ou après les blocs précédent et suivant, modifier le bloc au format HTML, ajouter le bloc aux blocs réutilisables et enfin, Supprimer ou supprimer le bloc.

Changer le permalien d'un article ou d'une page avec l'éditeur de blocs Gutenberg

Cliquez sur le titre du message ou de la page. Au-dessus, le lien sera affiché.

Cliquez sur le bouton Modifier, puis modifiez votre lien, puis cliquez sur Enregistrer

Paramètres de document et de bloc sur Gutenberg Block Editor

À droite de chaque publication ou page de Gutenberg se trouve un volet avec deux onglets.

Le volet de document contient les paramètres à l'échelle du document pour la page ou la publication, y compris le statut et la visibilité, les auteurs de publication, les balises, l'image caractéristique, les discussions - pour autoriser les commentaires, les catégories et les paramètres liés au plug-in pour les publications et/ou les pages.

Le volet de bloc contient un paramètre spécifique au bloc.

Cliquez sur le bloc dans la zone de contenu, puis dans le volet de droite, cliquez sur le volet Bloc.

Conclusion

Nous avons couvert une poignée d'informations sur l'éditeur Gutenberg Blocks.

J'espère qu'avec cette connaissance, il devrait être moins intimidant de l'utiliser pour la création et la publication de contenu.

Utilisez-vous le nouvel éditeur de blocs ? Quelle est votre expérience avec cela?

Vous voudrez peut-être également convertir les publications WordPress existantes en blocs Gutenberg ?