Si vous utilisez Gutenberg depuis longtemps, vous savez certainement déjà comment fonctionne les blocs réutilisables. Et sûrement que, pour vous, les compositions n'ont jamais été très intéressantes, car cela ne vous intéresse pas d'utiliser des blocs tout faits par l'équipe de WordPress. Mais tout ça va changer, je vais vous montrer comment créer des compositions Gutenberg super facilement dans ce tutoriel.
Qu'est-ce qu'une composition ?
Dans WordPress, les compositions sont des blocs Gutenberg qu'on va pouvoir réutiliser en les faisant glisser dans nos pages et nos articles de blog. C'est un système très pratique qui va permettre de composer une page visuellement intéressante en un temps record. Et cerise sur le gâteau, ça permet même de conserver une cohérence visuelle et graphique entre toutes les pages d'un site, ce qui renforce l'aspect professionnel de celui-ci.
Le problème, c'est que normalement, il faut faire beaucoup de code pour créer des compositions personnalisées. C'est en tout cas ce que je pensais, jusqu'à ce que je tombe sur le plugin que je vous présente aujourd'hui.
Installation du plugin "Reusable Blocks Extended"
Pour commencer vous allez devoir installer le plugin nommé "Reusable Blocks Extended".
Ce plugin super malin va nous permettre de transformer les blocs réutilisables de notre site WordPress en compositions. Souvenez-vous la différence entre une composition et un bloc réutilisable. Quand on modifie le bloc réutilisable sur une page d'un site, il est modifié sur toutes les autres pages où il apparaît. En revanche, les compositions, même si elles sont utilisées sur plusieurs pages de votre site, sont indépendantes les unes des autres. Autrement dit, si on en change une, on ne change pas les autres.
Pour installer plugin, nous allons commencer par nous rendre dans le panneau d'administration de votre site WordPress.
Ensuite nous allons aller dans l'onglet extension, puis nous allons cliquer sur Ajouter une extension. De la, nous allons taper le nom du plugin dans la barre de recherche, puis cliquez sur Installer et enfin, cliquez sur Activer.
Si vous n'êtes pas encore à l'aise avec l'installation d'extension sur votre site WordPress, je vous recommande cet article qui traite du sujet.
Maintenant que le plugin est en place on va pouvoir commencer par créer une page et créer un bloc qu'on voudra réutiliser ailleurs sur notre site pour créer notre première composition.
Création d'une page et ajout de blocs pour créer une composition
On va donc se rendre dans l'onglet Pages de WordPress, puis cliquez sur Ajouter.
De la, nous allons choisir un titre pour la page. Par exemple, je vous propose d'intituler cette page "ma première composition".
Maintenant, nous allons créer un bloc que nous allons vouloir réutiliser à plusieurs endroits de notre site.
Une structure de section qu'on va retrouver très souvent sur les sites internet se compose de deux colonnes avec d'un côté une image et de l'autre le texte.
Je vous propose de réaliser cette structure en utilisant un groupe Gutenberg, dans lequel on va placer des colonnes, dans la colonne de gauche en placera une image et dans la colonne de droite, on placera un paragraphe avec un titre.
Maintenant on en est à l'étape cruciale, rester concentré et lisez bien ce qui suit.
Vous allez sélectionner le bloc parent de la section que nous venons de créer, donc le bloc groupe. Sur ce bloc vous allez cliquer sur les trois petits points en haut à droite dans la barre d'outils du bloc. Maintenant, vous allez cliquer sur Ajouter comme bloc réutilisable, et vous allez donner un nom à votre bloc réutilisable.
Jusque-là finalement, tout se passe comme si on créait tout simplement un bloc réutilisable.
Et c'est là que le plugin qu'on a installé va rentrer en jeu.
Transformer le bloc réutilisable en composition
Grâce au plugin, nous avons maintenant un nouvel onglet dans le menu gauche de notre panneau d'administration WordPress. L'onglet blocs. Vous allez cliquer sur cet onglet et vous trouverez dedans votre bloc réutilisable que nous avons créé plus haut.
Dans une des colonnes, vous trouverez un bouton pour transformer ce bloc en composition.
Il vous suffit de cliquer dessus et tada ! votre bloc est maintenant une composition !
Utilisation des compositions
Il ne nous reste plus qu'à utiliser la composition dans une autre page. Pour ça on va créer une autre page qu'on va appeler page de test numéro 2. Dans cette page nous allons cliquer sur le plus bleu en haut à gauche afin d'ajouter un bloc Gutenberg mais nous n'allons pas ajouter un bloc classique, nous allons ajouter une composition.
On va donc choisir l'onglet composition, puis chercher les blocs réutilisables convertis, dans lequel on trouvera notre composition que nous avons créé ensemble.
Il suffira de la prendre et de la faire glisser et de la déposer jusque dans la page. Je vous laisse imaginer comme c'est pratique une fois qu'on a plusieurs compositions de prête pour composer très rapidement une page qui soit visuellement attractive !
Aujourd'hui, j'utilise cette méthode avec tous mes clients quand je réalise un site WordPress pour leur permettre de composer des pages par eux-mêmes très facilement tout en garantissant des pages qui soient très esthétiques 😉
