Ensemble, mon thème #WordPress à base de gabarits de blocs

Publié le

par

cabane
Photo de la cabane que m’ont construit mes parents et grands parents.

Un des projets qui me tient à cœur en cette quinzième année d’existence de l’extension BuddyPress, c’est de faire profiter à ses utilisateur·rice·s des bénéfices de l’interface de programmation des blocs de WordPress pour enfin leur permettre de personnaliser visuellement l’espace communautaire de leur site Web. En d’autres termes, l’objectif est de rendre possible l’aménagement de cet espace à l’aide de l’éditeur de site de WordPress à partir du moment où un thème déclarant son support de BuddyPress et basé sur les gabarits de blocs est activé sur le site.

Une étape préliminaire, désormais accomplie, sur mon parcours était de me familiariser avec cette nouvelle génération de thèmes, ceux qui lorsqu’activés vous permettent d’accéder à l’éditeur de site WordPress de votre tableau de bord comme par exemple « Twenty Twenty-Two » ou « Twenty Twenty-Three ». Or comme je suis convaincu que le meilleur moyen d’apprendre est de faire, je me suis dit que me lancer dans la conception d’un tel thème pour mon blog (ce site) était une riche idée. En satisfaisant un intérêt personnel, je contribue à celui de la communauté des utilisateur·rice·s de BuddyPress.

Ainsi, je vous propose de découvrir « Ensemble » la manière dont j’ai appris les spécificités de la conception des thèmes basés sur des gabarits de blocs et les obstacles que j’ai dû franchir pour maintenir certaines fonctionnalités dans mon nouveau thème par rapport à celui que j’utilisais précédemment.

Se documenter avant tout

Le rêve c’est que toute la hiérarchie des gabarits PHP soit disponible en gabarits de blocs

Si mes premiers contacts concrets avec les thèmes basés sur des gabarits de blocs datent de la période de développement de la version 5.9 de WordPress et de son thème par défaut « Twenty Twenty-Two », j’avais eu la chance, le 26 avril 2019 à 16h35 dans le grand amphithéâtre du campus Malesherbes d’entendre la vision partagée par Riad Benguella, le responsable technique de la phase 2 du projet Gutenberg, au sujet des « templates » (ce que je traduis par gabarits) de blocs.

Jusqu’à présent, je m’étais contenté de m’assurer que les portions de contenu communautaire de BuddyPress s’inséraient bien dans le rendu des gabarits de cette nouvelle génération de thèmes, or concevoir un tel thème de A à Z m’a semblé une sérieuse escalade à enclencher lorsque je me suis retrouvé devant le fichier style.css vide d’« Ensemble ».

Montagne
Photo de Eleonora Patricola sur Unsplash

Le manuel du développeur de thèmes WordPress

Afin de me familiariser avec les gabarits de blocs, j’ai d’abord consulter la documentation officielle. On y lit les avantages attendus de leur utilisation, leurs différences principales par rapport aux gabarits classiques et des recommandations sur la manière d’organiser son dossier de thème. Points importants : on comprend qu’un fichier json s’occupe de tous les aspects liés aux réglages par défaut, que les combinaisons de blocs seront à enregistrer dans des fichiers html, et que pour gérer l’internationalisation de son thème, l’utilisation de patrons (ou « patterns ») est nécessaire.

Le tutoriel de référence

Ce tour d’horizon effectué, j’ai toutefois éprouvé le besoin d’être encore plus guidé pour m’aider à coder concrètement ces éléments. Je me suis alors souvenu de certains messages reçus dans mon flux « Twitter » de la part de Carolina Nymark. Lors de mon travail sur la préparation du jour des contributeurs du WordCamp Europe 2017, nous nous étions connectés afin d’organiser la table de contribution de l’équipe des thèmes de WordPress.

Remarques d'ouverture du jour de contribution du WCEU 2017
Le gars à la droite de Petya Raykovska, c’est moi ! Photo prise par Florian Ziegler le 15 juin 2017 – CC BY-SA 2.0

En inspectant ma liste de signets, j’ai vite retrouvé le billet qui avait retenu mon attention lorsque j’avais suivi le site qui lui était lié : fullsiteediting.com.

Caroline propose de très bons tutoriels pour nous aider à devenir des champions des thèmes basés sur les gabarits de blocs. Je vous recommande en particulier les ressources qu’elle a rassemblées dans la rubrique qu’elle dédie aux développeur·euse·s. Elle propose même un générateur pour vous permettre de gagner encore plus de temps dans la création de votre thème.

Conseils concernant la rédaction du code des gabarits de blocs

Rédiger le code d’un gabarit consiste à réaliser une composition de blocs en utilisant leur format de sérialisation. Ce qui revient à encadrer du contenu HTML par des balises de commentaire HTML et à utiliser des chaînes de caractère JSON pour spécifier les attributs des blocs. L’astuce partagée par Carolina quant à l’utilisation de l’éditeur de blocs pour effectuer cette composition via la copie du code peut vous permettre de rendre l’opération plus simple.

Si comme moi vous préférez utiliser votre éditeur de code, lorsque vous aurez besoin de spécifier des attributs pour certains de vos blocs, je vous conseille, pour connaître ceux qui sont disponibles, de consulter le fichier block.json correspondant depuis le répertoire du bloc de votre version de WordPress, c’est à dire celui qui se situe dans le dossier /wp-includes/blocks. En effet, même si la liste des blocks présentés dans cette page du manuel décrit de manière plus lisible ces attributs, elle n’informe pas sur la version de WordPress à partir de laquelle les blocs sont disponibles. Or le bloc de table des matières, par exemple, bien que disponible via l’extension Gutenberg, ne l’est pas dans WordPress 6.1.

Prenons un exemple pour mieux comprendre 😅. Imaginons que vous souhaitiez personnaliser la pagination au bas de votre gabarit de publication (single.html) pour qu’elle intègre le titre de l’article précédent puis suivant. En ouvrant le fichier /wp-includes/blocks/post-navigation-link/block.json, vous pourrez vérifier l’attribut à utiliser pour afficher le titre des articles dans les liens.

Il s’agit donc d’utiliser l’attribut showTitle et de le définir à true.

Enfin, je vous recommande de vérifier régulièrement le bon affichage de vos gabarits dans l’éditeur de site en maintenant la console de votre navigateur ouverte dans la mesure où il peut arriver de s’emmêler les crayons dans le bon enchaînement des balises de clôture des blocs. Si tel est le cas, les erreurs tracées dans la console vous aiderons à remettre de l’ordre dans vos gabarits.

Le passage des cols les plus raides de mon ascension

Escalade
Photo de Matt Forster sur Unsplash

Compensation d’une carence temporaire du bloc de navigation

Plutôt critiqué depuis son apparition, j’ai pour ma part été assez emballé par son fonctionnement et par l’interface de gestion proposée dans l’éditeur de site. La migration de l’ancien menu est opérationnelle et l’ajout de nouveaux éléments très intuitif. La version de ce bloc incluse dans WordPress 6.1 n’intègre cependant pas ce correctif, lequel m’aurait éviter de jongler avec les styles afin de m’assurer que l‘élément de navigation correspondant à la page affichée (ou un de ses ancêtres) soit bien mis en lumière (soulignée dans mon cas : le petit trait sous la navigation « Le blog » lorsque vous lisez ces lignes).

Sympa le bloc des liens sociaux, comment faire pour y inclure un lien vers ma page de donation Paypal(avec le logo qui va bien) ?

Pour personnaliser la gauche du pied de page de mon site avec un ensemble de liens vers mes profils distants ou le flux de syndication de ce site, j’ai opté pour l’utilisation du bloc core/social-links. Un des liens m’a posé une difficulté dans la mesure où son service n‘est pas référencé dans ceux supportés par le bloc : Paypal. Après une rapide exploration de son code source, j’ai identifié la fonction responsable de ce référencement et ai constaté avec surprise qu’elle ne proposait pas de crochet pour nous permettre d’enrichir la liste des services. Je m’en suis sorti avec une pirouette CSS appliquée au service par défaut avant de signaler à WordPress qu’un tel crochet serait vraiment plus pratique.

La nécessité d’améliorer la prise en charge des liens de poursuite de lecture du contenu par l’éditeur de site

Je me suis demandé pourquoi Carolina nous orientait vers l’utilisation du bloc core/post-excerpt pour intégrer un avant-goût du contenu des articles dans les boucles plutôt qu’un équivalent à cette fonction de gabarit très utilisée dans les thèmes classiques :

<?php the_content( 'votre lien de poursuite de lecture personnalisé' ); ?>

En effet, en tant que rédacteur de contenus, je préfère très largement cette deuxième manière de procéder car elle me permet d’avoir un contrôle total sur le moment à partir duquel il faut interrompre l’affichage du reste du contenu de l’article grâce à l’insertion du bloc de poursuite de lecture dont le nom de code est core/read-more. L’utilisation du bloc core/post-excerpt est soit beaucoup plus aléatoire puisque la fonction de gabarit correspondante va tronquer le contenu une fois qu’un nombre de mots sera atteint (55 par défaut), soit beaucoup moins pratique puisqu’il s’agit d’utiliser le champ « Extrait » de l’onglet de l’article de la barre latérale de l’éditeur de blocs si on veut un peu plus maîtriser les choses, ce qui n’est vraiment pas dans l’esprit WYSIWYG !

Comparé aux thèmes classiques, c’est selon moi une régression et c’est la raison pour laquelle j’en ai fait part à WordPress.

En attendant cette nécessaire amélioration, j’ai préféré dégrader l’expérience d’utilisation de l’éditeur de site en maintenant la prise en compte du bloc de poursuite de lecture du contenu des articles via l’utilisation du bloc core/post-content dans les gabarits contenant une boucle et l’ajout d’un crochet personnalisant le lien de poursuite de lecture. Résultat, cela maintient l’expérience dont le·la rédacteur·rice (moi) et les lecteur·rice·s (vous) bénéficiaient dans mon précédent thème. En contrepartie, dans l’éditeur de site, les gabarits de boucle affichent l’intégralité des articles 🤷‍♂️.

Lier le crédit des auteurs à l’image mise en avant de l’article

J’avoue que je suis parfois un peu perfectionniste ! Le bloc core/featured-image gère admirablement tout ce qui touche à l’aspect visuel de l’image que je mets en avant de mes articles, je l’utilise d’ailleurs pour la majorité des gabarits de blocs d’« Ensemble ». En revanche, dans le cas du gabarit de blocs utilisé pour afficher une publication, je tiens à ce que sous l’image soient intégrés un crédit à l’auteur·e de l’illustration et éventuellement une information concernant la licence de cette dernière. Dans mon précédent thème, j’avais mis en place un savant mécanisme qui me permettait de lier cette information de crédit lors de l’affichage de l’image mise en avant grâce à l’utilisation du champ de contenu du type de publication utilisé par WordPress pour référencer les media dans la médiathèque du site.

Aussi, après réflexion, j’ai estimé que la meilleure manière de maintenir cette fonctionnalité très spécifique était d’échafauder un bloc sur mesure que j’ai ensuite intégré dans le gabarit de la publication (single.html). Plus tard, je me suis inspiré du code JavaScript de celui de WordPress afin, comme le montre l’image ci-dessus, de présenter à l’administrateur·rice l’espace dans la page qui est réservé à l’image mise en avant.

Garantir l’internationalisation des libellés de la pagination affichée dans les gabarits de boucle

Comme je l’ai écrit plus tôt : pour s’assurer que les textes à présenter aux visiteur·euse·s puissent l’être dans la langue active sur le site, il s’agit d’utiliser des patrons (ou « patterns »). C’est donc ce que j’ai fait pour être sûr que les libellés personnalisés de ma pagination de boucle le soit. Sauf que je me suis alors rendu compte que les patrons ne véhiculaient pas le contexte d’un bloc parent à ses blocs enfants. En effet au lieu d’avoir des liens de pagination utilisant une URL « jolie », je me récupérais des URL contenant une chaîne de requête. Je ne pouvais pas raisonnablement m’en satisfaire. Je suis donc parti en quête d’un nouveau crochet afin de rétablir la transmission du contexte.

C’est ce qu’accomplit le morceau de code ci-dessus ! Une nouvelle fois, j’ai fait part de ce désagrément à WordPress, même si j’ai longtemps hésité. En effet, si vous avez la curiosité d’afficher le gabarit de la page d’accueil du thème « Twenty Twenty-Three », vous noterez que ce texte est en anglais. WordPress peut se tromper, bien entendu, l’erreur est humaine, mais alors que j’allais ouvrir un ticket sur son environnement « Trac », je me suis aperçu que le titre de ce gabarit était lui aussi non traduisible. J’ai alors pensé que c’était voulu et qu’il s’agissait de montrer que ces textes peuvent être modifiés dans l’éditeur de site. J’ai fini par uniquement soumettre l’anomalie liée à l’interface de programmation des blocs car au delà de la problématique de traduction, il me semble anormal que l’utilisation d’un patron interrompe la communication du contexte entre un bloc parent et ses enfants directs.

Résultat !

Mon blog bénéficie d’un nouveau thème, complètement basé sur les gabarits de blocs 🙌.

En comparaison des heures de travail que m’avait coûtées la construction des règles CSS de mon précédent thème, étant donné qu’« Ensemble » déclare son support des styles de bloc, il hérite de leurs règles et le rendu se révèle relativement efficace quelque soit la taille de l’écran de l’utilisateur·rice. Seuls quelques ajustements ont été nécessaires.

Par ailleurs, et après avoir repris ma casquette de développeur en chef de BuddyPress, les explorations réalisées dans le code source de WordPress sur la correspondance entre la hiérarchie des gabarits classiques et celle des gabarits de blocs m’éclaire sur les travaux à mettre en œuvre pour permettre aux utilisateur·rice·s de l’extension de personnaliser la zone communautaire de leur site WordPress !

3 réponses à “Ensemble, mon thème #WordPress à base de gabarits de blocs”

  1. Avatar de Grégoire Noyelle

    Salut Mathieu,
    Merci pour cet article très complet.
    Je ne connaissais pas ce truc à propos du fichier block.json
    J’utilise beaucoup les blocs depuis le FSE de la 6.1 et j’adore. J’ai même un compte Instagram dédié où je partage beaucoup de vidéos sur les blocs (@gregoirewp). Je publie un Reel par jour.
    À bientôt

    1. Avatar de imath

      Salut Grégoire, merci pour ton commentaire (j’ai effectué la correction du précédent que tu m’as demandé). Je m’abonne à ton instagram de ce pas!
      À+

      1. Avatar de Grégoire Noyelle

        Salut Mathieu,
        Merci. Je ne sais pas ce qui t’a bloqué dans Instagram.
        À bientôt