Plongée dans le dernier éditeur Gutenberg de WordPress (2024)

Lorsque l’éditeur de blocs WordPress, ou Gutenberg, a été lancé en décembre 2018, nous ne savions pas à quoi nous attendre. Bien sûr, nous avions eu beaucoup de temps pour jouer avec sa version bêta, mais nous ne pouvions pas prédire à quel point le lancement réel se déroulerait en douceur ou à quel point les utilisateurs et les développeurs seraient impatients d’adopter le nouvel éditeur.

Nous avons vu l’éditeur Gutenberg connaître une croissance énorme au cours des plus de deux ans qui se sont écoulés depuis la première publication de cet article. Il est passé du lancement d’un produit minimum viable (MVP) à un projet plus mature qui se rapproche de l’objectif de créer une expérience unifiée de Full Site Editing pour WordPress.

Pour tenir compte de ces changements, nous avons revisité l’éditeur Gutenberg pour vous faire découvrir son nouveau visage, y compris sa prochaine évolution.

Qu’est-ce que l’éditeur de blocs Gutenberg ?

Gutenberg, alternativement appelé « éditeur de blocs WordPress » ou simplement « éditeur WordPress », est l’éditeur de contenu WordPress introduit dans WordPress 5.0, publié le 6 décembre 2018.

Si vous n’avez pas entendu ce terme, il s’agit de l’éditeur par défaut que tous les sites WordPress utilisent, sauf si vous l’avez spécifiquement désactivé. Il ressemble à quelque chose comme ceci :

La grande différence entre l’éditeur WordPress Gutenberg et l’éditeur WordPress précédent (désormais appelé « éditeur classique » ou « éditeur TinyMCE ») est une nouvelle approche de la création de contenu basée sur les blocs.

Avec Gutenberg, chaque élément de votre contenu est un bloc, ce qui permet une manipulation facile du contenu. Chaque paragraphe est un bloc, chaque image est un bloc, chaque bouton est un bloc – vous avez compris !

Les développeurs tiers peuvent également créer des blocs personnalisés, ce qui contribue à mettre fin à l’engouement de WordPress pour les codes courts. Disons que vous voulez intégrer un formulaire de contact. Au lieu d’avoir à ajouter un code court (par exemple [your-form-shortcode]) comme vous le faisiez dans le passé, vous pouvez maintenant simplement déposer le bloc de votre extension de formulaire.

En outre, vous pouvez également utiliser les blocs pour créer des mises en page plus complexes, par exemple pour mettre en place un design à plusieurs colonnes ou regrouper des blocs pour créer une section cohérente.

Au fur et à mesure que nous vous montrerons comment utiliser l’éditeur de blocs, vous aurez une meilleure idée de la façon dont vous pouvez utiliser les blocs pour améliorer la création de contenu.

Consultez ce guide mis à jour pour en savoir plus

Une chose importante à comprendre est que le projet Gutenberg vise à être plus qu’un simple éditeur de contenu.

En juillet 2021, Gutenberg n’est encore qu’un éditeur de contenu (pour l’essentiel). Mais l’objectif à long terme pour Gutenberg est de le faire évoluer vers quelque chose appelé Full Site Editing.

L’idée avec le Full Site Editing est que vous serez en mesure de concevoir 100 % de votre site web en utilisant l’éditeur Gutenberg. Par exemple, au lieu d’être limité aux options d’en-tête fournies avec votre thème WordPress, vous pourrez utiliser Gutenberg pour concevoir des en-têtes personnalisés à l’aide de l’éditeur de blocs.

Ce type de fonctionnalité n’est pas encore disponible, mais c’est en passe de l’être, et nous avons quelques projets de « preuve de concept » que nous vous présenterons vers la fin de cet article.

Avantages et inconvénients de Gutenberg par rapport aux alternatives populaires

Maintenant que nous avons pu utiliser l’éditeur de blocs de WordPress pendant plus de deux ans, nous avons une bonne idée de certains des avantages et inconvénients de Gutenberg par rapport aux autres solutions.

Il y a deux possibilités principales pour créer du contenu sur WordPress :

• L’éditeur TinyMCE de WordPress : C’est l’éditeur classique que WordPress utilisait avant WordPress 5.0.
• Les extensions de construction de pages : Il s’agit d’extensions tierces qui ajoutent à WordPress une conception visuelle, en glisser-déposer.

En général, l’éditeur classique TinyMCE offre une expérience plus dépouillée, semblable à celle d’un traitement de texte, tandis que les constructeurs de pages offrent une expérience visuelle beaucoup plus souple, en glisser-déposer.

Si nous devions classer les trois éditeurs en fonction de leur souplesse de conception, cela donnerait quelque chose comme ceci:

Éditeur classique TinyMCE (le moins flexible) < Gutenberg < Constructeurs de pages (le plus flexible)

Maintenant, parlons des avantages et des inconvénients de l’éditeur de blocs Gutenberg par rapport aux alternatives.

Gutenberg vs Éditeur classique : Avantages et inconvénients

Comparons d’abord Gutenberg à l’éditeur classique TinyMCE.

Pour :

• Gutenberg offre un arrière-plan de conception plus visuel
• Vous n’avez pas besoin d’utiliser des codes courts pour intégrer du contenu : vous disposez d’un système de blocs unifié.

Contre :

• Certaines personnes trouvent que la rédaction dans Gutenberg est un peu lourde car chaque paragraphe est un bloc séparé. Pour les longs articles, il peut être difficile de manipuler le texte. Vous pouvez préférer écrire dans un autre éditeur et coller le texte dans Gutenberg lorsque vous avez terminé.
• Si les performances de Gutenberg se sont nettement améliorées, il peut encore être à la traîne sur les articles massifs, ce qui est moins susceptible de se produire avec l’éditeur classique.

Si vous pensez que l’éditeur classique TinyMCE correspond mieux à vos besoins, vous pouvez désactiver complètement l’éditeur Gutenberg.

Gutenberg et les constructeurs de pages : Avantages et inconvénients

Voyons maintenant comment Gutenberg se positionne par rapport aux extensions tierces de construction de pages.

Pour :

• Gutenberg est une fonctionnalité du cœur, ce qui signifie que vous n’avez pas à vous soucier des problèmes de compatibilité.
• Comme il s’agit d’une fonctionnalité du cœur, tous les développeurs peuvent intégrer la prise en charge de Gutenberg dans leurs extensions, ce qui améliore la compatibilité.
• Gutenberg produit un code plus propre et plus léger. Toutes choses égales par ailleurs, un design construit avec Gutenberg se chargera généralement plus rapidement que le même design réalisé avec un constructeur de pages.

Contre :

• Gutenberg n’offre pas une édition visuelle correcte comme un constructeur de pages. Il est plus accessible que l’éditeur classique, mais pas encore 100 % transparent comme un constructeur de pages.
• Les constructeurs de pages vous offrent toujours des options de conception et de mise en page plus souples.
• La plupart des constructeurs de pages offrent un mouvement en glisser-déposer beaucoup plus fluide et flexible.

Réflexions sur la comparaison

Pour la majorité des utilisateurs, Gutenberg est la solution idéale en termes de flexibilité.

La plupart des gens n’ont pas besoin de la flexibilité d’un constructeur de pages pour leur contenu, surtout pour les articles de blog. Mais en même temps, il est agréable de mettre en place rapidement un design à plusieurs colonnes ou d’insérer un bouton, ce que l’éditeur classique ne facilite pas.

Avec cela en tête, voyons comment vous pouvez commencer à utiliser Gutenberg.

Comment utiliser l’éditeur de blocs WordPress Gutenberg ?

Maintenant que vous en savez un peu plus sur l’éditeur de blocs Gutenberg, creusons la façon dont vous pouvez l’utiliser pour commencer à créer du contenu.

Nous commencerons par une introduction à l’interface et développerons progressivement des méthodes plus avancées pour utiliser l’éditeur et améliorer vos flux de travail.

L’interface de l’éditeur de blocs Gutenberg

Lorsque vous ouvrez l’éditeur, il masque la colonne latérale du tableau de bord de WordPress et vous offre une expérience en plein écran :

L’éditeur se compose de trois parties principales :

• Contenu : Votre contenu occupe la majeure partie de l’écran. Vous verrez un aperçu visuel de ce à quoi il ressemblera sur l’interface publique de votre site. Ce n’est pas tout à fait exact, mais vous devriez avoir une assez bonne idée de la conception finale.
• Barre haute d’outils : La barre d’outils du haut vous aide à insérer de nouveaux blocs, à annuler/rétablir et à accéder à d’autres réglages essentiels.
• Colonne latérale : la colonne latérale contient deux onglets. L’onglet Article vous permet de configurer les réglages de l’article, comme ses catégories, ses étiquettes, son image mise en avant, etc. L’onglet Bloc affiche les réglages du bloc que vous avez sélectionné – nous y reviendrons plus tard.

Pour créer une expérience d’écriture plus immersive, vous pouvez masquer la colonne latérale en cliquant sur l’icône « engrenage » dans le coin supérieur droit. Pour faire réapparaître la colonne latérale, il vous suffit de cliquer à nouveau sur l’icône « engrenage » :

Par exemple, voici à quoi ressemble l’interface de l’éditeur si vous utilisez le nouveau thème par défaut Twenty Twenty-One :

Ajouter des blocs

Pour ajouter un texte de paragraphe ordinaire à votre article, vous pouvez simplement cliquer et saisir. Chaque fois que vous appuyez sur la touche Entrée, l’éditeur crée automatiquement un nouveau bloc de paragraphe.

Pour les autres types de contenu, vous devrez insérer un nouveau bloc. Vous utiliserez des blocs pour les images, les boutons, les vidéos, etc.

Pour ajouter un nouveau bloc, vous pouvez cliquer sur l’une des icônes « plus » de l’interface. Il s’agit de l’icône principale d’insertion de bloc dans le coin supérieur gauche, mais vous verrez également d’autres icônes à l’intérieur de l’interface qui ouvrent une interface d’insertion de bloc plus petite :

Pour commencer, placez le curseur de votre souris à l’endroit où vous souhaitez insérer le nouveau bloc. Par exemple, pour ajouter un nouveau bloc sous le bouton, vous pouvez cliquer sous le bouton, puis sur l’icône +.

Vous devriez voir un panneau latéral qui affiche tous les blocs disponibles, divisés en différentes catégories. Vous pouvez soit rechercher un bloc spécifique, soit choisir une option dans la liste. Lorsque vous passez la souris sur un bloc, vous verrez une description de ce qu’il fait et un aperçu.

Pour insérer le bloc, il suffit de cliquer dessus. Par exemple, pour insérer une image ordinaire, il suffit de cliquer sur le bloc image :

Vous pouvez ensuite suivre les instructions pour téléverser ou choisir une image existante dans votre médiathèque.

Options de formatage essentielles

Pour effectuer des choix de formatage de base pour vos blocs, vous disposez d’une barre d’outils flottante qui apparaît lorsque vous cliquez sur un bloc.

Si vous mettez en forme du texte ordinaire, c’est ici que vous pouvez :

• Ajouter des caractères gras ou italiques
• Insérer des liens
• Modifier les alignements
• Ajouter des éléments de mise en forme, comme le code en ligne, le texte barré et l’abonnement.

Par exemple, disons que vous souhaitez insérer un lien dans votre contenu. Vous devez d’abord sélectionner le texte spécifique que vous souhaitez lier – dans notre exemple, il s’agit de « For other types of content ». Ensuite, vous pouvez cliquer sur l’icône de lien dans la barre d’outils pour ouvrir les options d’insertion de lien :

Configuration des réglages avancés de bloc

Tous les blocs que vous insérez sont accompagnés de réglages supplémentaires dans la colonne latérale. Certains blocs ne vous offrent que quelques réglages, tandis que d’autres vous offrent plusieurs options pour contrôler le design, la mise en page, les fonctionnalités, etc.

Pour ouvrir les réglages d’un bloc, cliquez sur le bloc dans l’éditeur pour le sélectionner. Ensuite, allez dans l’onglet Bloc dans la colonne latérale pour voir ses réglages.

Ci-dessous, vous pouvez voir les réglages du bloc de boutons, qui est l’un des blocs les plus flexibles. Vous pouvez en changer la couleur, le rendre plus large, et bien d’autres choses encore.

Lorsque vous modifiez les réglages d’un bloc, vous voyez instantanément ces changements se refléter dans l’éditeur.

Là encore, chaque bloc possède des réglages qui lui sont propres. Par exemple, si vous ouvrez les réglages du texte d’un paragraphe ordinaire, vous obtenez seulement quelques options basiques de typographie et de couleur. Ci-dessous, vous pouvez voir que nous avons pu appliquer un arrière-plan de couleur pour mettre en évidence certains textes :

Réorganiser les blocs

En plus d’utiliser le copier-coller (ce que vous pouvez faire pour le texte comme dans n’importe quel autre éditeur), Gutenberg vous offre deux façons principales de réorganiser les blocs.

Tout d’abord, si vous souhaitez déplacer un bloc de quelques positions vers le haut ou vers le bas, vous pouvez utiliser les flèches haut et bas de la barre d’outils flottante.

Pour les déplacements plus importants, vous pouvez utiliser le glisser-déposer. Pour faire glisser et déposer un bloc, vous devez cliquer sur l’icône « six points » à gauche des flèches.

Une fois que vous avez cliqué et maintenu votre souris sur cette icône, vous pouvez faire glisser le bloc n’importe où sur la page:

Incorporation de contenu provenant d’autres sources

Gutenberg est livré avec des blocs dédiés pour intégrer du contenu provenant de sources tierces comme YouTube, Vimeo, Soundcloud, etc. Vous pouvez trouver toutes ces options dans la section Contenus embarqués de l’outil d’insertion de blocs.

Par exemple, pour intégrer une vidéo YouTube, vous avez juste à :

1. Ajouter le bloc dédié YouTube
2. Coller l’URL directe de la vidéo.
3. Cliquer sur Intégrer.

Vous devriez alors voir un aperçu de la vidéo intégrée dans l’éditeur.

Création de mises en page multi-colonnes ou groupées

Comme nous l’avons mentionné précédemment, l’un des principaux avantages de l’éditeur de blocs par rapport à l’ancien éditeur TinyMCE est que vous pouvez créer des mises en page plus complexes sans avoir besoin de recourir à du code personnalisé ou à des codes courts.

L’éditeur de blocs est livré avec deux blocs par défaut pour vous aider à le faire :

• Colonnes : Créez une mise en page à plusieurs colonnes.
• Groupes : Regroupez plusieurs blocs. Par exemple, vous pouvez l’utiliser pour définir une couleur d’arrière-plan pour une section entière qui s’affiche derrière de nombreux blocs.

Ces deux blocs fonctionnent sur le principe de « l’imbrication » des blocs, ce qui signifie que vous placerez un ou plusieurs blocs à l’intérieur d’un autre bloc.

Nous allons vous montrer un exemple utilisant le bloc colonnes, mais le même principe de base s’applique au bloc groupe.

Supposons que vous souhaitiez créer une mise en page en deux colonnes, la colonne de gauche contenant un paragraphe de texte normal et la colonne de droite un bouton.

Pour commencer, vous pouvez utiliser l’outil d’insertion de blocs pour ajouter le bloc colonnes. Une invite s’affichera pour vous permettre de choisir la mise en page que vous préférez :

Nous allons choisir une mise en page 50/50 sur deux colonnes pour cet exemple. Vous verrez alors deux cases de taille égale avec des icônes + à l’intérieur. Pour insérer du contenu, vous pouvez cliquer sur cette icône + pour ouvrir l’interface d’insertion de blocs :

Une fois que vous avez ajouté le premier bloc à une colonne, vous pouvez cliquer sur l’icône + pour insérer des blocs supplémentaires. Vous pouvez également faire glisser et déposer dans la colonne un bloc situé en dehors de la structure de la colonne.

10 astuces utiles de Gutenberg pour travailler de manière plus productive

Maintenant que vous avez une compréhension basique du fonctionnement de Gutenberg, passons en revue quelques précieux conseils et astuces qui vous aideront à utiliser l’éditeur de blocs plus efficacement.

1. Utilisez / (barre oblique) pour insérer rapidement des blocs.

Si vous devez insérer de nombreux blocs, ouvrir manuellement l’outil d’insertion de blocs peut devenir un peu fastidieux. Heureusement, une fois que vous commencez à apprendre les noms des blocs courants que vous devez utiliser, il existe un moyen beaucoup plus rapide d’insérer des blocs en utilisant uniquement votre clavier : / (barre oblique).

Si vous appuyez sur « Entrée » pour commencer un nouveau bloc de paragraphe, vous pouvez insérer rapidement un bloc en saisissant une barre oblique ( / ), suivie du nom du bloc que vous voulez insérer.

Lorsque vous commencerez à saisir, vous verrez apparaître une liste de tous les blocs qui correspondent à votre requête. Vous pouvez alors utiliser les flèches de votre clavier pour naviguer dans les blocs et appuyer sur « Entrée » pour sélectionner le bloc que vous souhaitez insérer.

Voici un exemple d’utilisation de l’insertion rapide pour ajouter un bloc d’images :

2. Insérer des images en les faisant glisser depuis votre bureau

Si vous insérez de nombreuses images, l’éditeur de blocs comprend une autre fonctionnalité qui vous permet de gagner du temps : vous n’avez plus besoin d’ajouter un bloc d’images avant de téléverser une image.

Au lieu de cela, vous pouvez faire glisser le fichier image directement depuis votre bureau vers l’emplacement où vous souhaitez l’ajouter à votre article. Lorsque vous faites glisser le fichier image sur le contenu de votre site, vous verrez une ligne bleue indiquant l’emplacement de l’image.

Une fois que vous aurez publié le fichier, WordPress le téléversera automatiquement et insérera un bloc d’images à l’emplacement approprié:

3. Utiliser le formatage Markdown

Si vous êtes un adepte de la syntaxe Markdown pour la création de contenu, vous serez heureux d’apprendre que l’éditeur de blocs prend en charge une utilisation limitée de cette syntaxe, principalement pour les titres.

Par exemple, si vous voulez insérer un bloc d’en-tête avec une balise H3, vous pouvez saisir trois hashtags (`###`) puis appuyer sur la barre d’espace. L’éditeur les convertira automatiquement en H3, et vous pourrez continuer à saisir l’en-tête :

 

Supposons que vous vouliez un support Markdown encore plus avancé. Dans ce cas, vous pouvez installer une extension gratuite comme EditorsKit, qui vous permet également d’utiliser Markdown pour le gras, l’italique et le texte barré – nous parlerons plus en détail des extensions Gutenberg un peu plus loin dans cet article.

4. Épingler la barre d’outils de formatage en haut de l’éditeur

Si vous n’aimez pas la façon dont l’outil de formatage « flotte » au-dessus d’un bloc, l’éditeur de blocs comprend une fonction qui vous permet de l’épingler sous la barre d’outils supérieure :

5. Copier un bloc et tous ses réglages

L’éditeur de blocs vous permet de copier et de coller du texte comme vous le feriez dans n’importe quel éditeur – « Ctrl + C » ou en cliquant avec le bouton droit de la souris et en choisissant Copier.

Cependant, vous ne pouvez pas utiliser cette méthode pour copier et coller un bloc entier tout en préservant ses réglages. À la place, vous devrez :

1. Sélectionner le bloc.
2. Cliquer sur l’icône des trois points dans la barre d’outils du bloc.
3. Sélectionner Copier.

 

Une fois que vous avez copié le bloc de cette manière, vous pouvez le coller comme vous le feriez habituellement, c’est-à-dire en faisant « Ctrl + V » ou en cliquant avec le bouton droit de la souris et en choisissant « Coller ».

6. Sélectionner rapidement le bon bloc à l’aide de la vue Liste des blocs

Pour la plupart des blocs, vous pouvez simplement cliquer sur l’éditeur pour sélectionner le bloc. Cependant, cela peut devenir délicat si vous commencez à utiliser des blocs « imbriqués », comme l’insertion de blocs à l’intérieur des colonnes ou des blocs de groupe.

L’éditeur comprend une option de vue en liste, que vous pouvez ouvrir à partir de la barre d’outils supérieure pour tenir compte de cela. La vue en liste vous montrera chaque bloc, y compris les blocs imbriqués.

Vous pouvez sélectionner un bloc en cliquant dessus dans la liste, et l’éditeur le mettra également en évidence lorsque vous le survolerez dans la liste.

Dans l’exemple ci-dessous, vous pouvez voir :

• Le bloc primaire de colonnes parent
• Les blocs imbriqués pour chaque colonne
• Un bloc de groupe imbriqué dans une colonne
• Un bloc d’en-tête imbriqué à l’intérieur du bloc Groupe

Pour sélectionner le bloc parent principal, vous pouvez simplement ouvrir la vue en liste et le sélectionner dans la liste:

7. Ouvrir l’éditeur de code (pour les blocs individuels ou les articles complets)

L’un des avantages de l’éditeur de blocs Gutenberg est qu’il vous permet de configurer de nombreux styles et options de mise en page sans recourir au code. Cependant, vous pouvez toujours avoir certaines situations où vous souhaitez accéder directement au code pour les utilisateurs plus avancés.

Pour vous aider à le faire, l’éditeur Gutenberg est livré avec quelques options différentes.

Tout d’abord, vous pouvez modifier le code d’un bloc individuel, ce qui est utile pour les petites modifications comme l’insertion d’une classe CSS. Pour cela, ouvrez le menu déroulant de la barre d’outils du bloc et sélectionnez Modifier en HTML:

En sélectionnant cette option, l’aperçu visuel se transforme en éditeur de code pour ce bloc uniquement, sans affecter les aperçus visuels des autres blocs :

Deuxièmement, l’éditeur comprend un bloc HTML personnalisé que vous pouvez utiliser pour intégrer des extraits HTML complets. Il vous suffit d’ajouter le bloc et de coller votre code.

Enfin, vous pouvez également ouvrir l’éditeur de code complet pour l’ensemble du document en utilisant la liste déroulante dans le coin supérieur droit ou un raccourci clavier : Ctrl + Shift + Alt + M.

Gardez à l’esprit que, lorsque vous ouvrez l’éditeur de code complet, vous verrez également le balisage du formatage des blocs de Gutenberg, de sorte qu’il peut être un peu délicat de naviguer :

8. Apprendre les raccourcis clavier

L’éditeur de blocs comprend de nombreux raccourcis clavier qui vous permettent d’effectuer des actions courantes. Cela vaut la peine de prendre le temps de les apprendre car ils vous rendront plus productif et vous éviteront de nombreux clics de souris répétitifs.

Voici quelques-uns des raccourcis les plus courants – si vous êtes sur un Mac, vous voudrez remplacer « Ctrl » par « Commande (⌘) » :

• Ouvrir la vue en liste de bloc – Shift + Alt + O
• Enregistrer vos modifications – Ctrl + S
• Annuler votre ou vos dernières modifications – Ctrl + Z
• Rétablir votre dernière annulation – Ctrl + Shift + Z
• Dupliquer le ou les blocs sélectionnés – Ctrl + Shift + D
• Supprimer le ou les blocs sélectionnés – Shift + Alt + Z
• Insérer un nouveau bloc avant le ou les blocs sélectionnés – Ctrl + Alt + T
• Insérer un nouveau bloc après le ou les blocs sélectionnés – Ctrl + Alt + Y

Vous pouvez également ouvrir un aide-mémoire complet de tous les raccourcis clavier lorsque vous êtes dans l’éditeur. Pour cela, vous pouvez soit utiliser un raccourci clavier – Shift + Alt + H – soit cliquer sur l’icône de menu « trois points verticaux » (⋮) dans le coin supérieur droit de l’éditeur et choisir Raccourcis clavier dans la liste déroulante.

9. Nettoyer votre interface en masquant les blocs

L’éditeur de blocs ajoute de nombreux blocs par défaut, mais vous ne les utiliserez probablement pas tous. Pour vous aider à nettoyer l’interface, l’éditeur comprend une fonction appelée Gestionnaire de blocs qui vous permet de désactiver et de masquer les blocs que vous n’utilisez pas :

10. Ajouter des ancres pour les liens de saut

Enfin, notre dernière astuce utile est la fonction de lien d’ancrage HTML de l’éditeur de blocs, qui vous permet de créer des liens directs vers des sections spécifiques de votre contenu (par exemple, pour une table des matières).

Dans l’éditeur classique, vous deviez ajouter des ancres HTML en utilisant du code manuellement. Avec Gutenberg, il suffit de saisir le texte de votre lien de saut dans le champ ancre HTML dans la zone avancée des réglages de chaque bloc :

Approfondir les concepts plus avancés de l’éditeur de blocs

À ce stade, nous avons couvert une bonne partie du fonctionnement de l’éditeur et quelques astuces pour travailler plus efficacement. Maintenant que vous avez acquis ces connaissances de base, nous allons passer en revue deux tactiques légèrement plus avancées :

• Compositions de blocs
• Blocs réutilisables

Compositions de blocs

Une composition de bloc est essentiellement un modèle. Il s’agit d’une collection de blocs disposés selon une mise en page. Il peut s’agir d’un élément mineur, comme une disposition de boutons. Il peut même s’agir d’un modèle pour une section entière, voire une page entière.

WordPress est livré avec ses propres compositions de blocs intégrées, et les développeurs d’extensions tierces peuvent également ajouter les leurs.

Vous pouvez insérer de nouvelles compositions à partir de l’onglet Compositions du module d’insertion de blocs principal:

Une fois que vous avez inséré la composition de bloc, vous pouvez modifier entièrement tous les blocs qui composent celle-ci, comme si vous aviez ajouté les blocs manuellement.

Actuellement, l’éditeur Gutenberg de base ne vous permet pas de créer vos compositions de blocs (à moins que vous ne sachiez coder). Cependant, vous pouvez résoudre ce problème avec l’extension gratuite Block Pattern Builder de Justin Tadlock. Avec l’extension activée, vous pouvez créer vos designs à l’aide de Gutenberg, puis enregistrer ce design en tant que composition.

Pour commencer, allez dans Compositions de bloc > Ajouter pour créer une nouvelle composition à l’aide de l’éditeur. Veillez à la publier lorsque vous avez terminé :

Une fois que vous aurez fait cela, vous pourrez insérer votre composition de bloc comme n’importe quelle autre – cherchez-la dans la section Non classé :

L’équipe centrale de WordPress a également lancé une bibliothèque officielle de compositions de blocs sur WordPress.org. Vous pouvez les insérer dans l’éditeur en utilisant le copier-coller. Il suffit de cliquer sur le bouton Copier sur le site web de la bibliothèque de compositions de blocs, puis de la coller dans l’éditeur.

Blocs réutilisables

Les blocs réutilisables sont une collection d’un ou plusieurs blocs que vous pouvez insérer en tant que groupe. Ils sont similaires aux compositions de blocs, mais avec une différence essentielle :

Alors qu’une composition de bloc est un modèle de départ que vous modifiez dans chaque cas, un bloc réutilisable sera le même dans chaque cas où vous l’incluez.

Si vous mettez à jour le bloc réutilisable, ces modifications s’appliqueront automatiquement à toutes les instances existantes.

Par exemple, vous pouvez utiliser un bloc réutilisable pour créer un appel à l’action (CTA) que vous souhaitez voir identique dans tout votre contenu. Ensuite, si vous souhaitez mettre à jour l’appel à l’action, il vous suffit de mettre à jour le bloc réutilisable une fois pour le modifier sur l’ensemble du site.

Pour créer un bloc réutilisable dans l’éditeur WordPress Gutenberg, cliquez et faites glisser pour sélectionner un ou plusieurs blocs. Ensuite, cliquez sur l’option Ajouter aux blocs réutilisables. (L’extension que nous avons mentionnée ci-dessus vous permet également de créer une composition de bloc de cette façon).

Vos blocs seront alors regroupés – vous pouvez donner un nom à votre bloc réutilisable dans les réglages du bloc réutilisable dans la colonne latérale.

Maintenant, vous pourrez insérer ce bloc réutilisable en recherchant son nom. Vous pouvez utiliser « / » pour insérer rapidement le bloc :

Si vous modifiez le bloc réutilisable, vous aurez la possibilité de publier ces modifications lorsque vous mettrez à jour l’article. Et si vous décidez de publier les modifications du bloc réutilisable, ces modifications s’appliqueront automatiquement à chaque instance du bloc réutilisable :

Étendre de l’éditeur de blocs avec des extensions

Jusqu’à présent, nous nous sommes concentrés sur les fonctions de base de l’éditeur de blocs, à quelques exceptions près.

L’un des avantages de l’éditeur de blocs, cependant, est que vous pouvez utiliser des extensions pour l’étendre, tout comme vous pouvez le faire avec le reste de votre site WordPress.

Vous pouvez utiliser les extensions pour plusieurs choses différentes :

• Ajouter de nouveaux blocs de contenu : Les extensions peuvent ajouter de nouveaux blocs que vous pouvez utiliser dans vos créations. C’est le cas d’utilisation le plus courant des extensions Gutenberg pour le moment.
• Ajouter de nouveaux modèles ou compositions de blocs : Certaines extensions utilisent le système de compositions de blocs de base, tandis que d’autres ont créé leurs propres systèmes de modèles.
• Modifier l’interface ou les fonctionnalités de l’éditeur : Vous pouvez utiliser des extensions pour modifier l’éditeur lui-même. Par exemple, vous pouvez ajouter une meilleure prise en charge de Markdown.

Au-delà des extensions spécifiquement construites pour Gutenberg, de nombreuses autres extensions WordPress peuvent également utiliser l’éditeur de blocs.

Par exemple, si vous utilisez une extension de formulaire de contact, cette dernière peut vous fournir un bloc dédié que vous pouvez utiliser pour intégrer vos formulaires. Il en va de même pour de nombreux autres types d’extensions.

Une fois que vous maîtrisez les bases de l’éditeur, il est intéressant d’explorer ces extensions pour voir si vous en trouvez qui peuvent améliorer votre expérience.

Voici quelques-unes des options les plus populaires au moment où nous écrivons cet article :

• Ultimate Addons for Gutenberg
• Kadence Blocks
• GenerateBlocks
• Stackable
• Getwid

Vous pouvez en voir plus dans la section WordPress.org consacrée aux extensions compatibles avec les blocs.

Éditeur WordPress Gutenberg et Full Site Editing.

Comme nous l’avons mentionné au début de cet article, le projet Gutenberg vise à être bien plus qu’un simple éditeur de contenu.

Le plan à long terme est de faire en sorte que WordPress passe au Full Site Editing. Cela signifie exactement ce que cela dit – l’objectif est que vous puissiez éventuellement modifier toutes les parties de votre site en utilisant l’éditeur Gutenberg. Et cela inclut l’en-tête, le pied de page, les colonnes latérales, etc. de votre site.

Contrairement au lancement de l’éditeur de blocs dans WordPress 5.0, Full Site Editing adopte une approche itérative. Il s’agira d’un ajout progressif de fonctionnalités, où chaque nouvelle version s’appuie sur les précédentes.

Par exemple, à partir de WordPress 5.8, vous utiliserez désormais l’éditeur de blocs pour gérer les widgets de votre site. Vous aurez également accès à de nouveaux blocs de thèmes tels que Logo du site, Navigation, Requête de boucle (qui vous permet de créer des modèles de listes d’articles), et plus encore.

Mais si le Full Site Editing est encore en cours, certains développeurs de thèmes intrépides ont déjà commencé à publier des thèmes basés sur des blocs, qui nous donnent quelques bons exemples de la façon dont le Full Site Editing pourrait fonctionner.

En outre, vous pouvez accéder à certaines des fonctionnalités expérimentales d’édition du Full Site Editing dans la version extension de Gutenberg.

Alors, regardons deux choses :

1. Les fonctions de base du Full Site Editing que nous avons maintenant depuis WordPress 5.8
2. Comment le Full Site Editing pourrait fonctionner sur la base de fonctionnalités expérimentales.

Utiliser des blocs au lieu des widgets

À partir de WordPress 5.8, vous utiliserez désormais des blocs pour contrôler vos colonnes latérales et vos pieds de page au lieu de widgets (par défaut – vous pouvez désactiver cette fonction si vous le souhaitez).

Lorsque vous accédez à Apparence > Widgets, vous pourrez gérer le contenu de chaque zone de widgets à l’aide de l’éditeur de blocs.

Vous pouvez constater que chaque zone de widget dispose d’un éditeur distinct, que vous pouvez ouvrir en cliquant sur les boutons en accordéon. Vous pouvez également déplacer des blocs entre les différentes zones de widgets en cliquant sur les icônes en forme de flèche situées en haut:

Utilisation des nouveaux blocs de thème

WordPress 5.8 ajoute également de nouveaux blocs de thème dédiés qui vous permettent d’insérer du contenu dynamique dans votre site. Ces blocs joueront également un rôle essentiel lors de la conception de modèles pour votre thème dans les prochaines versions.

Par exemple, disons que vous souhaitez intégrer une liste de vos contenus les plus récents sur une page. Il vous suffit d’ajouter le bloc Requête de boucle pour pouvoir insérer de manière dynamique du contenu provenant d’un type de publication particulier (par exemple, des articles de blog), y compris le filtrage par catégories, auteurs, étiquettes, etc :

À l’intérieur du bloc Requête de bloc, vous pouvez imbriquer les autres blocs de thème pour contrôler le modèle du contenu qui y est affiché. Par exemple, vous pouvez afficher la date de chaque article en ajoutant le bloc Date de publication à votre modèle.

Avec le bloc Requête de boucle de WordPress 5.8, vous pouvez essentiellement concevoir votre propre page de liste de blogs personnalisée. Le Full Site Editing permet d’étendre cette fonctionnalité à l’ensemble de votre thème, ce que nous allons examiner maintenant.

Conception de modèles de contenu

Le mode d’édition des modèles est une autre nouvelle fonctionnalité de WordPress 5.8. Il vous permet d’utiliser Gutenberg pour concevoir les modèles de vos articles et pages à l’aide de blocs.

Actuellement, cette fonctionnalité n’est disponible que si le développeur de votre thème l’a spécifiquement activée. Il se peut donc que vous ne la voyiez pas si le développeur de votre thème ne l’a pas encore fait.

Si vous utilisez un thème qui prend en charge le mode d’édition des modèles dans WordPress 5.8, vous verrez une nouvelle section Modèle dans l’onglet Article/Page de la colonne latérale lorsque vous modifiez un article ou une page. Vous pouvez créer un nouveau modèle ou choisir l’un de vos modèles existants :

Si vous créez un nouveau modèle, vous pourrez lui donner un nom pour vous aider à le mémoriser. Ensuite, vous pouvez concevoir le modèle en utilisant le mode spécial de l’éditeur de modèles, ainsi que les nouveaux blocs de thème que nous avons détaillés dans la section précédente :

Blockbase : Exemple de Full Site Editing

Blockbase est un thème d’Automattic qui fonctionne comme une sorte de « preuve de concept » et de terrain de jeu pour le Full Site Editing. Il s’agit d’un thème encore expérimental, qui pourrait donc être modifié avant que ces fonctionnalités ne soient intégrées au logiciel principal de WordPress. Mais il donne une idée du Full Site Editing.

Lorsque le thème et la version extension de Gutenberg sont installés, vous disposez d’une nouvelle zone d’édition du site qui vous permet de « construire » votre thème à l’aide du même éditeur que celui que vous avez vu ci-dessus.

La différence essentielle, cependant, est que vous ne construisez pas seulement un seul article ou une seule page. Au lieu de cela, vous utilisez l’éditeur de blocs WordPress Gutenberg pour créer les modèles réels que tout le contenu de votre site utilisera – par exemple, le modèle de votre en-tête.

Pour vous aider à accomplir cette tâche, vous disposerez d’une série de nouveaux blocs de design, dont certains des blocs de thème que vous avez vus plus haut :

Pour naviguer entre les différents modèles, vous pouvez cliquer sur le logo WordPress dans le coin supérieur gauche pour modifier les autres modèles et en créer de nouveaux :

Encore une fois, l’idée est que vous serez finalement en mesure d’utiliser l’éditeur Gutenberg pour contrôler tous les modèles et les mises en page de votre thème. Et lorsque cela se produira, la création d’un site WordPress sera assez différente de ce que nous considérons comme « normal » en 2021.

Résumé

Depuis 2018, l’éditeur de blocs Gutenberg a fait beaucoup de progrès. Avec le passage prochain au Full Site Editing, l’éditeur de blocs ne fera que devenir une partie encore plus importante de WordPress.

Dans cet article, nous avons abordé tous les sujets, des bases de l’éditeur de blocs aux astuces et fonctionnalités avancées. Nous avons également examiné ce à quoi pourrait ressembler le Full Site Editing à l’avenir.

Si vous n’êtes pas encore prêt à l’essayer, vous pouvez désactiver définitivement Gutenberg et utiliser l’éditeur classique. Cependant, Gutenberg va continuer à se développer, ce n’est donc pas quelque chose que vous voudrez ignorer pour toujours.

Avez-vous encore des questions ou des réflexions sur l’éditeur ? Si oui, nous aimerions entendre vos commentaires, qu’ils soient bons ou mauvais.