Conception de thèmes enfants WordPress basés sur des blocs avec un seul fichier JSON

Depuis le moment où j'ai ouvert ma première boutique de thèmes en 2008 jusqu'à aujourd'hui en tant que personne qui ne fait que bricoler, mon plan a toujours été de créer un thème unique dans le moule de CSS Zen Garden. Il s'agit d'un projet que Dave Shea a lancé au début des années 2000 pour montrer comment les concepteurs pouvaient manipuler un site via CSS uniquement. Le HTML resterait le même, mais la conception pourrait être n'importe quoi.

J'ai atteint cet objectif plusieurs fois avec plusieurs projets. Techniquement, tout ce dont j'avais besoin était un balisage architectural solide dans un thème WordPress et un CSS personnalisé dans un thème enfant.

Le concept était simple, mais avec le temps, ma vision a changé. Je voulais créer quelque chose qui rende la conception de ces types de thèmes enfants encore plus facile. Par conséquent, j'ai construit des systèmes personnalisés pour contourner le manque d'outils de WordPress dans le domaine de la conception de thèmes. Sans trop me vanter, mais j'avais l'impression d'avoir créé des méthodes pratiques. Ils ont permis aux concepteurs de thèmes enfants de saisir des valeurs dans les fichiers de configuration, tels que les noms de famille de polices et les codes de couleur. La plupart d'entre eux pourraient également être écrasés par les utilisateurs finaux via le personnalisateur.

En 2018, je travaillais déjà dur sur ce qui serait mon magnum opus, le meilleur thème WordPress que j'ai jamais construit. J'avais aussi prévu que ce soit mon dernier. J'envisageais de sortir du jeu depuis un moment. Mais c'était un projet que je devais mener à bien.

Ensuite, le nouvel éditeur de blocs a tout fait sauter. J'avais travaillé avec lui pendant des mois avant son lancement, mais je savais que le développement du thème ne serait plus jamais le même. Le projet Gutenberg continuerait à mûrir et à remodeler l'avenir de WordPress.

J'ai finalement lancé mon thème. C'était l'un des premiers produits commerciaux à prendre en charge le nouveau système de blocs. Cependant, j'étais aussi dégonflé.

C'étaient les premiers jours de l'éditeur de blocs. Personne ne savait vraiment ce que nous allions voir dans trois ans ou plus, mais si vous prêtiez ne serait-ce qu'un minimum d'attention, vous pouviez voir que la thématique évoluerait vers quelque chose de bien différent de ce qu'elle était à l'époque. J'ai passé plus d'un an à construire un système de thématisation qui deviendrait rapidement inutile - d'accord, je pensais que nous serions arrivés à cette destination beaucoup plus tôt.

WordPress 5.9 embarquera les derniers sous-composants de l'édition complète du site. Cela inclura la prise en charge des thèmes de blocs sous le capot. Les utilisateurs qui les installent peuvent les personnaliser via l'éditeur de site et l'interface des styles globaux.

Ce qui m'excite le plus, c'est encore ce qui me réveillait tous les matins il y a 13 ans : les thèmes enfantins.

Les thèmes enfants bloqués ont partiellement fonctionné dans le plugin Gutenberg pendant des mois. Cependant, la fonctionnalité que j'attendais le plus n'était prête qu'il y a une semaine. Un nouveau patch permet à un thème enfant d'écraser des valeurs uniques du fichier theme.json de son parent. Essentiellement, les deux fichiers sont fusionnés, l'enfant ayant la priorité.

Pourquoi étais-je si enthousiaste à propos de cette fonctionnalité ? Parce que c'était le même système que j'avais construit au cours des années passées - mais en mieux.

Après avoir vu ce terrain dans la version de développement de Gutenberg, la première chose que j'ai faite a été de charger un thème personnalisé avec lequel j'avais essayé. C'est un projet que j'ai construit pour le plaisir et ma propre édification.

Ensuite, j'ai créé un nouveau projet dans mon éditeur de code. J'ai ajouté le fichier style.css requis et inséré les champs d'en-tête appropriés. Je n'en aurais pas besoin au-delà. La conception de mon thème enfant reposerait sur une autre fonctionnalité.

J'ai ajouté un theme.json au niveau racine du thème enfant et j'ai commencé à m'amuser plus que je n'en ai eu avec le thème depuis longtemps.

J'ai choisi quelques couleurs d'automne et une police de titre amusante. En quelques minutes, j'ai eu une nouvelle couche de peinture éclaboussé sur mon installation de test. Le design n'était pas révolutionnaire ou quoi que ce soit du genre. J'ai été étonné de voir à quel point il était facile de transformer mon design en y ajoutant quelques valeurs.

C'est le type de thème pour enfants que j'ai toujours rêvé. Je veux pouvoir changer les éléments de conception de mon thème pour différentes saisons et vacances. Et je veux pouvoir partager ces thèmes enfantins avec d'autres.

Comme je l'ai dit, j'avais déjà construit de telles méthodes de thème enfant (j'ai utilisé PHP au lieu de JSON). Cependant, c'est beaucoup plus puissant car il repose sur le système de blocs standard et non sur quelque chose de personnalisé que seule une poignée de personnes utiliserait.

Certains d'entre vous se demanderont peut-être pourquoi je n'ai pas effectué ces modifications via l'éditeur du site au lieu de créer un thème enfant. Rich Tabor a posé, essentiellement, la même question sur Twitter plus tôt dans la journée. "Si un thème se compose de JSON et de modèles de blocs qui peuvent tous deux être modifiés via les styles globaux, alors à quoi servent les thèmes enfants ?"

Disons que j'ai installé un thème de bloc et fait quelques ajustements de couleur. Maintenant, imaginez que je veux mélanger cela quand Noël arrive - ajoutez quelques couleurs et trouvez une police de vacances festive. Lorsque j'apporterai ces modifications, mon ancien design ne sera plus là à la fin de la saison car les personnalisations des utilisateurs sont stockées en fonction du thème actif. Je pourrais, bien sûr, noter tous mes anciens paramètres et les modifier plus tard. Cependant, le faire via un thème enfant signifie que je peux simplement changer de thème à tout moment. Mes anciens paramètres resteraient intacts.

C'est peut-être un cas marginal. Qui apporte des changements saisonniers à leur conception ces jours-ci, n'est-ce pas ?

La partie intéressante est que je peux partager des thèmes enfants créés avec un seul fichier JSON avec d'autres.

La thématique enfant est une de mes passions depuis que la fonctionnalité a atterri dans WordPress. À certains égards, cela n'a pas beaucoup changé. Les thèmes peuvent toujours écraser les modèles du parent. Ils peuvent continuer à ajouter du CSS personnalisé s'ils le souhaitent. Mais maintenant, ils peuvent configurer n'importe quelle partie de la conception à partir d'un seul fichier standardisé. C'est quelque chose qui vaut la peine de remettre ma casquette de développeur et de créer un thème de plus.

Je vois aussi un avenir sans thème enfant qui a toujours les mêmes avantages de partager des éléments de conception.

Le répertoire de modèles de blocs fournit déjà des mises en page qui devraient fonctionner avec n'importe quel thème WordPress bien construit. Cependant, il existe d'autres composants de conception que nous pourrions séparer à l'avenir.

J'imagine un futur où WordPress pourrait avoir des palettes de couleurs installables comme ce que propose Color Lovers. Parcourez simplement un répertoire, installez et modifiez votre palette de couleurs sans trouver de nouveau thème. Quelque chose de similaire au récent plugin Adrian pourrait servir le même objectif pour les polices. Ce sont des choses que la communauté voudra peut-être considérer plus tard. Aucune idée ne doit être écartée à ce stade.

Pour l'instant, je suis heureux d'avoir toute la puissance de la thématique enfant à ma disposition. Le changement devrait atterrir dans Gutenberg 11.8 cette semaine et WordPress 5.9 plus tard cette année.