Développer un thème rapidement avec Create Block Theme

Les Block Themes (les thèmes basés sur les blocs) sont relativement simples. Ils sont constitués d’un ensemble de modèles et sont gouvernés par un fichier theme.json qui contient tous les réglages généraux du thèmes et des blocs le composant. Si vous avez besoin de PHP personnalisé, tout se passe dans le fichier functions.php, exactement comme pour un thème classique.

En surface c’est relativement simple mais dans la pratique, gérer un fichier JSON à la main peut être assez pénible et coder les modèles de page peut vite devenir un enfer.

Dans cet article on va découvrir l’extension Create Block Theme qui, comme son nom l’indique, permet de créer rapidement un Block Theme. Cette extension essentielle va grandement accélérer nos développements et aussi permettre d’éviter des erreurs qui pourraient largement passer inaperçues.

Sans Create Block Theme

Si vous souhaitez créer un Block Theme, il vous suffit de quelques étapes simples :

• Créez un dossier dans wp-content/themes pour le thème.
• Ajoutez un fichier theme.json, un fichier functions.php et un fichier style.css.
• Ajoutez les métadonnées nécessaires dans style.css pour que WordPress reconnaissent le thème.
• Créez un dossier templates/ et un fichier index.html dans ce dernier.
• Complétez le fichier theme.json avec les réglages de votre thème.
• Personnalisez index.html et créez vos autres modèles de page.

Si vous voulez en savoir plus sur le fichier theme.json et comprendre sa structure et les réglages possibles, vous pouvez consulter l’article Comprendre le fichier theme.json.

Là où réside la plus grande difficulté c’est de mettre en place les modèles de page mais heureusement WordPress nous fournit un éditeur de site.

L’éditeur de site est très pratique car il permet d’éditer visuellement les modèles. On a donc une prévisualisation en direct des modèles du thème : il suffit de cliquer sur les éléments pour les personnaliser, de sauvegarder, et les modifications sont prises en compte.

Par contre, quand vous effectuez une personnalisation dans l’éditeur de site, cette dernière est écrite en base de données. Que ce soit une modification d’une couleur, d’un réglage de typographie ou même d’une modification de modèle, cette modification est inscrite en base de données.

C’est à la fois très pratique et à la fois très surprenant.

Pratique car pour un utilisateur lambda, c’est très simple : il modifie le modèle, sauvegarde sa modification et ça marche. Il n’a pas forcément besoin de créer un thème enfant et de surcharger le modèle dans ce thème enfant comme on doit le faire avec un thème classique. Il n’y a même pas besoin d’un éditeur de code. Toutes les personnalisations se font visuellement.

Surprenant, car tout est en base de données : tout le balisage du modèle modifié se retrouve en base dans la table wp_posts aux côtés de vos articles, comme si c’était un contenu normal.

Si vous créez un thème comme indiqué précédemment puis construisez les modèles à l’aide de l’éditeur de site, alors tous les modèles seront en base de données et le thème ne sera qu’une coquille vide, inutilisable pour les autres utilisateurs, car il ne contiendra qu’un fichier index.html vide et un theme.json incomplet.

Vous ne pouvez pas livrer votre base de données aux utilisateurs de votre thème. Il faut inscrire tous les changements effectués via l’éditeur de site dans les fichiers du thème.

Ecrire le code à la main

Le code des modèles ressemble à ça :

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query {"layout":{"inherit":true}} -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
        <!-- wp:group -->
        <div class="wp-block-group">
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-featured-image {"isLink":true} /-->
            <!-- wp:post-content /-->
            <!-- wp:group {"layout":{"type":"flex"}, "style":{"typography":{"fontSize":"14px"}}} -->
            <div class="wp-block-group" style="font-size:14px">
                <!-- wp:post-author {"showAvatar":false,"showBio":false} /-->
                <!-- wp:post-date {"isLink":true} /-->
                <!-- wp:post-terms {"term":"category"} /-->
                <!-- wp:post-terms {"term": "post_tag"} /-->
            </div>
            <!-- /wp:group -->
            <!-- wp:spacer {"height":40} -->
            <div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
            <!-- /wp:spacer -->
        </div>
        <!-- /wp:group -->
        <!-- /wp:post-template -->
        <!-- wp:group {"layout":{"inherit":true}} -->
            <div class="wp-block-group">
            <!-- wp:query-pagination -->
                <!-- wp:query-pagination-previous /-->

                <!-- wp:query-pagination-numbers /-->

                <!-- wp:query-pagination-next /-->
            <!-- /wp:query-pagination -->
            </div>
            <!-- /wp:group -->
        </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Il est constitué de commentaires HTML qui font référence à des blocs ainsi que de quelques balises HTML.

Plusieurs problèmes se posent. D’abord, il faut connaitre les slugs des blocs du cœur de WordPress. Ce n’est pas forcément compliqué, car c’est relativement intuitif, mais il faut le savoir. Vous remarquerez qu’il y a assez peu d’HTML standard, mais beaucoup de blocs.

Aussi, certains commentaires font référence aux attributs des blocs en question. Par exemple, pour la date de publication, le balisage est : <!-- wp:post-date {"isLink":true} /-->. Il faut donc savoir que le bloc accepte un attribut isLink, connaitre ses différentes valeurs, etc…

Ces attributs sont à passer dans un objet JSON. C’est relativement simple quand il n’y a qu’un attribut à passer mais quand la structure des attributs du bloc se complexifie, écrire ce JSON à la main devient très vite très compliqué, et faire une erreur est plus probable.

Pour moi, écrire ce code à la main est impensable, car il faut tout savoir sur les blocs du cœur : connaitre leur identifiant, leurs attributs ET ne pas faire d’erreurs en écrivant le JSON des attributs.

Utiliser la vue HTML de l’éditeur

Une méthode plus simple est de copier le code HTML depuis l’éditeur. Une fois les modifications souhaitées effectuées sur le modèle, on peut activer l’éditeur de code dans les options (en cliquant sur les trois points dans la barre supérieure) et voir entièrement le code généré. On peut donc le copier et le coller dans le thème, en lieu et place de l’ancien code.

Une fois le code du thème à jour, on peut réinitialiser les modifications. Sur la liste des modèles, on peut cocher les modèles mis à jour et supprimer l’historique des modifications en cliquant sur l’icone d’historique.

Cela supprime toutes les modifications sauvegardées en base pour ce modèle. Ainsi, le code du thème (mis à jour) est utilisé.

On peut donc procéder comme ça, mais cela reste fastidieux : il faut construire le modèle, vérifier que tout s’affiche correctement sur le devant du site, revenir dans l’éditeur de site, copier le code, retourner dans l’éditeur de code, coller le code, retourner dans l’éditeur de site pour réinitialiser nos modifications.

On a donc plusieurs aller-retours à faire entre l’éditeur de site et l’éditeur de code.

Avec Create Block Theme

Heureusement pour nous, l’équipe de WordPress met à notre disposition une extension outil dédiée au développement de Block Theme : Create Block Theme. Cette extension est conçue spécialement pour accélérer le développement des Block Themes.

Elle permet d’effectuer toutes les opérations courantes lors du développement d’un Block Theme en un seul clic :

• créer un thème vierge,
• copier un thème existant,
• créer un thème enfant,
• créer des variations de styles,
• importer les polices Google Fonts,
• inscrire les modifications dans les fichiers du thème,
• exporter un thème en fichier zip.

Générer un Block Theme

Grâce à Create Block Theme, toutes les étapes nécessaires pour créer un nouveau thème, que ce soit un parent ou un enfant, sont maintenant réalisées en un seul clic. Vous pouvez même générer un thème enfant ou dupliquer un thème existant.

Depuis la page de l’extension, il suffit de cliquer l’option de votre choix et de remplir un petit formulaire avec les métadonnées de votre thème.

Le thème ainsi généré contient tous les fichiers dont nous avons parlé plus haut, avec quelques réglages par défaut, et un modèle index.html rudimentaire.

Inscrire les personnalisations dans le thème

L’extension ajoute un nouveau panneau dans l’éditeur de site. Depuis ce panneau, vous pouvez exporter votre thème en zip, consulter le fichier theme.json, consulter les styles personnalisés, et bien plus.

Mais l’option qui est la plus intéressante offerte par Create Block Theme est vraiment Enregistrer les modifications du thème. Cette option va permettre d’écrire directement nos modifications dans les fichiers du thème.

Plus besoin de copier-coller du code ni de faire d’allers-retours entre l’éditeur de site, l’éditeur de code HTML sur le site, et l’éditeur de code sur notre machine. On peut même choisir les modifications que l’on souhaite inscrire dans le thème.

Inscrire les changements dans le thème supprime automatiquement les modifications correspondantes en base de données. On n’a donc plus besoin non plus d’aller supprimer ces changements dans l’historique de modification des modèles.

Dans la formation Créer un Block Theme, j’utilise beaucoup mon éditeur de code lors de la mise en place du fichier theme.json, car il est plus simple de copier-coller des valeurs dans un fichier JSON que dans une interface visuelle.

Par contre, pour l’édition des modèles, j’utilise exclusivement l’éditeur de site et Create Block Theme devient juste essentielle. Grâce à l’extension, on peut vraiment développer un thème de façon visuelle en restant exclusivement dans l’éditeur de site.

Cette extension n’est donc pas seulement recommandée. Je la considère indispensable pour développer rapidement un Block Theme. Le temps qu’elle fait gagner est énorme. Aussi, elle permet d’éviter des erreurs de formatage JSON, des erreurs sur les attributs des blocs et elle organise les fichiers de votre thème en respectant les conventions et standards.

Si vous ne l’avez pas encore installée, je vous invite fortement à la tester. Créer un thème ne demande qu’un clic, et le temps que vous gagnerez est énorme !

Pour en savoir plus et apprendre à développer un Block Theme, je vous recommande de jeter un œil à ma formation Créer un Block Theme. Elle vous apprendra tout ce dont vous avez besoin pour comprendre les Block Theme et le fonctionnement de l’éditeur de site !