Composants G2, une réinvention à partir de zéro des composants WordPress

Mettez à jour certaines choses.

C'était l'objectif que Jon Quach, concepteur principal chez Automattic, a défini dans la feuille de route pour l'intégration du projet G2 Components dans Gutenberg et, éventuellement, dans le cœur de WordPress. Le projet est une réinvention des éléments qui composent l'éditeur de blocs, une refonte « à partir de zéro » du système de composants. Mettre à jour toutes les choses ou même plusieurs choses à la fois risque de tout casser.

"Idéalement, ce qui devrait arriver, c'est que vous ne devriez mettre à jour que certaines des choses de manière très contrôlée et intentionnelle", a écrit Quach dans le post. Il a comparé la transition d'une ville, section par section, à l'énergie solaire jusqu'à ce que l'usine électrique traditionnelle puisse être fermée. Vous convertissez une pièce, testez, trouvez des problèmes et corrigez-les avant de passer à la section suivante.

C'est le plan d'intégration des composants G2 dans Gutenberg.

"G2 Components est un projet qui incarne l'idée d'améliorer les interfaces utilisateur et les expériences utilisateur pour les autres", a déclaré Quach. "Pour le moment, il se matérialise sous la forme d'un système de composants conçu pour fonctionner dans le contexte et les environnements de Gutenberg et WordPress."

L'objectif est de fournir les ressources nécessaires pour améliorer l'interface utilisateur du projet Gutenberg. Les composants devraient faciliter la création de nouvelles interfaces utilisateur sans pirater le code ensemble. Quach a déclaré que la cohérence et les expériences du système de composants devraient évoluer et avoir un effet d'entraînement sur toute la plate-forme WordPress. Cela s'étendra également aux développeurs de blocs tiers.

"Les composants du code ne sont que le point de départ", a-t-il déclaré. "Mon objectif ultime est que cela transcende le code et influence et élève également la conception - en créant un système de conception unifié qui permet et permet aux gens de créer des expériences d'interface utilisateur cohérentes et riches en fonctionnalités dans le monde de WordPress."

Quach pense que les plates-formes ont bénéficié d'approches similaires. Il a mentionné Material Design by Google comme ayant amélioré la plate-forme Android et apporté la cohésion entre les produits de l'entreprise.

L'équipe Gutenberg a déjà commencé à intégrer les composants G2 dans le projet. Cette intégration remplace les composants WordPress (@wordpress/components) d'une manière contrôlée qui ne doit pas casser les implémentations existantes dans l'éditeur principal ou les projets tiers. Les nouveaux composants seront échangés au fur et à mesure qu'ils seront prêts. "Comme appuyer sur un interrupteur", a déclaré Quach.

La vidéo suivante est une présentation d'une heure des composants G2 que Quach a publiée sur YouTube :

Il publie régulièrement des mises à jour sur le blog de G2 Components. Parallèlement à cela, il y a des plongées plus profondes dans sa réflexion sur la conception du projet. Il parle également du projet sur son flux Twitch presque quotidiennement.

Que sont les composants ?

Les composants sont tout, des boutons aux bascules en passant par les cases à cocher. Ce sont des pièces standardisées qui composent l'interface utilisateur de l'éditeur de blocs. Ils sont disponibles pour les développeurs principaux et tiers pour créer ce que les utilisateurs finaux voient et avec lesquels ils interagissent. Cependant, il y avait un problème avec la façon dont le système de composants d'origine a été construit.

"Les composants actuels ne sont pas construits avec un système à l'esprit, mais plutôt pour répondre à un besoin immédiat", a déclaré Quach. « Ce détail de conception particulier est crucial. Une approche axée sur les systèmes prend plus facilement en charge l'ajout de nouvelles fonctionnalités et, plus important encore, la personnalisation !

La nouvelle approche consiste à créer un système de conception natif pour WordPress. Un tel système permettrait à n'importe qui de s'appuyer dessus et de créer des expériences natives.

Quach a déclaré que l'une des façons les plus simples de voir cela est du point de vue de la thématisation du backend - le système de composants a également un sous-système de thématisation. "Au lieu de la méthode traditionnelle d'écriture du CSS comme un" skin "à superposer, l'esthétique de l'interface utilisateur peut être ajustée via des valeurs de configuration - de la même manière que WordPress peut être configuré avec des définitions dans le fichier wp-config.php ", a-t-il déclaré. « Cette distinction est importante car ces valeurs puisent directement dans le système de style, permettant aux styles de se charger correctement au bon endroit et au bon moment. Tout cela sans affecter les styles de l'environnement actuel et, plus important encore, sans être affecté par les styles de l'environnement actuel.

Il répondait à ma question sur la raison pour laquelle le système de composants devrait être reconstruit à partir de zéro. L'idée est d'avoir des composants qui "fonctionnent simplement" dans un environnement tel que l'administrateur WordPress, par exemple en s'assurant que l'existence de la feuille de style d'un thème WordPress ne casse pas les composants simplement en étant chargée.

"Pourquoi repenser, reconstruire et améliorer les entrées, les boutons, les modaux, les listes déroulantes et autres ?" contra Quach en réponse. "Pour que vous, le développeur, n'ayez pas à le faire."

Qu'est-ce que cela signifie pour les développeurs ?

Le respect de la rétrocompatibilité est quelque chose que Quach a déclaré avoir pris très au sérieux lors de la conception de l'architecture du projet G2 Components. Il a également déclaré que cela faisait partie de la stratégie d'intégration qu'il proposait.

"J'avais mentionné que ce projet" incarne l'idée d'améliorer les interfaces utilisateur et les expériences utilisateur pour les autres ", a-t-il déclaré. "La prise en compte de la rétrocompatibilité et la prise en charge de la migration tierce relèvent absolument de la catégorie de l'expérience utilisateur."

Alors que l'équipe Gutenberg continue d'intégrer de nouveaux composants, cela ne devrait pas changer ce que les développeurs ont déjà fait. Cependant, cela pourrait ouvrir de nouvelles possibilités.

"Le nouveau système de composants aidera certainement le département de l'interface utilisateur", a déclaré Quach. « Un domaine qui me passionne particulièrement est l'espace de développement rapide/prototypage. Étant donné que ces composants sont des unités autonomes, ils peuvent être intégrés à des plates-formes telles que CodeSandbox et ils… fonctionnent tout simplement. Vous pouvez démarrer rapidement et construire et partager rapidement des prototypes (allant de minuscules mais puissants à grands et en charge).

Il a déclaré qu'il avait réussi à tester des conceptions de composants et à démontrer des idées pour un retour d'information rapide. Il a également travaillé dans la direction opposée, créant des composants complexes dans CodeSandbox et les ramenant dans le système de composants.

"En tant que concepteur et développeur front-end, je ne peux pas souligner à quel point ce flux de travail de" micro-construction "est efficace, efficace et créatif", a-t-il déclaré. "C'est quelque chose que j'ai hâte que d'autres vivent également."