Vous avez passé 20 minutes sur un bloc d’appel à l’action soigné. Vous avez peaufiné les couleurs, les marges et le texte. Une semaine plus tard, vous vous retrouvez à reconstruire le même bloc de zéro sur un autre site. Cela vous semble familier?

Copier manuellement des blocs d’un site WordPress à l’autre vous fait perdre des heures que vous n’avez pas. Mais Gutenberg a résolu ce problème depuis longtemps: les blocs réutilisables associés à l’export JSON vous permettent de transférer n’importe quel bloc vers un autre site en moins d’une minute. Sans extension, sans export complet de la base de données, sans vous débattre avec des imports XML.

Ce guide vous accompagne à chaque étape, de la création d’un bloc réutilisable à son importation sur un site distinct. Avec en complément une extension alternative qui simplifie encore le processus.

💡 Aperçu rapide:

• Créez un bloc dans l’éditeur Gutenberg et convertissez-le en bloc réutilisable
• Exportez-le sous forme de fichier JSON via l’interface de gestion des blocs
• Importez le fichier JSON sur le site WordPress cible, et le bloc est prêt à l’emploi
• En alternative, l’extension Blocks Export Import vous permet d’exporter n’importe quel bloc, pas seulement les blocs réutilisables

Qu’est-ce qu’un bloc réutilisable et pourquoi vous en avez besoin

Un bloc réutilisable dans Gutenberg est un gabarit de contenu enregistré que vous créez une fois, puis insérez dans n’importe quel article ou page. Modifiez le bloc d’origine et les changements se répercutent partout où il est utilisé.

Cas d’usage typiques:

• Une note de remerciement ou une signature à la fin de chaque article
• Une bannière avec une promotion ou un formulaire d’abonnement
• Un bloc avec des coordonnées, des mentions légales ou des droits d’auteur
• Un diaporama d’images ou une galerie réutilisé sur plusieurs pages

Avant Gutenberg, vous auriez conservé ce genre d’extraits dans un fichier texte sur votre bureau et les auriez collés depuis le presse-papiers. Désormais, cela fonctionne au niveau du cœur de WordPress et se transfère entre sites.

Remarque importante: si un bloc dépend d’une extension tierce (par exemple, les blocs de Getwid ou de Stackable), cette même extension doit être installée sur le site cible. Sinon, le bloc s’ouvrira avec une erreur ou perdra une partie de ses styles.

1. Créer un bloc réutilisable

Ouvrez l’éditeur Gutenberg via Articles → Ajouter. Cliquez sur l’icône Ajouter un bloc (+) dans la barre d’outils supérieure et choisissez le type de bloc dont vous avez besoin. Dans l’exemple ci-dessous, il s’agit d’un simple bloc paragraphe:

Configurez le bloc: ajoutez du texte, des liens, une couleur de fond, des marges internes, tout ce dont vous avez besoin pour l’aspect final. Dans notre exemple, le résultat est un bloc de remerciement avec des liens vers les réseaux sociaux et un fond coloré:

Voici à quoi ressemble le bloc terminé après les ajustements de style et de texte:

Pour l’instant, il s’agit d’un bloc classique. Pour le rendre réutilisable, cliquez sur l’icône Plus d’options (trois points) dans la barre d’outils du bloc et sélectionnez Ajouter aux blocs réutilisables:

Donnez un nom au bloc et cliquez sur Enregistrer. Voilà: le bloc apparaît maintenant dans la bibliothèque de blocs réutilisables de votre site.

2. Utiliser un bloc réutilisable dans vos publications

Ajouter un bloc sauvegardé à une publication ou une page ne prend que quelques clics. Dans l'éditeur Gutenberg, cliquez sur Ajouter un bloc (+), basculez vers l'onglet Blocs réutilisables et choisissez celui dont vous avez besoin:

Après avoir inséré le bloc, cliquez sur Aperçu ou Publier et vérifiez le résultat sur le front-end:

Le bloc fonctionne avec tous les types de publication compatibles avec l'éditeur Gutenberg: articles, pages, types de publication personnalisés. Créez-le une fois, utilisez-le partout.

3. Exporter le bloc au format JSON

Une fois le bloc prêt et testé, vous pouvez l'exporter pour le transférer vers un autre site. Dans l'éditeur Gutenberg, cliquez sur l'icône Plus d'outils et d'options (les trois points dans le coin supérieur droit) et sélectionnez Gérer tous les blocs réutilisables:

Un écran listant tous les blocs réutilisables du site s'ouvre. Pour l'instant, il n'y en a qu'un seul, le message de remerciement. Au fur et à mesure que vous créerez d'autres blocs, la liste s'allongera:

Survolez le nom du bloc et vous verrez un lien Exporter en JSON. Cliquez dessus:

Votre navigateur téléchargera un fichier avec l'extension .json. Enregistrez-le dans un dossier approprié sur votre ordinateur:

Le fichier JSON contient la structure complète du bloc: le balisage HTML, les styles, les attributs, les blocs imbriqués. C'est un fichier autonome prêt à être importé sur n'importe quel site WordPress où Gutenberg est actif.

4. Importer le bloc sur un autre site

Sur le site WordPress cible, ouvrez l'éditeur Gutenberg (Articles → Ajouter). Cliquez à nouveau sur Plus d'outils et d'options et sélectionnez Gérer tous les blocs réutilisables:

Sur l'écran des blocs, cliquez sur le bouton Importer depuis JSON, choisissez le fichier que vous avez téléchargé précédemment, puis cliquez sur Importer:

C'est fait. Le bloc importé apparaît dans la liste et est immédiatement disponible pour insertion dans vos publications:

À partir de là, vous pouvez utiliser le bloc sur le second site exactement comme vous le feriez sur le premier. Répétez la procédure pour autant de blocs que vous le souhaitez; il n'y a aucune restriction.

Méthode alternative: l'extension Blocks Export Import

La méthode manuelle qui passe par la conversion en bloc réutilisable fonctionne dans la plupart des cas, mais elle a une limite: vous pouvez uniquement exporter des blocs réutilisables. Un bloc standard que vous venez de concevoir doit d'abord être converti avant de pouvoir être exporté.

L’extension Blocks Export Import de ThemeIsle supprime cette limitation. Elle ajoute un bouton d’export directement dans le menu de n’importe quel bloc, sans étape de conversion intermédiaire.

Installez et activez l’extension, puis ouvrez l’éditeur Gutenberg et créez un bloc. Une nouvelle option Export JSON apparaît dans le menu Plus d’options:

Un fichier JSON contenant la structure complète du bloc est téléchargé sur votre ordinateur. Pour l’importer sur un autre site, cliquez sur Ajouter un bloc (+), basculez vers l’onglet Widgets et sélectionnez Importer des blocs depuis un fichier JSON:

Cliquez ensuite sur Choisir un fichier, sélectionnez le fichier JSON sur votre ordinateur, puis cliquez sur Téléverser:

Cette méthode par extension présente une limite: les blocs importés de cette façon ne sont pas enregistrés dans la bibliothèque de blocs réutilisables du site. Ils existent uniquement sous forme de fichier JSON sur votre ordinateur. La méthode manuelle (sections 1 à 4), en revanche, stocke le bloc dans la base de données WordPress, ce qui le rend accessible via l’interface standard de gestion des blocs.

Le choix de la méthode dépend de votre contexte: pour un transfert ponctuel entre vos propres sites, utilisez l’extension (c’est plus rapide); pour un travail continu avec une bibliothèque de blocs sur plusieurs sites, privilégiez l’export natif des blocs réutilisables.

Vidéo: exporter et importer des blocs Gutenberg en pratique

Regardez un court tutoriel vidéo qui montre le cycle complet, de la création d’un bloc réutilisable à son importation sur un autre site WordPress:

⁉️🤔 Questions fréquentes

Puis-je exporter plusieurs blocs dans un seul fichier?

Oui. Sélectionnez plusieurs blocs dans l’éditeur (maintenez Maj enfoncée et cliquez sur chacun d’eux), regroupez-les via Ajouter aux blocs réutilisables, puis exportez le groupe obtenu sous forme d’un seul fichier JSON. L’extension Blocks Export Import prend également en charge les exports multiples: sélectionnez les blocs et choisissez Export JSON, tous les blocs sélectionnés se retrouvent alors dans un seul fichier.

Que faire si un bloc importé s’affiche incorrectement?

Trois causes probables. Premièrement: l’extension dont dépend le contenu importé (Getwid, Stackable, Kadence Blocks ou similaire) n’est pas installée sur le site cible. Installez l’extension et réimportez. Deuxièmement: les thèmes des deux sites diffèrent sensiblement en matière de CSS, ce qui peut entraîner l’héritage de polices ou d’espacements inadaptés pour le bloc. Ajustez dans les paramètres du bloc ou ajoutez du CSS personnalisé. Troisièmement: le fichier JSON a été corrompu pendant le transfert; téléchargez-le et importez-le à nouveau.

Comment distinguer un bloc standard d’un bloc réutilisable dans l’éditeur?

Un bloc réutilisable dans l’éditeur Gutenberg est mis en évidence par une bordure violette et comporte une icône de réutilisation (deux flèches en boucle) dans la barre d’outils. Un bloc standard a une bordure bleue sans icône particulière. Survoler un bloc réutilisable affiche son nom.

Les styles du thème sont-ils conservés lors de l’export d’un bloc?

Partiellement. Le JSON inclut le balisage en ligne et les attributs du bloc (couleur de fond, taille du texte, dégradés, tout ce qui est défini via les paramètres de Gutenberg). Les styles définis dans le fichier style.css du thème actif ne sont pas inclus dans le JSON: ils appartiennent au thème, pas au bloc. Sur un autre site avec un thème différent, le bloc peut donc avoir un rendu différent. Pour les blocs dont le design est critique, définissez les styles clés via les paramètres propres du bloc plutôt que par le CSS du thème.

Existe-t-il une limite de taille pour le JSON exporté?

Techniquement non, mais des blocs très volumineux contenant des dizaines d’éléments imbriqués peuvent produire un fichier JSON de plusieurs mégaoctets. Lors de l’import d’un tel fichier, la directive upload_max_filesize de la configuration PHP du serveur entre en jeu (la valeur par défaut est de 2 Mo). Si le JSON dépasse cette limite, augmentez la directive dans le fichier php.ini ou divisez le bloc en éléments plus petits.

Quand l’export manuel surpasse une extension

La méthode manuelle via les blocs réutilisables est intégrée au cœur de WordPress. Elle ne dépend pas de mises à jour tierces, n’ajoute aucun code supplémentaire à votre site et enregistre les blocs dans la base de données, ce qui vous permet de les consulter dans l’interface de gestion standard.

L’extension Blocks Export Import l’emporte en rapidité lorsque vous avez simplement besoin de récupérer un bloc et de le transférer immédiatement sans l’enregistrer dans la bibliothèque. Mais si vous travaillez de façon systématique avec un ensemble de blocs standards sur plusieurs sites, apprenez à maîtriser l’export natif réutilisable. Une bibliothèque de blocs accessible depuis n’importe quel article finit par rentabiliser ce clic de conversion supplémentaire.

Testez les deux méthodes sur une paire de sites témoins et choisissez celle qui s’intègre le mieux à votre flux de travail. Dix minutes de paramétrage aujourd’hui vous feront gagner des dizaines d’heures sur une année.