Create Block Theme 1,2,3 je crée un thème basé sur des blocs

Vous souhaitez créer un thème basé sur des blocs et le réutiliser sur un autre site ? Alors, créez facilement votre “propre” thème avec l’extension Create Block Theme, exportez-le et réimportez-le dans un autre site !

Dans cet article, je vous explique :

• brièvement, ce qu’est un thème WordPress basé sur des blocs (block theme)
• et surtout comment utiliser l’extension Create Block Theme pour créer et exporter un thème basé sur des blocs

Qu’est-ce qu’un thème WordPress basé sur des blocs (block theme) ?

Dans un thème classique, les éléments de balisage sont générés avec PHP et JavaScript, tandis que dans un thème basé sur des blocs, tous les éléments sont composés de blocs HTML et de CSS.

Les anciens fichiers que l’on connaissait tels que header.php, archive.php, footer.php… n’existent plus.

Ils ont été remplacés par des modèles et des éléments de modèles HTML.

Dans un thème basé sur des blocs, il est par conséquent possible de modifier non seulement le contenu des publications (pages, articles…), mais aussi toutes les zones du site : en-tête, pied de page, barres latérales, etc. via l’éditeur de site (bêta).

C’est ce que l’on appelle l’édition complète du site (Full Site Editing).

Bon, l’éditeur est toujours en mode bêta. Mais franchement, il faut bien l’avouer, pouvoir modifier les modèles et éléments de modèles selon nos souhaits est une grande avancée.

Découverte de l’extension gratuite Create Block Theme

Create Block Theme est une extension gratuite que l’on trouve dans le répertoire des extensions de WordPress.

Il s’agit d’un outil conçu pour compléter les outils existants dans l’éditeur de site.

En bref, vous pouvez créer votre thème personnalisé à l’aide de l’éditeur de site, puis utiliser cette extension pour exporter le thème afin de l’utiliser sur une autre installation WordPress.

Mais dans le détail, Create Block Theme est un peu plus que cela. Elle permet aussi de :

• Créer un nouveau thème, un thème vierge, un thème enfant ou une variation de style
• Répertorier, prévisualiser et supprimer les polices intégrées à votre thème
• Intégrer les polices Google Fonts dans votre thème
• Intégrer des polices locales dans votre thème

⚠️ ​​ Il s’agit d’un outil destiné au développement qui sert à créer de nouveaux thèmes. Par conséquent, ne l’utilisez pas sur un site Web déjà en ligne.

Les modes de création de thèmes de Create Block Theme

Create Block Theme possède différents modes de création de thèmes.

Export (Exporter) : Le thème actuel est exporté sous forme de fichier .zip, avec les modifications que vous avez apportées aux modèles, aux éléments de modèle et aux styles globaux.

Create child (Créer un thème enfant) : Crée un thème enfant avec le thème actuellement activé comme parent sous la forme d’un fichier .zip à télécharger.

Clone (Cloner le thème actuel) : Cette option copie votre thème actif et inclut toutes les modifications que vous lui avez apportées en utilisant un nouveau nom et génère un fichier .zip à télécharger.

Overwrite (Écraser les fichiers de thème) : Si vous avez apporté des modifications au thème actif et souhaitez qu’elles remplacent ses paramètres par défaut, cette option vous permet de le faire.

Create blank theme (Créer un thème vierge) : Génère un nouveau thème complètement vierge qui utilise le thème actuel. Pour l’activer, il faudra vous rendre sous Apparence/Thèmes.

Create a style variation (Créer une variation de style) : Enregistre vos modifications dans un fichier .json dont vous choisissez le nom.

Il est à noter que pour un thème enfant, un clone ou un thème vierge, il vous faudra ajouter les détails du thème.

Créer un thème basé sur des blocs en 3 étapes

Globalement, voici comment vous pouvez créer un thème WordPress basé sur des blocs :

1. Installez un thème basé sur des blocs WordPress
2. Personnalisez votre thème avec l’éditeur de site
3. Exportez votre thème avec Create Block Theme

1 Installez un thème basé sur des blocs WordPress et l’extension Create block Theme

En premier lieu, il vous faut installer un thème basé sur des blocs afin de pouvoir utiliser l’extension.

Alors, soit vous optez pour un des thèmes par défaut de WordPress :

• TT1 Blocks (version expérimentale basée sur des blocs du thème Twenty Twenty-One)
• Twenty Twenty-Two
• Twenty Twenty-Three

Ou bien encore, vous ajoutez l’un des thèmes basés sur des blocs du répertoire des thèmes en passant par Apparence/Thèmes/ajouter.

Perso, j’ai choisi le thème Blockpress. 😉

💡 ​​ Pour être sûr(e) qu’il s’agisse bien d’un thème compatible avec l’édition complète du site, pensez à cliquer sur “Thèmes basés sur des blocs”.

Ensuite, allez dans Extensions/ajouter et indiquez le mot-clé “create block theme”. Puis, installez et activez l’extension.

À présent, sous Apparence, se trouvent les menus :

• Create Block Theme avec ses différents modes de création de thème
• Manage Theme Fonts pour gérer les polices du thème

2 Personnalisez votre thème avec l’éditeur de site

Cela étant fait, accédez à Apparence/Éditeur (bêta) et ouvrez l’éditeur de site pour apporter les modifications que vous souhaitez au thème que vous avez activé.

Modifiez l’en-tête, le pied de page, les zones de contenu de votre thème selon vos souhaits.

Apportez des modifications aux styles, modèles et éléments de modèles de votre site et ajoutez-en si besoin.

À ce propos, si vous souhaitez inclure de nouvelles polices ou supprimer celles du thème, sachez que vous pouvez le faire facilement avec l’extension Create Block Theme. Pour ce faire, accédez à Apparence/Manage Theme fonts. Ici, vous visualisez les polices incluses dans le thème et pouvez les supprimer en cliquant sur “Remove Font Family”.

Si vous cliquez sur “Add Google font” ou “Add Local Font”, une nouvelle fenêtre s’affichera et vous permettra d’ajouter les polices souhaitées.

Ça y est, vous avez fait toutes les personnalisations que vous souhaitiez et vous êtes satisfait(e) du résultat ?

Alors, il ne vous reste qu’à exporter votre thème à présent.

3 Exportez votre thème de bloc avec Create block Theme

Pour réutiliser le thème sur d’autres sites Web, allez dans Apparence/Create Block Theme et choisissez la méthode d’export que vous préférez : “Export”, “Clone” ou “Create child”.

Cliquez sur le bouton “Generate”. Immédiatement, Create block Theme vous propose d’enregistrer le fichier .zip généré sur votre ordinateur.

Enregistrez-le pour votre future importation.

Importez et utilisez votre thème personnalisé

Pour importer votre thème basé sur des blocs dans un site, il vous suffira d’aller vers Apparence/Thèmes, puis de cliquer sur le bouton “Ajouter”.

Ensuite, vous cliquerez sur le bouton “Téléverser un thème”. Comme vous le constatez, c’est exactement la même démarche que lorsque vous importez un thème basique.

Sauf que cette fois, vous sélectionnerez le fichier .zip que vous aviez exporté avec Create block Theme.

Cliquez sur “Installer maintenant” et pour finir, activez le thème.

Si vous avez choisi “Create child” comme méthode d’exportation, alors sachez que le thème enfant créé ne comportera aucune image (screenshot).

Si cela vous ennuie, vous pouvez en créer une : choisissez une image d’une taille 1200×900 px, nommez-la screenshot. Puis, téléchargez-la dans /wp-content/themes/nomdevotrethemeenfant.

 D’autre part, attention, lorsque vous importerez le thème enfant, le thème parent devra obligatoirement être installé sur le site auparavant.

Et voilà, c’est fait, allez sur le site et admirez… 😉

Create Block Theme qu’en penser ?

Je ne suis pas encore une experte en thèmes basés sur des blocs, mais je trouve que la portabilité offerte par Create Block Theme est vraiment un aperçu du futur.

En effet, la possibilité de créer un thème basé sur des blocs personnalisé sans sortir de WordPress, puis de l’exporter afin de l’utiliser dans n’importe quel autre site pourrait bien changer la donne en termes de rapidité de création de site.

Avez-vous déjà testé l’extension Create Block Theme ?

Qu’en pensez-vous ?