Depuis WordPress 5.9, l’écosystème des thèmes WordPress bouge énormément. L’éditeur de contenu (le Block Editor) avait déjà révolutionné l’édition du contenu de nos pages en nous proposant une interface nouvelle et un fonctionnement à base de blocs. Ce nouvel éditeur met à notre disposition des blocs flexibles qui permettent de créer du contenu à la mise en page riche et variée.
Ce système de blocs s’applique désormais aux thèmes entiers : ce sont les Block Themes.
L’éditeur de site permet de modifier vos modèles de pages complets et de les construire à l’aide des blocs proposés par le cœur de WordPress. Il permet aussi de modifier les réglages de votre thème comme vos couleurs ou vos réglages de typographie, mais aussi les réglages par défaut et styles des blocs. Vous avez donc la main sur tous les aspects de votre site : couleurs, typographie, réglages des blocs natifs, mise en page, entête, pied de page, etc…
On parle dans ce cas de Full Site Editing ou FSE. On parle aussi d’édition de site, de thèmes basés sur les blocs, ou de Block Themes.
Utiliser un Block Theme pour votre site a des avantages énormes :
- votre site est bien plus léger et performant
- on peut tout personnaliser simplement : réglages, blocs et modèles
- il permet de systématiser votre approche du développement de site
- les thèmes bénéficient directement des évolutions de WordPress
Pour comprendre tous ces avantages, il faut d’abord faire la différence entre les thèmes classiques et les Block Themes.
Themes classiques et Block Themes
Les thèmes classiques sont les thèmes traditionnels écrits en PHP, comme nous les connaissons depuis toujours.
Dans un thème classique, les modèles de page sont écrits en PHP, les styles sont rangés dans une feuille de styles et ils embarquent plus ou moins de fonctionnalités ou de réglages selon s’ils sont gratuits ou premium.
La principale façon de les personnaliser est via l’outil de personnalisation de WordPress ou via une page de réglages dédiée selon le thème. Aussi, un thème enfant permet de surcharger les modèles du thèmes et permet donc un contrôle plus fin de ses modèles. Vous pouvez aussi surcharger certains styles via votre thème enfant.
Certains thèmes classiques premium embarquent aussi une surcouche de compatibilité avec des constructeurs de page pour faciliter leur intégration.
Personnaliser ces thèmes peut être très simple comme très complexe, selon le thème, mais vous aurez quasiment toujours besoin d’accéder au code du thème ou d’ajouter du code personnalisé. Que ce soit l’ajout de styles, surcharger un modèle, etc… Vous aurez besoin de coder un peu si le thème ne propose pas l’option de personnalisation dont vous avez besoin.
Aussi, la majorité de ces thèmes demandent l’utilisation d’un constructeur de page, qui va automatiquement ajouter de la complexité et de la lourdeur à votre site. On ajoute un outil lourd complexe sur un thème déjà peut-être lourd et complexe.
Les Block Themes fonctionnent différemment. Ils sont basés sur les blocs natifs de WordPress. Les modèles de page sont des fichiers HTML qui référencent des blocs. Ainsi, le code des modèles est très léger puisque l’affichage de vos informations est géré par les blocs natifs de WordPress.
Ces thèmes reposent sur un fichier de configuration essentiel : theme.json. Ce fichier contient tous les réglages par défaut du thème, des blocs, des styles et des modèles. C’est en quelque sorte le fichier de configuration du thème qui contient tout ce qui sera déclaré dans l’éditeur de site et de contenu et que vous pourrez donc utiliser pour construire ou personnaliser vos modèles.
Si vous voulez plus de détails sur le fonctionnement de ce fichier, je vous renvoie vers un article que j’ai écris sur le sujet.
https://vincentdubroeucq.com/comprendre-le-fichier-theme-json/
Les sites utilisant un Block Theme sont bien plus performants
Les Block Themes sont bien plus légers que les thèmes classiques.
Voici par exemple le contenu du fichier index.html du thème par défaut TwentyTwentyFive.
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin": {"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->On a de l’HTML et des commentaires qui référencent des blocs (<main>, et son commentaire associé <!-- wp:group {"tagName":"main" ...} -->), des compositions personnalisées (<!-- wp:pattern ... -->), des appels d’autres partiels (<!-- wp:template-part ... /-->). La structure est donc très simple. L’affichage des blocs est géré par WordPress. Le thème se contente de lister les blocs à afficher.
Aussi, puisque tous les réglages du thème et des blocs sont contenus dans theme.json, la feuille de style est très allégée. Le fichier style.css du thème TwentyTwentyFive ne fait qu’une cinquantaine de ligne et ne contient que quelques exceptions de styles qui n’ont pas pu être codifiée dans theme.json. Puisque le thème est basé sur des blocs, déclarer les styles des blocs dans theme.json suffit pour styler le site entier.
WordPress s’occupe de charger uniquement les styles globaux de votre thème, ainsi que les styles des blocs de votre page, et les place directement dans des balises <style>. Cela réduit donc le nombre de feuilles de styles chargées et tout est automatiquement optimisé et minifié par WordPress. Le gain en terme de performance est absolument énorme.
L’éditeur de site fournit une interface pour tout personnaliser
Honnêtement, l’interface n’est pas forcément des plus simples, mais comme tout outil, il suffit d’y passer un peu de temps pour y voir plus clair.
Quand vous cliquez sur Apparence > Editeur, vous allez arriver sur une interface comme celle-ci :
La navigation sur la gauche vous indique tous les aspects de votre site sur lesquels vous avez la main et que vous pouvez donc personnaliser. A droite, vous avez un aperçu de ce que vous avez sélectionné ou de votre site avec les réglages sélectionnés.
Par exemple, vous pouvez cliquer sur Styles pour lister toutes les variations de styles (les ensembles de réglages) disponibles dans votre thème.
Vous pouvez donc choisir les styles par défaut, la palette à utiliser, les réglages de typographie à utiliser, etc…
Si vous cliquez sur l’icône d’édition en haut, vous pourrez éditer le style sélectionné en détails et en contrôler tous les aspects.
Sur la droite, vous pouvez lister et modifier tous les paramètres de la variation de styles sélectionnées: Typographie, couleurs, ombres, etc… L’éditeur de site permet même de surcharger les réglages des blocs.
Toutes vos modifications sont sauvegardées en base de données et viendront surcharger les réglages de base du thème. Aucun risque de perdre vos modifications, puisqu’elles ne sont pas contenues dans les fichiers du thème.
L’éditeur de site vous permet de systématiser votre approche de conception et gestion du site
Utiliser un Block Theme vous force à systématiser votre approche du design et de la conception de votre site. Il vous force à travailler du général vers le particulier :
- d’abord, vous allez définir vos réglages par défaut (typographie, couleurs, etc…)
- vous allez vous occuper des réglages des blocs s’ils ont besoin d’ajustements spécifiques
- vous allez créer les compositions (groupes de blocs) dont vous avez besoin pour intégrer vos pages
- vous allez utiliser ces compositions et personnaliser vos modèles de page
Les Block Themes vous forcent donc à penser en termes de composants réutilisables de plus en plus gros : blocs, puis compositions (groupes de blocs) et modèles (conteneurs arrangeant vos compositions).
Cette vision en composants est essentielle pour bien abstraire et raisonner de façon ordonnée, même si vous n’êtes pas designer ou développeur, et vous aidera à mieux communiquer avec vos collègues designers et développeurs.
Utiliser un Block Theme permet de profiter des évolutions de WordPress
En adoptant un Block Theme, on reste au plus près du natif de WordPress. Chaque évolution du cœur de WordPress nous offre de nouvelles fonctionnalités ou de nouvelles optimisations, dont on peut profiter tout de suite.
On profite d’ores et déjà des optimisations de chargement des styles, des réglages des blocs natifs. Chaque nouvelle version de WordPress va corriger des bugs, apporter des nouveaux réglages ou des nouveaux blocs et les Block Themes vont automatiquement en bénéficier.
Utiliser les Block Themes permet donc de gagner du temps car la maintenance du thème sera plus réduite, les temps de développements seront réduits, la quantité de code personnalisé (et donc les risques de bugs) réduits.
Passer aux Block Themes maintenant est important
Pour résumer, les avantages à utiliser un Block Theme et se familiariser avec l’éditeur de site sont énormes :
- les sites utilisant un Block Theme sont bien plus performants
- personnaliser un thème est plus simple car on dispose d’une interface pour cela
- cela vous force à abstraire un peu votre pensée et systématiser votre approche
- on reste au plus près du cœur de WordPress et on profite de toutes les évolutions et innovations du CMS
Cette approche nécessite cependant de remettre en question notre façon de travailler, car les différences avec les thèmes classiques sont non-négligeables. Mais je pense vraiment que même si opérer le virage pour adopter les Block Themes va demander un gros effort d’adaptation et de remise en question, les avantages en valent largement la chandelle.
Si on observe les évolutions actuelles de WordPress, l’accent est clairement mis sur le développement des Block Themes et ces derniers sont maintenant la nouvelle norme. Investir maintenant et apprendre à utiliser les Block Themes est donc un investissement plus que rentable.
Si vous êtes intéressé pour apprendre à développer un Block Theme et comprendre leur fonctionnement, je suis en train de créer une courte formation écrite sur le sujet. Je vous invite à en lire la description en cliquant le bouton ci-dessous et à vous inscrire en bas de la page pour être tenu au courant de son avancement et de son lancement.
À bientôt !
