skip to Main Content

Comment créer et utiliser les block réutilisable de Gutenberg

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

L’une des fonctionnalités les plus utiles (et sous-utilisées) de l’éditeur de blocs WordPress (également connu sous le nom de Gutenburg) est le bloc réutilisable. Si vous connaissez Divi ou d’autres constructeurs de pages, les blocs réutilisables remplissent la même fonction que les modules globaux . Ce sont des blocs (ou groupes de blocs) que vous configurez une fois, mais que vous pouvez ensuite réutiliser. 

Vous pouvez les insérer sur plusieurs pages et publications sans avoir à les modifier à nouveau. Et, si vous souhaitez les modifier à nouveau, les modifications peuvent être à l’échelle du site, ce qui vous fait gagner des heures sur la durée de vie d’un site. Explorons donc toutes les façons dont vous pouvez gérer vos blocs réutilisables WordPress.

Comment créer un bloc réutilisable dans WordPress

La création d’un bloc réutilisable dans WordPress est relativement simple. Dans tout article que vous modifiez avec l’éditeur de blocs (qui est par défaut dans WP 5.x sauf si vous utilisez le plugin Classic Editor ), vous pouvez rendre n’importe quel bloc que vous souhaitez réutilisable. Cliquez sur la liste déroulante à trois points dans les paramètres de survol du bloc et sélectionnez Ajouter aux blocs réutilisables .

ajouter aux blocs réutilisables

L’éditeur vous demandera de nommer le nouveau bloc pour une récupération ultérieure. Assurez-vous de le nommer quelque chose de mémorable pour la fonction qu’il servira sur votre site. Tels que les articles connexes ou l’ image de couverture pour les articles de blog ou quelque chose de tout aussi descriptif.

nommer votre nouveau bloc

Si vous faites une erreur lorsque vous créez le bloc réutilisable (ou avez simplement fait une erreur en le créant), vous pouvez cliquer à nouveau sur les paramètres de la liste déroulante et cliquer sur Supprimer des blocs réutilisables . Cette option efface tout le bloc de la base de données et vous pouvez répéter le processus ci-dessus pour l’ajouter à nouveau à la collection si vous le souhaitez.

Blocs réutilisables WordPress

De plus, vous pouvez simplement cliquer sur le bloc lui-même une fois qu’il a été enregistré pour trouver le bouton Modifier .

modifier un paragraphe réutilisable

Pour le bloc Paragraphe dans cet exemple, il vous donne la possibilité de le renommer. Les ajustements de chaque bloc seront cependant différents. Pour un bloc d’image, vous obtenez des options supplémentaires telles que l’insertion d’un autre fichier à partir de votre bibliothèque multimédia ou le téléchargement d’un nouveau, ainsi que l’alignement ou l’URL liée.

options d'image réutilisables

Ce processus fonctionne avec tous les blocs réutilisables que vous créez. Mais gardez à l’esprit que toutes les modifications que vous apportez à un bloc réutilisable de cette manière s’appliquent à toutes les autres instances de ce bloc sur votre site . Donc, si vous changez l’image en un seul bloc, la nouvelle image apparaîtra partout.

Comment insérer des blocs réutilisables

L’utilisation des blocs réutilisables dans WordPress est en fait très facile et simple. À l’intérieur de l’éditeur de blocs, vous pouvez cliquer sur n’importe quelle occurrence du + à l’intérieur d’un cercle pour trouver l’onglet Réutilisable . Le bouton + apparaît à droite de n’importe quel bloc, en dessous de tout bloc et dans la partie supérieure gauche de l’écran.

trouver l'onglet réutilisable dans l'éditeur

Lorsque vous insérez les blocs réutilisables que vous créez dans différentes publications et pages, ils peuvent également apparaître dans l’onglet Les plus utilisés , qui apparaît en haut de la liste chaque fois que vous appuyez sur le bouton +.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Blocs réutilisables WordPress

Celles-ci changeront à mesure que vous utiliserez différents blocs, mais si vous utilisez le même bloc réutilisable, disons, comme pied de page pour chaque article de blog, ils apparaîtront ici assez souvent.

Comment gérer tous les blocs réutilisables dans WordPress

Au bas de l’onglet Réutilisable , vous trouverez un lien Gérer tous les blocs réutilisables . En cliquant sur ce lien, vous accédez à une page d’aspect familier où chaque bloc réutilisable que vous avez créé est répertorié. La liste ressemblera à peu près exactement à la liste WordPress par défaut des publications et des pages.

Blocs réutilisables WordPress

En affichant la liste, vous voyez quelques options importantes. Importez à partir de JSON , exportez au format JSON et modifiez .

Utiliser Edit est exactement le même que ci-dessus pour éditer un bloc. Seulement au lieu d’être à l’intérieur d’un article particulier, le bloc apparaît dans son propre éditeur de type article dans lequel vous pouvez le mettre à jour et uniquement lui. Encore une fois, toutes les modifications apportées à ce bloc seront appliquées à l’échelle du site à chaque instance.

Blocs réutilisables WordPress

Pour exporter au format JSON , cliquer sur le bouton (3) vous donnera une boîte de dialogue (en fonction des paramètres de votre navigateur) pour choisir un emplacement pour télécharger le fichier JSON généré. Le fichier lui-même est simple JSON. Il montre le type de fichier (un bloc), le titre que vous lui avez donné lors de l’édition ou de la création, puis le code HTML réel qui sera inséré par WordPress pour rendre le bloc et son contenu sur le front-end du site.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Blocs réutilisables WordPress

L’importation à partir de JSON est tout aussi simple: vous trouvez le fichier JSON sur votre ordinateur, le télécharger comme n’importe quelle autre pièce jointe ou fichier.

Blocs réutilisables WordPress

Une fois que vous appuyez sur Importer , il apparaîtra dans votre liste de blocs réutilisables. Cependant, notez que si vous avez déjà un bloc du même nom (dans ce cas, le bloc réutilisable 1 ), le nouveau bloc importé ne sera pas renommé. Vous devez le faire manuellement pour les différencier.

Blocs réutilisables WordPress

Pourquoi importer et exporter des blocs réutilisables?

Il existe un certain nombre de raisons de les importer et de les exporter, mais les principales sont à des fins de sauvegarde et de portabilité. Vous souhaiterez probablement conserver une sauvegarde de tous les blocs et du contenu que vous jugez utile de diffuser sur votre site. La portabilité, le partage et les ventes sont également importants.

Si vous devez utiliser un bloc sur un autre site. À partager avec un coéquipier. Ou à vendre seul en tant que bloc réutilisable pour vos clients. Tout comme nos packs de mise en page hebdomadaires pour Divi , l’importation et l’exportation de blocs vous donnent la possibilité d’étendre le générateur de plusieurs façons. De plus, lorsque vous utilisez l’option Grouper les blocs (voir ci-dessous), vous pouvez importer et exporter des modèles et des mises en page entiers en tant que blocs réutilisables au format JSON.

Comment créer des groupes de blocs réutilisables dans WordPress

La création d’un groupe de blocs réutilisables permet de faire briller toute la fonctionnalité des blocs réutilisables. Au lieu d’avoir une seule image ou un seul paragraphe ou en-tête que vous pouvez insérer globalement, vous pouvez également regrouper les blocs Gutenberg et les enregistrer en tant que bloc réutilisable unique. Cela signifie que vous pouvez, par exemple, regrouper un bloc de titre, un bloc de paragraphe, un bloc d’image et un bloc HTML personnalisé pour avoir un formulaire d’adhésion par e-mail global pour toutes vos publications de l’éditeur de bloc.

Pour créer un groupe de blocs WordPress réutilisables, il suffit de cliquer tout en maintenant la touche Maj enfoncée sur les blocs pour les ajouter au groupe. Tous les blocs sélectionnés seront mis en évidence avec une bordure bleue.

Blocs réutilisables WordPress

Ensuite, vous appuyez sur le bouton Transformer (2) et sélectionnez Groupe dans la liste déroulante (3) . À ce stade, vous verrez les blocs fusionner en un seul bloc. Vous transformez ensuite le bloc de groupe en un bloc réutilisable de la même manière que vous le faites ci-dessus avec tout autre bloc unique.

Blocs réutilisables WordPress

Ce nouveau groupe apparaîtra alors dans la liste de tous les blocs réutilisables et sous l’ onglet Réutilisable lorsque vous ajouterez un nouveau bloc à une publication ou une page.

Comment créer un modèle réutilisable

Nous avons discuté plus tôt qu’un bloc réutilisable dans WordPress est un élément global. Cela signifie que toute modification apportée à une instance du bloc affectera toutes les autres instances. Si vous modifiez le texte ou l’image d’un bloc réutilisable, cette modification s’appliquera à l’ensemble du site. Cependant, vous pouvez utiliser des blocs réutilisables comme modèles pouvant être modifiés individuellement. Encore une fois, tout comme nos mises en page Divi, l’éditeur de blocs permet d’insérer le bloc général (ou groupe de blocs) de votre bibliothèque, puis de modifier le contenu sur une publication ou une page individuelle (ou même bloc par bloc) base.

Pour ce faire, insérez un bloc réutilisable dans l’éditeur, comme nous l’avons vu ci-dessus. Appuyez sur le + dans un cercle , accédez à Réutilisable , puis sélectionnez le bloc que vous souhaitez insérer.

insertion d'un bloc réutilisable pour le modèle

Lorsque le bloc apparaît, cliquez sur les trois points pour ouvrir le menu déroulant . Sélectionnez Convertir en bloc normal . Remarque: ne sélectionnez pas Supprimer des blocs réutilisables .

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Blocs réutilisables WordPress

Convertir en bloc normal s’applique uniquement à ce bloc unique . Lorsque vous utilisez Convertir en bloc standard , vous dites à WordPress que vous souhaitez que ce bloc unique (et uniquement celui-ci) soit indépendant des modifications globales à l’échelle du site. Toute modification que vous apportez à d’autres blocs réutilisables ne s’appliquera pas à un bloc converti, et ces modifications ne s’appliqueront pas globalement.

La sélection de Supprimer des blocs réutilisables supprime tout du répertoire global. Les blocs que vous avez déjà insérés resteront où ils se trouvent, mais ils ne partageront plus aucun trait global. Vous ne pourrez pas non plus les réinsérer à partir de l’onglet Réutilisable (ce qui peut être évident). Cela irait à l’encontre du but d’avoir le bloc réutilisable comme modèle, nous ne suggérons donc pas de le faire.

Cependant, en utilisant Convertir en bloc régulier , vous pouvez insérer le modèle de base pour le bloc (ou groupe de blocs) et supprimer uniquement cette instance particulière de celui-ci des normes globales, ce qui rend la fonction de bloc réutilisable d’origine comme modèle pour d’autres publications et Pages. Vous pouvez voir cette fonctionnalité en vigueur dans notre tutoriel sur l’ajout de blocs de mise en page Divi réutilisables aux articles de blog .

Conclusion

Les blocs réutilisables sont l’une des principales fonctionnalités de Gutenberg Block Editor. De la possibilité de partager des blocs et du contenu entre des sites et des amis et de les utiliser comme modèles pour des éléments communs sur votre site, tirer parti de la fonction de blocs réutilisables peut faire passer la création et la conception de votre publication et de votre page à de nouveaux niveaux d’utilité, de créativité et d’utilisateur expérience.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
0 Partages
Partagez
Tweetez
Enregistrer