Comme la plupart des années, j’ai passé ce jour de l’indépendance des États-Unis enfermé avec mes amis à fourrure. J’ai fermé toutes les fenêtres, fermé les stores, allumé quelques ventilateurs pour le bruit blanc et allumé la télévision. Mes chats et moi nous sommes détendus. C’est mon travail de les garder calmes pendant que mes compatriotes – généralement ivres – brûlent des centaines de dollars dans le ciel nocturne. C’est mon rituel, et j’aime ça.

Pour ces vacances, nous avons revu la saison 1 de Star Trek : ponts inférieurs, et j’ai appris à créer un plugin de bloc.

Ce n’était pas ma première tentative. Lorsque l’éditeur de blocs a été lancé il y a près de trois ans, j’ai bricolé quelques idées de types de blocs. Cependant, je ne suis jamais allé loin. La documentation était rare et je n’avais presque aucune expérience avec JavaScript au-delà de la construction de cloches et de sifflets triviaux pour la conception frontale.

Quitter mon travail de développeur pour écrire pour WP Tavern signifiait également un temps limité pour apprendre le développement de blocs. Et, mon temps libre au cours des deux dernières années a été rempli d’autres projets. Dernièrement, j’ai eu envie de revenir et de recommencer à construire des choses pour le plaisir. Mon congé sabbatique prolongé du travail de développement m’a donné le temps de poursuivre d’autres intérêts tout en permettant à ma créativité de se régénérer. La pause m’a fait du bien.

Avec du temps à tuer hier après-midi, je me suis plongé dedans. Après quelques heures de lecture de documents, d’étude du code d’autres développeurs et de casse, j’avais un bloc fonctionnel pour une liste de fil d’Ariane.

Inserteur de bloc WordPress avec un bloc de chapelure sélectionné, affichant son aperçu.
Bloc personnalisé enregistré et prêt à insérer.

Marcus Kazmierczak Blocage des droits d’auteur plugin m’a aidé à surmonter l’un des premiers obstacles. Il était utile de voir du code réel, sans exemple, écrit en JavaScript vanille pour comprendre le fonctionnement du système.

Mes réflexions générales sur la création de types de blocs personnalisés ?

C’était plus facile que je ne le pensais. Documentation est à la fois accablant et limitatif. Il est difficile de trouver la bonne réponse si vous ne savez même pas ce que vous cherchez. La barrière à l’entrée est beaucoup plus élevée que lorsque j’ai construit mon premier plugin en 2007. Le API de type de bloc rend certaines choses bêtement simples mais en complique d’autres.

L’insertion réussie de mon premier type de bloc dans le canevas de l’éditeur était gratifiant. Je ne pense pas que ce sentiment disparaisse un jour en tant que développeur.

Bloc de liste de chapelure affiché dans l'éditeur de publication WordPress.
Insertion et rendu réussis de mon premier plugin de bloc.

Je suis enthousiasmé par le potentiel de blocs, tels qu’une liste de fils d’Ariane, lors du lancement de l’éditeur de site. De nombreuses fonctionnalités similaires n’ont pas de sens dans l’éditeur de publication. Cependant, lorsque les utilisateurs peuvent apporter des modifications directes à leurs modèles, cela ouvrira un monde de possibilités.

Courbe d’apprentissage

Je connais assez JavaScript pour être un danger pour moi-même et pour les autres. Ayant passé la quasi-totalité de ma carrière professionnelle dans le domaine WordPress, j’ai voulu me concentrer sur PHP. Mais, la programmation est la programmation. Une fois que vous avez une bonne compréhension d’une langue, ce n’est pas un pas impossible à faire suffisamment pour créer un script fonctionnel dans une autre. La plupart des mêmes concepts fondamentaux sont là. L’obstacle est souvent d’apprendre une nouvelle syntaxe.

Cependant, le plus gros obstacle avec JavaScript «moderne» est la configuration des outils de construction, des bundlers, etc. Il peut être difficile de taper même cette première ligne de code.

Bien sûr, une partie de la documentation contient des exemples JavaScript vanille, mais lorsque vous entrez dans quelque chose de plus complexe que les bases, ce n’est plus si vanille. Vous aurez besoin d’un moyen de regrouper JavaScript et de transformer la syntaxe JSX. Cela signifie des outils comme webpack et Babel.

WordPress a son propre script pour couper à travers la plupart de la complexité, mais je recommande Mélange Laravel. Il est assez simple même pour les programmeurs JavaScript les moins avertis parmi nous et dispose d’une documentation complète. C’est un script conçu pour les gens qui veulent moins se soucier de l’outillage et plus de l’écriture du code.

La construction de blocs est également un autre type de saut. Qu’il s’agisse de balises de modèles personnalisées, de codes courts, de widgets ou de crochets, le développement WordPress traditionnel a consisté à les construire dans un environnement PHP. Je soupçonne que la plupart des développeurs de plugins ont des tonnes de fonctionnalités qu’ils peuvent apporter aux masses via l’éditeur de blocs. Ils s’appuient souvent sur le rendu côté serveur. WordPress a un ServerSideRender composantt pour réellement gérer cela.

L’une des caractéristiques les plus pratiques de l’enregistrement des types de bloc est la bloquer le système de « supports ». Vous voulez une option de couleur d’arrière-plan ? Une seule ligne de code fera l’affaire. Voulez-vous que l’utilisateur accède au contrôle de taille de police ? C’est aussi une seule ligne. Avec peu d’effort, j’ai étendu mon bloc de chapelure pour inclure une tonne d’options de style pour les utilisateurs. Et, ils s’adaptent au thème actif du site.

Plusieurs blocs de fil d'Ariane avec différents styles qui leur sont appliqués dans l'éditeur de publication WordPress.
Test de diverses combinaisons d’options de style prises en charge par les blocs.

La liste des fonctionnalités prises en charge par les blocs offre un éventail d’options standardisées à peu près sans coût de développement. Même l’API Personnaliser, auparavant l’outil le plus avancé pour créer des champs de formulaire, n’a pas été aussi proche.

Création de contrôles d’inspecteur personnalisés était simple une fois que j’ai compris comment fonctionnait la pièce d’édition de bloc du puzzle. Pour l’instant, j’ai une simple option à bascule pour activer/désactiver une fonctionnalité. Souvent, le plus difficile est de trouver ce que vous cherchez. WordPress a une énorme bibliothèque de Composants à choisir.

À ce stade, j’ai un bloc de base du côté client (éditeur). La majeure partie de la complexité est gérée sur le serveur via PHP. Si je pouvais construire cela en un après-midi tout en m’occupant de chats nerveux, cela ne devrait pas être exagéré pour que davantage d’auteurs de plugins montent à bord de ce train. Il existe des milliers de shortcodes et de widgets que les développeurs peuvent convertir en blocs avec un minimum de code.

Je ne suis pas encore prêt à lâcher mon bloc de chapelure dans la nature. Il reste encore quelques réglages à faire et quelques fonctionnalités avancées à mettre en œuvre. En outre, une liste de fils d’Ariane est principalement nécessaire dans un contexte d’éditeur de site où les utilisateurs peuvent la déposer dans quelque chose comme leur modèle d’en-tête. Nous n’en sommes pas encore là, mais je partagerai sans aucun doute le résultat final avec la communauté quand nous le serons.

Ensuite, je vais essayer de construire un bloc qui ne repose pas sur le rendu côté serveur. Je pense que j’ai le coup de main maintenant. Briser cette barrière initiale est toujours l’étape la plus difficile.


Source link