S'il s'agit d'un développement de thème WordPress moderne, inscrivez-moi

J'ai eu une idée de thème de bloc qui trottait dans mon cerveau pendant un moment. Pendant des mois, j'ai envisagé de créer un thème de profil / carte d'une seule page, et je me suis finalement assis et j'ai travaillé le week-end. En partie, je voulais juste faire ça pour le plaisir. Cependant, une autre partie de moi voulait voir comment la thématisation des blocs avait progressé du point de vue du développeur.

L'inspiration pour ce thème est venue de quelques autres personnes et projets. L'expérience de page de destination à deux colonnes de Kjell Reigstad d'octobre 2020 l'a déclenchée pour la première fois. Une question récente à la colonne Ask the Bartender sur les thèmes compacts et confortables a redonné vie à ma créativité. Cependant, voir l'équipe des thèmes approuver un thème de bloc similaire, Miniblock OOAK, de Carolina Nymark signifiait que les règles étaient désormais suffisamment laxistes pour éventuellement mettre quelque chose comme ça dans le monde.

L'un des problèmes est que la thématisation basée sur des blocs m'a déjà brûlé. J'ai passé des mois à construire un nouveau projet l'année dernière dans mon précieux temps libre pour que les mises à jour du plugin Gutenberg effacent mes progrès des semaines plus tard. Je savais que les choses pouvaient changer avec la base instable des logiciels de niveau alpha, mais cela continuait de se dégonfler. Inutile de dire que je n'ai jamais trouvé la motivation pour le reprendre.

Avec WordPress 5.9 et un système de thématisation par blocs plus stable à peine quelques jours à venir, il était temps de lui donner une autre chance.

Je voulais apprendre à fond la thématique des blocs . La seule façon de le faire était de revenir au début. J'avais besoin de me familiariser avec ces éléments fondamentaux du HTML, du CSS et du PHP. Et oubliez tout ce que je pensais savoir en m'appuyant sur le web moderne. J'avais besoin de redevenir un noob .

Techniquement, il est impossible d'oublier tout ce que je sais sans encourir une sorte d'amnésie. Cependant, peut-être - juste peut -être - pourrais-je revenir aux éléments constitutifs du Web.

Puis-je créer un thème WordPress sans un réseau complexe de dépendances couvrant plus de 900 projets dans mon dossier /node_modules ?

Puis-je créer quelque chose sans extraire consciencieusement mes scripts PHP de base via Composer ?

Pourrais-je, vous savez , simplement créer un thème WordPress ?

La première étape était de vérifier mon ego à la porte. Lorsque j'ai mis de côté des années d'outils modernes et un flux de travail construit autour d'eux, j'ai trouvé un système de thème magnifiquement simple qui rend hommage aux racines de WordPress mais qui est suffisamment flexible pour s'étendre aux versions avancées.

Cela ne veut pas dire qu'il n'y a pas eu de contretemps en cours de route, mais nous en entendons suffisamment parler. De plus, je considère la programmation/le développement comme l'art de résoudre des problèmes.

J'ai eu un week-end agité. J'ai eu quatre, peut-être cinq heures de sommeil solide entre vendredi et samedi soir. Peut-être que j'avais tellement de projets et de choses en cours que mon esprit ne pouvait pas les exclure. Quoi qu'il en soit, j'étais de retour éveillé à 3 h 30 le dimanche matin, fatigué mais incapable d'attraper ces Z dont j'avais tant besoin. J'ai donc ouvert mon éditeur de code et créé un nouveau projet de thème.

Au bout d'une heure, ça fonctionnait. Il était en assez bon état pour être partagé avec des amis sur Twitter en deux.

Voici une capture d'écran de la page d'accueil actuelle. Techniquement, c'est la seule page. J'ai un peu bricolé depuis que j'ai poussé mes premiers commits en direct.

Il s'agit d'un motif de bloc nommé "Reflections". La montagne se reflétant sur la photo du lac provient de WordPress Photos et a été prise par Anne McCarthy. Le dégradé utilisé pour l'arrière-plan reflète également les couleurs de l'image, ce que j'ai trouvé agréable.

Le thème comprend plusieurs autres modèles. L'objectif est de permettre aux utilisateurs de choisir leur favori pour leur carte de profil, de personnaliser le contenu et d'enregistrer. Peasy facile. J'ai rencontré un problème avec cela, dans lequel je plonge à la fin du message. Pour la plupart, tout s'est bien passé.

Ce que j'ai appris de l'expérience

Créer des thèmes WordPress avec des blocs est facile. La plupart des choses sont structurées et jouent selon un ensemble standard de règles. Les modèles vont ici. Les pièces y vont. Branchez vos paramètres là-bas. Nous verrons probablement encore plus de structure dans les futures versions de WordPress.

J'ai créé le thème à partir de zéro en utilisant uniquement mon éditeur de code et une installation WordPress locale. Aucun module de nœud. Aucune bibliothèque PHP. Aucune configuration de construction.

Je vais probablement utiliser ces choses avant que ce projet ne soit terminé. Certains outils facilitent simplement le développement. Cependant, ne pas en avoir besoin ou plonger dans des API PHP plus complexes a abaissé la barrière à l'entrée.

J'avais l'impression d'avoir été transporté au milieu des années 2000, juste avec un meilleur système en place pour prendre en charge tous les éléments complexes. Pour une fois, je pouvais presque entièrement me concentrer sur le design.

Il y a beaucoup de problèmes avec le système sous-jacent. Des bizarreries telles que des éléments wrapper supplémentaires autour de blocs alignés en largeur existent toujours dans l'éditeur. Et, plusieurs blocs doivent être mis à jour — je regarde votre bloc File pour ne pas réutiliser le bloc Button existant .

En gros, il y a des bizarreries. En tant que thématiseur, vous apprenez à travailler avec eux à l'esprit, à attendre un correctif en amont ou à risquer votre santé mentale en essayant de trouver des solutions de contournement.

J'hésite à partager un travail inachevé, mais je dois aussi montrer la preuve. Les personnes intéressées peuvent consulter le référentiel GitHub à la date de cet article, au moins avant que je ne fasse quoi que ce soit de trop fou avec.

Certains auteurs de thèmes peuvent regarder mon projet et penser qu'il s'agit d'un exemple trop simple. Cependant, je pourrais facilement appliquer tout cela à un thème à part entière. Les normes sont les mêmes, quelle que soit la taille.

Peut-être devrions-nous commencer à repenser ce qu'est un thème . La thématisation basée sur les blocs étant si jeune, nous devrions tous faire un peu d'expérimentation.

Une occasion manquée

Je vais être un peu technique dans ce passage car c'est crucial pour expliquer une opportunité manquée pour une expérience utilisateur complète. L'éditeur de site est dans un endroit où il est facile de construire pour les utilisateurs plus avancés. Les modèles aident à combler l'écart pour les moins techniques, mais ils ne suffisent pas.

Pensez aux principales sections d'une page Web. Des éléments comme l'en-tête, le pied de page, la barre latérale, le contenu et même des sous-sections de ceux-ci. En tant qu'utilisateur, comment remplacez-vous l'ensemble de la conception de la zone de contenu qui est déjà à l'écran par un modèle de contenu différent ?

Vous pouvez supprimer celui qui s'y trouve et insérer un nouveau motif. Cependant, supprimer et insérer des sections d'une page est une action à haut risque.

Si la zone que vous souhaitez modifier est une partie du modèle, vous pouvez remplacer l'une par une autre. Cela suppose que l'auteur du thème en ait enregistré pour cette zone. Il s'agit d'une action à faible risque et l'une des meilleures fonctionnalités de l'éditeur de site.

Par exemple, voici les modèles d'en-tête que Twenty Twenty-Two enregistre tels qu'ils apparaissent sous l'élément de menu "Remplacer" de la barre d'outils :

Cependant, ce n'est pas la gamme complète de modèles d'en-tête du thème - il en a 18 au total. J'imagine que la plupart des utilisateurs finaux ne les découvriront jamais.

L'un des inconvénients de la création de modèles destinés à des pièces de modèle spécifiques est que les utilisateurs finaux n'ont aucun moyen de remplacer ou de transformer une pièce en gros avec un nouveau modèle.

Les auteurs de thèmes peuvent dupliquer leurs efforts en copiant le code du modèle dans la partie du modèle, en supposant qu'il n'y a pas de PHP mélangé. Ou, ils peuvent créer ces parties et extraire le modèle associé via le bloc Pattern :

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Le problème avec cette approche est que l'éditeur du site n'affiche pas le contenu du modèle dans la liste déroulante "Remplacer" ( je viens de découvrir un bogue ? ) :

La solution devrait être simple. Les modèles enregistrés pour une pièce de modèle doivent être interchangeables via l'interface utilisateur. Ou, les pièces qui utilisent le bloc Pattern doivent s'afficher correctement dans la liste déroulante "Remplacer".