Comment utiliser l'éditeur de blocs de WordPress (tutoriel Gutenberg)

L'éditeur de blocs de WordPress est l'outil par défaut que nous utilisons désormais pour rédiger du contenu et éditer des sites. Il a été lancé en 2019 et est affectueusement appelé "Gutenberg". Ce nouvel éditeur remplace l'ancien éditeur classique qui l'a précédé. L'éditeur de blocs est exceptionnellement simple et intuitif à utiliser, et il est capable de créer du contenu et d'éditer des sites WordPress.

Quelle est la différence entre l'éditeur de blocs (Gutenberg) et l'éditeur classique ?

Avant de nous plonger dans l'éditeur de blocs, comparons et comprenons les différences entre l'éditeur de blocs Gutenberg et l'ancien éditeur classique.L'éditeur classique de WordPress est présenté ci-dessous :

Il s'agit d'un éditeur de texte avec quelques options de formatage de base. L'éditeur de blocs de WordPress est illustré ci-dessous :

Comme vous pouvez le constater, il s'agit de deux éditeurs complètement différents pour créer du contenu dans WordPress. L'ancien éditeur classique est un éditeur de texte avec des boutons de formatage similaires à ceux de Microsoft Word. Le nouvel éditeur utilise une approche différente appelée "blocs" (d'où le nom "Block Editor").

Les blocs sont des éléments de contenu qui peuvent être ajoutés aux écrans d'édition pour créer des mises en page. Chaque élément ajouté à un article ou à une page est un bloc. Par exemple, des blocs peuvent être ajoutés pour les paragraphes, les images, les vidéos, les galeries, l'audio, les listes, etc. Tous les éléments de contenu courants ont des blocs et d'autres peuvent être ajoutés par le biais de plugins WordPress.

Quels sont les avantages de l'éditeur de blocs de WordPress par rapport à l'éditeur classique ?

L'éditeur de blocs de WordPress permet d'ajouter facilement différents types de contenu aux articles et aux pages. Par exemple, auparavant, si vous vouliez ajouter des tableaux au contenu en utilisant l'éditeur classique, un plugin de tableau séparé était nécessaire. Avec l'éditeur de blocs, vous pouvez simplement ajouter un bloc de tableau, sélectionner les colonnes et les lignes, et commencer à ajouter du contenu.

Les éléments de contenu peuvent être déplacés vers le haut et vers le bas, édités en tant que blocs individuels, et le contenu multimédia peut être créé facilement. Mieux encore, l'éditeur de blocs WordPress est facile à utiliser et à apprendre. C'est un avantage considérable pour tous les débutants de WordPress qui commencent leur premier blog ou qui construisent un site web d'entreprise.

Cela dit, voyons comment utiliser l'éditeur de blocs de WordPress pour créer du contenu de qualité comme un pro.

Utiliser Gutenberg - l'éditeur de blocs de WordPress

L'éditeur de blocs est conçu pour être intuitif et flexible. Bien qu'il soit différent de l'ancien éditeur de WordPress, il fait tout ce que vous pouvez faire dans l'éditeur classique.

Création d'un nouvel article de blog ou d'une nouvelle page à l'aide de l'éditeur de blocs

Créez un nouvel article de blog ou une nouvelle page comme d'habitude. Il suffit de cliquer sur l'administrateur WordPress dans le menuPostes " Ajouter un nouveau posteMenu. Si vous souhaitez créer une page, allez dans Page"Ajouter un nouveauLe menu.

Cette opération lance l'éditeur de blocs.

Comment ajouter un bloc dans l'éditeur de blocs

Le premier bloc de chaque article ou page est le titre. Vous pouvez utiliser la souris pour vous déplacer sous le titre ou appuyer sur la touche Tabulation de votre clavier pour déplacer le curseur vers le bas et commencer à écrire.

Par défaut, le bloc suivant est un bloc de paragraphe afin que l'utilisateur puisse commencer à écrire. Toutefois, si vous souhaitez ajouter d'autres types de contenu, rien de plus simple. Il suffit de cliquer sur le bouton "Ajouter un nouveau bloc" [+] dans le coin supérieur gauche de l'éditeur, ou de cliquer sur ce bouton en dessous ou à droite d'un bloc existant pour ajouter un nouveau bloc de contenu.

En cliquant sur ce bouton, le menu Ajouter un bloc s'affiche avec une barre de recherche en haut et les blocs fréquemment utilisés en bas. Vous pouvez cliquer sur les onglets pour parcourir les catégories de blocs ou saisir un mot clé pour rechercher rapidement un bloc spécifique.

Si vous ne souhaitez pas utiliser la souris pour cliquer sur les boutons, vous pouvez également utiliser des raccourcis clavier. Tapez d'abord / pour rechercher un bloc, puis appuyez sur la touche Entrée de votre clavier pour l'insérer.

Utilisation de blocs dans le nouvel éditeur

Chaque bloc possède sa propre barre d'outils, affichée en haut du bloc. Les boutons de la barre d'outils changent en fonction du bloc que vous modifiez. Par exemple, dans la capture d'écran ci-dessous, nous développons un bloc de paragraphe qui affiche des boutons de formatage de base tels que l'alignement du texte, le gras, l'italique, l'insertion d'un lien et d'autres options disponibles dans le menu à trois points.

Outre la barre d'outils, chaque bloc peut avoir ses propres paramètres, qui sont affichés dans la colonne de droite de l'écran d'édition. Ces paramètres varient en fonction du bloc en cours d'édition. Par exemple, le bloc Paragraphe permet de modifier le texte, l'arrière-plan, la couleur du lien et la mise en page.

Il est possible de déplacer les blocs vers le haut et vers le bas et de les réorganiser. Si vous souhaitez effectuer cette opération, il vous suffit de cliquer sur Glisser-déposer ou de cliquer sur les boutons Haut et Bas de la barre d'outils des blocs.

Organiser les blocs par groupes et par colonnes

L'éditeur de blocs est également doté d'outils pratiques pour gérer et organiser la mise en page de votre contenu. Plusieurs blocs peuvent être sélectionnés en cliquant dessus tout en maintenant la touche Majuscule de votre clavier enfoncée.

Ensuite, cliquez sur le bouton Type de bloc dans la barre d'outils pour convertir le bloc sélectionné en groupe ou en colonne. Des styles peuvent alors être appliqués à l'ensemble du groupe de blocs, par exemple pour modifier l'alignement ou l'espacement.

L'éditeur de blocs peut également ajouter des blocs de groupe ou de colonne vides. Ils peuvent être complétés ultérieurement par d'autres blocs.

Tout type de bloc peut être ajouté à chaque colonne selon les besoins. Cela vous permet de créer de belles mises en page pour les différentes colonnes utilisées.

Préserver et réutiliser les blocs dans Gutenberg

Le meilleur avantage de l'utilisation des blocs est qu'ils peuvent être sauvegardés et réutilisés. C'est particulièrement utile pour les propriétaires de sites web et les blogueurs qui ont souvent besoin d'ajouter des éléments de contenu spécifiques à leurs articles ou à leurs pages. Il suffit de cliquer sur le bouton de menu situé dans le coin supérieur droit de la barre d'outils de chaque bloc. Sélectionnez l'option "Créer un motif" dans le menu.

Attention :Vous pouvez également enregistrer des groupes et des colonnes entiers en tant que blocs réutilisables. Cela vous permet d'enregistrer des sections entières et de les utiliser rapidement lorsque vous en avez besoin plus tard. Pour enregistrer un bloc réutilisable, il suffit de cliquer sur l'option correspondante et une fenêtre s'ouvre. Dans cette fenêtre, vous devrez donner un nom au bloc afin de pouvoir le retrouver facilement lorsque vous en aurez besoin ultérieurement. Vous pouvez également choisir une catégorie pour enregistrer le bloc. De cette façon, vous pouvez gérer ces blocs réutilisables de manière plus organisée.

Ensuite, cliquez sur le bouton Créer pour enregistrer votre modèle. WordPress enregistrera votre motif et tous les blocs qu'il contient. Pour réutiliser votre modèle, il vous suffit d'éditer l'article ou la page à laquelle vous souhaitez l'ajouter. Ensuite, cliquez sur le bouton [+] Ajouter un bloc ou utilisez le raccourci clavier /. Le modèle peut être trouvé en tapant le nom que vous avez spécifié.

La fonctionnalité des modèles permet aux propriétaires de sites web d'ajouter plus facilement des éléments communs à leurs mises en page, tels que des bannières accrocheuses, des boutons de partage de médias sociaux, des bannières publicitaires, et bien d'autres choses encore. Le thème ou le plugin WordPress que vous avez choisi peut être fourni avec des modèles, ou vous pouvez aller dans la bibliothèque de modèles de blocs WordPress pour trouver des modèles partagés par d'autres et voir s'il y en a qui vous plaisent.

Publication et gestion des options dans l'éditeur de blocs Gutenberg

Chaque article WordPress contient de nombreuses métadonnées. Celles-ci comprennent des informations telles que la date de publication, les catégories et les étiquettes, les images vedettes, etc. Toutes ces options sont soigneusement placées dans la colonne de droite de l'écran de l'éditeur.

Options de plug-in dans Gutenberg

Les plugins WordPress peuvent intégrer leurs paramètres dans les écrans d'édition à l'aide de l'API de l'éditeur de blocs. Certains plugins populaires sont livrés avec leurs propres blocs. Par exemple.WPFormsLe meilleur plugin WordPress de construction de formulaires pour ajouter des formulaires à votre contenu à l'aide de blocs.

D'autres plugins WordPress peuvent également ajouter leurs paramètres à l'écran de l'éditeur de blocs. Par exemple, les plugins suivantsSEO tout-en-un pour WordPressComment permettre la modification des paramètres de référencement en bas de l'éditeur de blocs :

De même, si vous utilisez WooCommerce pour gérer une boutique en ligne, vous remarquerez qu'il dispose également de ses propres blocs. Ces blocs vous permettent d'ajouter des produits à n'importe quel article ou page de WordPress.

Ajout de quelques blocs courants à l'éditeur de blocs

Fondamentalement, l'éditeur de blocs est puissant et tout à fait capable de faire le travail que faisait l'ancien éditeur classique. De plus, en l'utilisant, votre travail deviendra plus rapide et plus fluide. Ce qui est encore plus impressionnant, c'est qu'il est livré avec encore plus de nouvelles fonctionnalités, telles que des options riches sans code pour concevoir du contenu facilement. Voici quelques blocs courants qui vous permettront de l'utiliser facilement.

1) Ajouter des images à l'éditeur de blocs de WordPress

L'éditeur de blocs de WordPress dispose d'un bloc d'images prêt à l'emploi. Il suffit d'ajouter le bloc et de télécharger le fichier image ou de le sélectionner dans la bibliothèque multimédia.

Il est également possible de glisser-déposer des images depuis votre ordinateur et l'éditeur créera automatiquement des blocs d'images. Après avoir ajouté une image, vous verrez les paramètres du bloc où vous pourrez ajouter des métadonnées sur l'image, telles qu'un texte alternatif, la taille de la résolution de l'image, et ajouter un lien vers l'image.

2. ajouter des liens dans l'éditeur de blocs

L'éditeur de blocs comprend plusieurs blocs dans lesquels vous pouvez ajouter du texte. Le plus couramment utilisé est le bloc paragraphe, qui dispose d'un bouton Insérer un lien dans la barre d'outils. Tous les autres blocs de texte couramment utilisés disposent également d'un bouton de lien dans la barre d'outils.

Les liens peuvent également être insérés à l'aide du raccourci clavier Commande + K sur un Mac ou CTRL + K sur un ordinateur Windows.

3. ajouter une galerie de photos à Gutenberg

Le bloc galerie fonctionne de la même manière que le bloc image. Ajoutez-le et téléchargez ou sélectionnez un fichier image.

4) Utiliser Gutenberg pour ajouter des shortcodes aux articles WordPress

Tous les codes courts utilisés dans l'éditeur classique fonctionnent parfaitement dans l'éditeur de blocs. Ils peuvent être insérés directement dans les blocs de paragraphes, ou vous pouvez choisir d'utiliser des blocs de codes courts spéciaux à cette fin.

Explorer d'autres blocs de contenu dans l'éditeur de blocs

L'éditeur Gutenberg promet de résoudre certains problèmes de convivialité de longue date dans WordPress en introduisant de nouveaux blocs.

1) Ajouter des images à côté d'un texte dans WordPress

Avec les anciens éditeurs, de nombreux utilisateurs n'étaient pas en mesure de placer des images à côté du texte. Cependant, il est désormais possible d'effectuer cette étape en utilisant des blocs de média et de texte.

Ce bloc simple contient deux blocs placés l'un à côté de l'autre, ce qui vous permet d'ajouter facilement des images accompagnées de texte.

2. ajouter des boutons aux articles et aux pages de WordPress

L'ajout de boutons aux articles ou pages de blog était un véritable casse-tête dans les éditeurs précédents. Il fallait parfois trouver un plugin spécial pour générer le shortcode du bouton, ou simplement passer en mode HTML pour écrire le code manuellement. Heureusement, l'éditeur Gutenberg dispose d'un bloc de boutons intégré qui vous permet d'ajouter des boutons à n'importe quel article ou page facilement et rapidement, vous n'avez donc plus à vous en soucier !

Vous pouvez ajouter des liens aux boutons, modifier les couleurs, etc.

3. ajouter de belles images de couverture aux articles de blog et aux pages d'atterrissage

Le bloc de couverture est une autre fonctionnalité intéressante. Il vous permet d'ajouter facilement une image de couverture ou une couverture d'arrière-plan avec des couleurs aux articles et aux pages. L'image de couverture est généralement plus large et sert souvent à décorer une nouvelle partie de la page ou le début d'un article. Elle est particulièrement belle et vous aide à créer des mises en page de contenu qui attirent l'attention.

Facile à utiliser, il suffit d'ajouter un bloc de couverture et de télécharger votre image préférée. Il est également possible d'ajouter une couleur de recouvrement à la couverture ou de la définir sur une image d'arrière-plan fixe, afin que les utilisateurs puissent créer un effet de parallaxe super cool lorsqu'ils font défiler la page.

4. créer des tableaux dans les articles

Ajouter des tableaux aux articles de WordPress n'est pas une tâche facile dans l'éditeur classique, il faut les créer avec l'aide d'un plugin, ou écrire son propre code CSS et HTML. Mais voici la bonne nouvelle : l'éditeur de blocs intègre désormais un bloc de tableau par défaut qui permet d'ajouter facilement et rapidement des tableaux aux articles et aux pages. Il suffit d'ajouter ce bloc, puis de sélectionner le nombre de colonnes et de lignes que vous souhaitez insérer, et le tour est joué !

Vous pouvez maintenant commencer à ajouter des données aux lignes du tableau. Des lignes et des colonnes supplémentaires peuvent être ajoutées à tout moment si nécessaire, et deux options de style de base sont disponibles.

5. créer un contenu multi-colonnes

L'éditeur classique n'est vraiment pas très puissant lorsqu'il s'agit de créer du contenu multi-colonnes, ce qui donne des maux de tête à beaucoup de gens. C'est une bonne chose que l'éditeur de blocs nous offre la fonction de blocs de colonnes, qui permet d'obtenir facilement deux colonnes de blocs de paragraphes par un simple ajout, ce qui nous donne plus de variété et de flexibilité dans la présentation du contenu.

Ce bloc de colonnes est très flexible. Vous pouvez ajouter jusqu'à 6 colonnes dans une ligne et même utiliser d'autres blocs dans chaque colonne.

Conseils supplémentaires pour une utilisation professionnelle de Gutenberg

Vous craignez peut-être que l'utilisation de l'éditeur de blocs ne prenne pas plus de temps pour ajouter et modifier des blocs que pour créer du contenu. En fait, ne vous inquiétez pas du tout, l'éditeur de blocs est très rapide. Avec un peu de familiarité, il est facile d'ajouter toutes sortes de blocs sans avoir à réfléchir. Je suis sûr que vous constaterez rapidement que l'utilisation de l'éditeur de blocs rend votre travail plus rapide et plus fluide.

Voici quelques conseils supplémentaires pour les utilisateurs avancés afin de vous aider à utiliser plus rapidement l'éditeur de blocs de WordPress.

1. déplacer la barre d'outils du bloc vers le haut

Vous avez peut-être remarqué dans la capture d'écran ci-dessus qu'il y a une barre d'outils en haut de chaque bloc. Vous pouvez déplacer cette barre d'outils en haut de l'éditeur. Il vous suffit de cliquer sur le bouton à trois points situé dans le coin supérieur droit de l'écran et de sélectionner l'option "Barre d'outils supérieure".

2. utiliser les raccourcis clavier

Gutenberg est livré avec quelques raccourcis pratiques pour rendre votre flux de travail plus rapide et plus facile. Le premier est /. Tapez simplement /, commencez à taper, et l'éditeur vous montrera les blocs correspondants qui peuvent être ajoutés immédiatement. Pour plus de raccourcis, cliquez sur le menu à trois points dans le coin supérieur droit de l'écran et sélectionnez Raccourcis clavier.

Une fenêtre contextuelle s'affiche avec une liste de tous les raccourcis clavier que vous pouvez utiliser. Cette liste contient des raccourcis différents pour les utilisateurs de Windows et de Mac.

3. glisser-déposer des médias pour créer automatiquement des blocs de médias

Gutenberg vous permet de faire glisser et de déposer des fichiers n'importe où sur l'écran et il créera automatiquement un bloc pour vous. Par exemple, un seul fichier image ou vidéo peut être placé et le bloc sera créé pour vous. Il est également possible de supprimer plusieurs fichiers d'images pour créer un bloc de galerie.

4. ajouter du contenu YouTube, Twitter, Vimeo et d'autres contenus intégrés

L'éditeur de blocs facilite l'intégration de contenus tiers dans votre contenu WordPress. Tous les services tiers populaires ont des blocs.

N'hésitez pas à copier et à coller l'URL d'intégration et un bloc sera automatiquement créé pour vous. Par exemple, si vous ajoutez l'URL d'une vidéo YouTube, un bloc d'intégration YouTube sera automatiquement créé et la vidéo sera affichée.

Les options d'intégration par défaut ne s'appliquent pas aux liens Facebook et Instagram, mais il existe une solution de contournement dont je vous parlerai plus tard.

Ajouter plus de blocs à l'éditeur de blocs Gutenberg sur WordPress

Les développeurs d'éditeurs de blocs dans WordPress peuvent créer leurs propres blocs. Il existe d'excellents plugins WordPress qui proposent des ensembles de blocs pour les nouveaux éditeurs.

En voici quelques-uns :

1. bloc WordPress Gutenberg Spectra

Spectra WordPress Gutenberg Blocksest une bibliothèque de blocs contenant de nombreux blocs avancés permettant d'ajouter des éléments de conception au contenu.

Spectra by Popular Astra WordPress Themesa été créé par une équipe de développeurs qui peuvent vous aider à créer de beaux designs sans écrire de code.

2. blocs PublishPress

Blocs PublishPressest une autre bibliothèque de blocs puissante avec des blocs supplémentaires pour étendre l'éditeur de blocs Gutenberg. Elle comprend de belles options de mise en page, des sliders, des boutons, des icônes, une galerie d'images, des cartes, des onglets, des recommandations, des accordéons (accordéons) et plus encore.

3. empilables - Blocs Gutenberg

Empilable - Blocs Gutenbergest une collection de blocs Gutenberg magnifiquement conçus pour les utiliser sur votre site web. Il comprend des blocs pour les conteneurs, les posts, les grilles de fonctionnalités, les accordéons, les boîtes d'images, les listes d'icônes, les phrases d'appel à l'action, et plus encore.

Nous espérons que ce tutoriel Gutenberg vous aidera à apprendre à utiliser l'éditeur de blocs de WordPress.