Comment créer un bloc réutilisable dans Gutenberg

L'éditeur de blocs Gutenberg, fourni avec la version 5.0 de WordPress remplaçant l'éditeur classique, a changé notre paradigme de création de publications et de pages. Chacun d'eux est composé d'ensembles de contenu ou de blocs d'un certain type : texte, titre, citation, liste, fichier, tableau, image, couverture, galerie d'images, média et texte, bouton, intégré, etc., à partir desquels vous pouvez personnaliser certaines propriétés créant rapidement des designs très frappants.

Ainsi, par exemple, insérer la section que je vous montre ci-dessous est aussi simple que d'insérer un nouveau bloc de couverture, dans lequel j'ai superposé un filtre 100% opaque de couleur orange et j'ai ajouté les messages et le bouton que j'ai aimés.

Tout cela depuis l'éditeur de blocs Gutenberg , et sans avoir à quitter le post ni à copier-coller ou modifier le code HTML. C'était impensable avec l'éditeur WordPress classique. Si vous souhaitez en savoir plus sur les différentes possibilités offertes par le bloc de couverture, vous serez sûrement intéressé par la lecture de cet article sur les différences entre l'image en vedette et le bloc de couverture.

Avec l'éditeur de blocs, vous disposez de nombreuses nouvelles possibilités de conception basées sur la combinaison de toutes sortes d'éléments. Et je vous assure que cela compense de consacrer un peu de votre temps à connaître les différentes possibilités offertes par chacun des blocs dont vous disposez pour être beaucoup plus créatif et productif dans la conception des pages et des publications.

L'un des grands avantages de l'éditeur de blocs est que non seulement vous pouvez créer la variété de contenus offerts par tous les blocs disponibles, mais vous pouvez également réutiliser des blocs.

Vous savez déjà que la réutilisation du code, du contenu et de la conception est un principe de base d'efficacité pour tous les développeurs Web pour tirer parti des travaux antérieurs, gagner du temps et réduire la redondance. Cela vous aide également à maintenir une image ou un style uniforme sur l'ensemble de votre site Web. Il vous suffit de parcourir notre site Web pour voir un ensemble de sections très similaires entre elles, avec le même style mais un contenu différent, avec des appels à l'action différents ou des témoignages de nos clients.

Voyons ci-dessous comment fonctionne la création d'un bloc réutilisable.

Créer un bloc réutilisable

Tout bloc que vous avez créé dans un article ou une page peut être converti en un bloc réutilisable. Pour ce faire, sélectionnez simplement le bloc en question, cliquez sur l'icône en trois points et sélectionnez Ajouter aux blocs réutilisables .

Vous êtes invité à entrer un nom pour le bloc que vous souhaitez ajouter et à l'enregistrer.

Réutiliser un bloc

Désormais, chaque fois que vous souhaitez utiliser l'un de vos blocs réutilisables dans un article ou une page, il est disponible dans votre bibliothèque de blocs dans la section Réutilisable .

Après l'avoir sélectionné, le bloc est inséré. L'effet est le même que si vous aviez dupliqué ce bloc dans le même article qui l'a créé :

Modifier un bloc réutilisable

Notez qu'un bloc réutilisable ne peut pas être modifié comme n'importe quel autre bloc normal. Vous ne pouvez le modifier qu'en cliquant sur son bouton Modifier :

Lorsque vous modifiez un bloc réutilisable, vous ne modifiez pas seulement l'instance qui apparaît dans votre message actuel, mais le bloc lui-même, partout. En d'autres termes, toute modification que vous apportez dans un bloc réutilisable s'appliquera également à tous les articles et pages où vous avez ajouté le bloc réutilisable.

Vous vous demandez sûrement, comment puis-je faire juste pour faire un changement dans le bloc que je viens d'ajouter, mais pas dans le reste des blocs créés ?

Convertir en bloc normal

Si vous souhaitez simplement modifier le bloc réutilisé que vous venez d'ajouter sans modifier toutes les instances du bloc que vous avez dans le reste de votre site Web, vous avez toujours la possibilité de convertir le bloc que vous venez d'ajouter en un bloc normal.

A partir de ce moment, le bloc réutilisé redevient un bloc de type original. Dans ce cas, le bloc est reconverti en bloc de couverture et je peux maintenant apporter les modifications souhaitées sans changer le bloc réutilisable.

Gérer les blocs réutilisables

Pour chaque bloc réutilisable que vous créez, un nouveau type de contenu personnalisé de type de bloc est créé dans votre base de données, avec le nom que vous avez spécifié. Mais à tout moment, vous pouvez aller directement modifier ou supprimer l'un des blocs réutilisables créés comme s'il s'agissait de n'importe quel autre type de publication.

Pour ce faire, cliquez sur l'option Gérer tous les blocs réutilisables que vous avez à disposition à la fin de la bibliothèque de blocs dans l'onglet Blocs réutilisables.

Ou vous avez également la possibilité d'accéder à la liste des blocs réutilisables à partir de l'option Gérer tous les blocs réutilisables , que vous pouvez trouver dans le menu supérieur droit de l'icône à trois points, Afficher plus d'outils et d'options .

Dans les deux cas, vous pourrez visualiser la liste des blocs réutilisables que vous avez créés et pour chacun d'eux, vous pouvez la modifier ou la supprimer comme vous le feriez avec n'importe quel article ou page.

Gardez à l'esprit que toute modification que vous apportez à un bloc réutilisable sera automatiquement appliquée à tous les articles et pages qui l'utilisent.

De même, si vous le supprimez, le bloc réutilisable sera également automatiquement supprimé dans toutes les pages où vous l'avez ajouté (et vous ne l'avez pas reconverti en bloc normal).

Et voici l'essentiel pour que vous soyez beaucoup plus productif et efficace en réutilisant toutes les sections de votre site Web en vous assurant de conserver la même image et le même style tout au long de celui-ci.

Dans un prochain article, j'expliquerai également comment vous pouvez exporter et importer des blocs avec Gutenberg. Mais vous savez que ma recommandation est que vous appreniez beaucoup plus de trucs sur Gutenberg en vous inscrivant au cours de création de contenu avec Gutenberg ?

Photo de Nicola Fioravanti sur Unsplash .