Vous souhaitez créer un bloc réutilisable dans l’éditeur de blocs de WordPress ?
Les blocs réutilisables, désormais connus sous le nom de compositions, vous permettent d’enregistrer n’importe quel bloc de contenu et de le réutiliser dans d’autres publications et pages de votre site. Cela permet d’enregistrer du temps et des efforts et de dynamiser votre flux de travail éditorial.
Dans cet article, nous allons vous afficher comment créer facilement un bloc réutilisable dans l’éditeur de blocs de WordPress, étape par étape.
Qu’est-ce qu’un bloc réutilisable (composition) dans WordPress ?
Les compositions, anciennement appelées blocs réutilisables, sont des fonctionnalités puissantes de l’éditeur de blocs de WordPress qui vous permettent d’enregistrer une collection de blocs pour les réutiliser facilement sur l’ensemble d’un site.
De nombreux blogueurs ajoutent souvent les mêmes extraits de contenu dans plusieurs articles, tels que des appels à l’action à la fin de la publication du blog ou des liens sur ce lien pour suivre le blog WordPress sur les réseaux sociaux.
De nombreux utilisateurs/utilisatrices enregistrent leurs extraits de contenu réutilisables sous forme de fichiers texte sur leur ordinateur, puis les copient et les collent en cas de besoin.
Cependant, l’éditeur de blocs Gutenberg résout ce problème avec la fonctionnalité des compositions en avant.
Vous pouvez facilement créer une composition à l’aide d’un bloc et l’enregistrer dans l’éditeur de publications. Ce bloc peut ensuite être inséré dans n’importe quelle publication ou page WordPress sans avoir à recréer le contenu à partir de zéro.
Cela permet d’enregistrer du temps et aussi de maintenir une conception ou un style cohérent entre les pages ou les publications. Voici quelques-uns des scénarios dans lesquels un bloc réutilisable (composition) peut vous aider à travailler plus efficacement :
- Demander aux utilisateurs/utilisatrices de vous suivre sur les réseaux sociaux à la fin de chaque article.
- Ajout de boutons d’appel à l’action dans vos publications et pages WordPress
- Enregistrer et réutiliser les tableaux
- Ajouter rapidement des formulaires de retour à vos pages
- Ajouté manuellement des bannières d’affiliation en ligne
- Enregistrer et réutiliser les blocs imbriqués
Cela dit, voyons comment créer facilement un bloc réutilisable dans l’éditeur de blocs de WordPress.
Comment créer une composition de blocs (bloc réutilisable) dans l’éditeur Gutenberg de WordPress ?
Tous les blocs Gutenberg sont des éléments de contenu individuels dans l’éditeur WordPress qui peuvent également être enregistrés en tant que compositions. Tout d’abord, vous devez ouvrir une publication existante ou nouvelle pour commencer à créer un bloc réutilisable.
Une fois que vous avez fait cela, cliquez sur le bouton « Ajouter un bloc » (+) dans le coin supérieur gauche de l’écran.
Cela ouvrira le menu du bloc, où vous pouvez ajouter un module que vous souhaitez réutiliser sur plusieurs pages ou publications. Ensuite, ajoutez le contenu au bloc selon vos préférences.
Pour ce tutoriel, nous choisirons le bloc Paragraphe pour créer une composition pour un extrait de contenu CTA.
Vous pouvez styliser davantage votre bloc en utilisant différentes options de la barre d’outils des blocs en haut ou du panneau des blocs à droite.
De plus, vous pouvez ajouter des liens vers vos profils de réseaux sociaux et ajouter différents éléments de typographie.
Une fois cela fait, cliquez sur le bouton de menu à trois points dans la barre d’outils du bloc.
Un menu déroulant s’ouvre alors, dans lequel vous devez sélectionner l’option « Créer une composition ».
Ensuite, il vous sera demandé de saisir un nom pour la composition. Nous vous recommandons d’utiliser un nom qui vous aide à identifier rapidement le bloc et ce qu’il fait.
Ensuite, vous pouvez sélectionner n’importe quelle catégorie par défaut dans le menu déroulant. Cela vous aidera à organiser tous les blocs réutilisables si vous avez l’offre de créer et d’utiliser beaucoup de compositions sur votre site.
Il vous suffit ensuite de cliquer sur le bouton « Créer » pour stocker vos modifications.
Votre composition sera maintenant enregistrée dans la base de données de WordPress avec toutes ses compositions.
Comment ajouter des compositions WordPress dans les publications et les pages
Maintenant que nous avons appris à créer une composition dans WordPress, voyons comment l’ajouter à vos publications et pages WordPress.
Encore une fois, vous devez ouvrir une nouvelle publication ou une publication existante où vous souhaitez ajouter le bloc réutilisable dans les éditeurs/éditrices Gutenberg. À partir de là, cliquez sur le bouton » Ajouter un bloc » (+) dans le coin supérieur gauche de l’écran et passez à l’onglet » Compositions » depuis le haut.
Vous y trouverez une notification de toutes les catégories par défaut proposées par la fonctionnalité de composition. Vous devez maintenant cliquer sur la catégorie que vous avez sélectionnée pour votre bloc réutilisable.
Par exemple, nous avons choisi la catégorie « Appel à l’action » parce que nous voulions créer une composition réutilisable pour les publications CTA.
Si vous n’avez sélectionné aucune catégorie pour votre bloc, votre composition sera stockée dans l’onglet « Uncategorized ».
Lorsque vous cliquez sur une catégorie, un nouveau prompt s’ouvre à côté du menu de blocs, listant toutes les compositions enregistrées dans cette catégorie spécifique.
Ici, il suffit de cliquer sur le bloc réutilisable que vous avez créé, et il sera automatiquement ajouté à votre page ou publication WordPress.
Si cela vous semble un peu compliqué, vous pouvez simplement ajouter un / dans l’éditeur de blocs et rechercher la composition en utilisant le nom que vous lui avez donné.
Une liste de blocs s’ouvre instantanément, dans laquelle vous pouvez facilement choisir la composition.
Vous pouvez également modifier le bloc réutilisable en cliquant sur l’option « Modifier l’original » dans la barre d’outils du bloc en haut.
Veuillez toutefois garder à l’esprit que la modification des Réglages du motif les modifiera dans tous les Emplacements où vous avez utilisé le motif.
Vous accéderez ainsi à un nouvel écran de l’éditeur de blocs, dans lequel vous pourrez modifier le contenu de la composition. Vous pouvez également ajouter d’autres blocs pour personnaliser la composition.
Une fois que vous avez terminé, il vous suffit de cliquer sur le bouton « Mettre à jour » pour enregistrer vos modifications.
Vous pouvez à présent ouvrir à nouveau la publication, où vous verrez la composition mise à jour en action.
Toutefois, si vous souhaitez simplement apporter des modifications à une composition dans une publication spécifique, vous devrez cliquer sur l’icône à trois points dans la barre d’outils des blocs.
Un prompt s’ouvre, dans lequel vous devez choisir l’option « Détacher ». Modifié, le motif sera converti en bloc régulier et les modifications que vous apporterez n’affecteront pas la composition originale.
Gestion de toutes les compositions dans l’éditeur/éditrices de WordPress
Après avoir utilisé des compositions pendant un certain temps, il se peut que vous ayez des blocs que vous n’utilisez plus ou que vous souhaitez renommer.
WordPress vous permet de gérer facilement toutes vos compositions à partir d’un seul écran. Si vous utilisez un thème plus ancien, rendez-vous sur la page Apparence » Compos itions dans le tableau de bord WordPress.
Cela vous dirigera vers une nouvelle page où vous pourrez facilement gérer toutes les compositions réutilisables sur votre site WordPress.
Vous pouvez y modifier, supprimer, importer ou même exporter vos blocs vers un autre site.
Cependant, si vous utilisez un thème en bloc, alors cette option ne sera pas disponible pour vous. Dans ce cas, vous pouvez gérer toutes vos compositions en vous rendant sur la page Apparence » Éditeurs/éditrices depuis la colonne latérale de l’administration de WordPress.
L’éditeur de site complet s’ouvre, et vous devez cliquer sur l’onglet « Compositions » dans la colonne de gauche pour le déplier. Vous pouvez maintenant cliquer sur l’option « Gérer toutes mes compositions ».
Vous êtes maintenant redirigé vers la page « Compositions », où vous pouvez modifier ou supprimer des compositions.
Vous pouvez également cliquer sur le bouton « Ajouter une nouvelle composition » pour créer un nouveau bloc réutilisable.
Comment importer / exporter des blocs réutilisables (compositions) ?
Les compositions ne sont pas uniquement réutilisables sur le site pour lequel elles ont été créées. Vous pouvez également les utiliser sur n’importe quel autre site WordPress.
Pour exporter les blocs réutilisables de la page des compositions, cliquez sur le lien » Exporter en JSON » situé sous le bloc. WordPress vous enverra alors le bloc sous la forme d’un fichier JSON que vous pourrez enregistrer sur votre ordinateur.
Vous pouvez maintenant basculer dans la zone d’administration d’un autre site WordPress. À partir de là, visitez l’écran de gestion des compositions et cliquez sur le bouton » Importation à partir de JSON » en haut.
Une fenêtre de téléversement de fichiers s’affiche, dans laquelle vous devez cliquer sur le bouton « Choisissez un fichier » pour sélectionner le bloc que vous avez téléversé précédemment.
Cliquez ensuite sur le bouton « Importation ».
WordPress va maintenant importer votre composition et l’enregistrer dans sa base de données. Vous pouvez maintenant commencer à utiliser les blocs réutilisables nouvellement importés sur votre autre site WordPress.
Pour des instructions détaillées, consultez notre guide étape par étape sur l’importation/exportation de vos blocs de contenu WordPress (avec captures d’écran).
Astuces pour maîtriser l’éditeur de blocs de WordPress
Ajouté à l’ajout de compositions pour améliorer votre flux de travail éditorial, vous pouvez également utiliser certaines autres astuces de l’éditeur de blocs WordPress pour rationaliser votre processus de création de contenu.
Cela peut améliorer la productivité et vous aider à vous concentrer davantage sur le contenu de votre site.
Vous pouvez facilement maîtriser l’éditeur de blocs en mémorisant les blocs que vous utiliserez le plus sur votre site, tels que les blocs de paragraphes, d’images, de titres ou de boutons.
Une fois que vous avez fait cela, vous êtes en mesure de réorganiser votre écran de modification pour afficher la barre d’outils de bloc en haut de la page. Vous pouvez même utiliser le mode sans distraction pour retirer les distractions telles que le panneau d’administration, le menu du bloc, la colonne latérale d’administration de WordPress, et plus encore.
Pour des instructions détaillées, consultez notre tutoriel sur l’utilisation de l’éditeur plein écran sans distraction dans WordPress.
Une autre astuce étonnante consiste à commencer à utiliser le bloc de colonnes pour donner à votre contenu un aspect de magazine, ajouter des vidéos YouTube, ajouter des images de couverture, modifier les couleurs des paragraphes, et bien d’autres choses encore.
En savoir plus, consultez notre liste des meilleures astuces pour maîtriser l’éditeur de contenu de WordPress.
Nous espérons que cet article vous a aidé à apprendre comment créer un bloc réutilisable dans l’éditeur de blocs WordPress. Vous voudrez peut-être aussi consulter notre guide du débutant sur la façon de modifier une page d’accueil WordPress ou nos choix d’experts pour les meilleurs thèmes WordPress compatibles avec Gutenberg.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Jiří Vaněk says
Thank you for this article. In this way, I created several blocks in Gutenberg, which I add under articles by category. But I searched for a while in the settings, because I couldn’t find « reusable block » according to the instructions, but then I understood that this function was only renamed.
David says
In the drop down menu as describe when hitting the three dots. I did not see create reuasble block. I would have love to take a screenshot to show you what my drop down menu shows, but it is not allow here. What are my alternatives.
WPBeginner Support says
There was a recent naming change, you would want to use create pattern from the dropdown and we will look to update this article soon
Administrateur
Johnny Rodriguez says
How can I add a featured image to a reusable block?
WPBeginner Support says
Featured images are for post types and not individual blocks at the moment. You can certainly add an image block if you wanted to add an image in the content.
Administrateur
Angie says
I’m trying to create a reusable block with several lines of text, however, when I add a new line of text, it creates a new block. I need all of the text in one block. How do I do this?
WPBeginner Support says
If you use shift enter to go to your next line instead of only using enter you should stay within the block.
Administrateur
Julius Gashumba says
Convert to Regular Block has been changed. It no longer appears where it used to be. Any ideas?
WPBeginner Support says
When hovering over the block, you should see the convert option
Administrateur
Chika says
All is well here. However, what I need is just the color background on my my reusable block so that I can type whatever I want whenever I use it.
If I change the reusable block back to normal block before making changes, the background color disappears. This is not what I want.
Is there a way to do that?
WPBeginner Support says
For what you’re wanting to do, you would want to take a look at our article below:
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-gutenberg-block-in-wordpress/
Administrateur
Charles Burns says
Is there a way to save just the formatting of a block I can use again?
Say, for instance, I spend time changing the colour and styling options of a particular block and want to reuse those options with different content each time. Is this possible?
Saving it as a reusable block saves all the content as well.
WPBeginner Support says
For something like that you could create a custom block we have an article on this below:
https://www.wpbeginner.com/wp-tutorials/how-to-create-a-custom-gutenberg-block-in-wordpress/
Administrateur
Cartrell says
Ha! I never even noticed that Add To Reuseable blocks feature was there. Thanks, guys.
– C. out.
WPBeginner Support says
Glad we could show you something new
Administrateur
Sandra says
Thanks for the great information. How would I add a signature block? Not just a typed name, but an actual signature?
WPBeginner Support says
For most sites, an image is used for that type of signature block
Administrateur
Don says
Thanks for the suggestions and pointing me to your guides.
After some troubleshooting my problem seems to be related to website hosting. Reusable Blocks now do work as expected with new identical fresh WP installs on different host servers. The only discernible difference between servers is the PHP version.
WPBeginner Support says
Thanks for sharing what appears to be the cause of the problem
Administrateur
Don says
I suddenly lost Reusable Blocks. Other Blocks continue to work but Reusable is no longer a category when creating a new Block. Either is the 3-dot menu option of « Add to Reusable Blocks » from an existing Block.
Any suggestions to restore would be appreciated outside of a complete new install.
WPBeginner Support says
Have you tried disabling your plugins to see if it could be due to a plugin or theme conflict? https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
Administrateur
Don says
Thanks for the reply. First thing I tried was disabling Plugins, then changing Themes, and finally resorting to a simple fresh install.
I did post on the WordPress support forum for suggestions.
WPBeginner Support says
You may want to try enabling the error log to see if there is an error being hidden by default that error logging would show. You can set up error logging using the method in our article here: https://www.wpbeginner.com/wp-tutorials/how-to-set-up-wordpress-error-logs-in-wp-config/
luca says
Very nice!
WPBeginner Support says
Glad you liked it
Administrateur
Rintesh Roy says
This is a great feature!
WPBeginner Support says
Glad we could bring it to your attention
Administrateur
Lee says
Reusable blocks are one of the only good features of the new editor, unfortunately the fact that they can be converted to a regular block negates any positive they have.
Say you have a call to action, that includes a link. You use that reusable block many times but several times convert it to a regular block. A year later you need to change the link that is in that call to action. You edit the reusable block and the link changes across your site EXCEPT where it was converted to a regular block. Not a big deal if it is only a few times. A much BIGGER deal if it is dozens of authors, and hundreds of posts that converted that reusable block to a regular block.
Reusable blocks could have helped solve this data management problem but by allowing them to be converted to regular blocks they just make the problem worse. The better solution, surprise surprise, is a shortcode that is easy to edit in the backend and not have to mess with post content.
WPBeginner Support says
Hi Lee,
Reusable blocks are particularly useful in saving block settings, formatting, and content. Now, if a user changes them to a regular block just so they can edit those things, then they should be aware that it is a ‘regular block’ not a reusable block anymore.
Administrateur