Jamie Marsland recrée la page d'accueil WordPress.org en 20 minutes à l'aide de l'éditeur de blocs

En réponse à la récente controverse sur la durée de mise en œuvre des nouvelles conceptions de page d'accueil et de page de téléchargement de WordPress.org, Gutenberg YouTuber Jamie Marsland a décidé de s'essayer à la recréer avec l'éditeur de blocs.

Matt Mullenweg avait commenté les plans de développement des nouveaux modèles, affirmant que la mise en œuvre aurait dû prendre "des heures et non des semaines". Ses commentaires les plus incendiaires, qui ont déclenché une conversation ultérieure sur les réalités du travail avec l'éditeur de blocs, ont fait référence aux concurrents de WordPress.

"C'est une mise en page si basique qu'il est difficile d'imaginer qu'il faille plus d'une journée à une seule personne sur Squarespace, Wix, Webflow ou l'un des constructeurs de pages WP", a déclaré Mullenweg.

Marsland a décidé de relever le défi en utilisant Gutenberg. Pour cet exercice, il a utilisé le thème par défaut le plus récent de WordPress, Twenty Twenty-Two. Ses résultats ne sont pas identiques aux nouveaux designs de WordPress mais sont très proches, et il a pu créer la page d'accueil en environ 20 minutes.

Dans la vidéo (intégrée ci-dessous), Marsland décrit la création de chaque section de la page d'accueil. Il est ce que l'on pourrait décrire comme un utilisateur expérimenté de l'éditeur de blocs. Il peut rapidement mélanger les lignes, les colonnes et les groupes, ajuster le rembourrage et les marges si nécessaire, et attribuer à chaque section la couleur correspondante pour la conception. À ce stade, ce n'est pas quelque chose que la plupart des utilisateurs moyens de WordPress pourraient faire, c'est pourquoi la vidéo a suscité une si forte réaction de la part des téléspectateurs. La chaîne YouTube de Marsland est centrée sur l'aide aux utilisateurs pour maîtriser la création de pages à l'aide de Gutenberg et de magasins avec WooCommerce.

"Ma conclusion était qu'il est assez facile de réaliser rapidement 95% de la conception, mais ce sont les 5% finaux qui prennent toujours le plus de temps d'après mon expérience", a déclaré Marsland. "Je suppose que c'était davantage le processus interne qui a causé les retards, mais sans être impliqué, il est difficile de dire avec certitude. Je voulais vraiment montrer que ce n'était pas un problème de Gutenberg avec la construction de la conception (comme Matt Mullenweg a mentionné Wix et Squarespace et d'autres constructeurs de pages WP.) »

Alex Shiels, un contributeur parrainé par Automattic sur le projet, a cité quelques éléments sans rapport avec l'éditeur de blocs, qui ont causé les retards, y compris le travail vers "des normes raisonnables pour a11y, la réactivité, la compatibilité du navigateur, le référencement et les performances", ainsi que collaborer avec des contributeurs de différents continents.

En réponse à la tentative de Marsland, le développeur WordPress Patrick Boehner a expliqué à quel point les petits détails restent extrêmement importants. "Vous pouvez certainement dire ce qui a été conçu en premier par rapport à la conception dans l'éditeur", a déclaré Boehner.

Cinq ans après les débuts de Gutenberg dans WordPress, les développeurs de thèmes sont toujours mis au défi de donner vie à des conceptions qui n'ont pas été créées avec une approche bloc d'abord à l'esprit.

"Il reste aujourd'hui fondamentalement difficile, voire impossible, de prendre une conception de page traditionnellement simulée et d'exécuter cette conception à l'aide de blocs", a déclaré le développeur WordPress Jon Brown. "C'est un problème.

"Bien sûr, les blocs sont bien pour" concevoir une page dans le navigateur "et accepter ce que vous obtenez des blocs, mais les blocs manquent toujours de la flexibilité et des contrôles nécessaires pour produire une mise en page réactive, accessible et parfaite au pixel près basée sur une maquette .

"Ce qui prenait auparavant un jour et une douzaine de lignes de php et une douzaine de lignes de css, prend maintenant des semaines de construction de blocs personnalisés car les blocs de base ne peuvent pas être facilement modifiés via des crochets et manquent des contrôles de base nécessaires."

Les contributeurs de Gutenberg progressent en introduisant une typographie fluide et suivent une multitude de problèmes liés à l'amélioration de la cohérence des outils de conception. En attendant, les développeurs de thèmes endurent les difficultés de croissance nécessaires à mesure que l'éditeur de blocs mûrit pour accueillir ceux qui espèrent rendre leurs conceptions instantanément réactives.

"J'ai créé un thème FSE complet à partir de zéro et j'ai été surpris de voir combien de ma conception j'ai pu reproduire avec succès avec l'éditeur, theme.json et un CSS personnalisé minimal ou inexistant", a déclaré le développeur de thèmes vétéran Mike McAlister. . "Bien sûr, il a fallu beaucoup de bricolage, mais j'ai quand même été impressionné.

"Cependant, comme le mentionne Jon, à la seconde où vous devez ajuster quelque chose pour un écran plus petit (ou un écran plus grand si vous osez essayer la conception mobile d'abord dans l'éditeur), vous vous heurtez à un mur. C'est particulièrement évident avec la marge, le rembourrage et l'écart de bloc, qui n'ont pas encore de contrôles réactifs. Vous pouvez voir cela ajusté via CSS dans le nouveau thème sur .org.

La réactivité est l'un des problèmes cités par Shiels pour expliquer pourquoi la mise en œuvre des conceptions a pris plus de temps que de simplement recréer la conception dans l'éditeur de blocs.

"Cependant, il y a des indices d'améliorations à venir pour la réactivité", a commenté McAlister. « La typographie fluide et clamp() ont certainement aidé à contrôler la typographie, mais il y aura toujours des circonstances où vous aurez besoin d'un contrôle encore plus fin. Tous les autres constructeurs de sites ont résolu ce problème, il n'y a aucune raison de penser que WordPress ne peut pas ou ne veut pas. (Je l'espère bien, car environ 50 à 60 % du trafic provient d'appareils mobiles ces jours-ci !)

"L'un des meilleurs moyens de surmonter ces difficultés de croissance est d'avoir autant de dog-fooding que possible - en utilisant l'éditeur et FSE pour créer autant de scénarios réels que possible afin de découvrir ces angles morts."

Le court exercice de Marsland montre à quel point vous pouvez vous rapprocher de la recréation du design de WordPress.org en peu de temps si vous connaissez bien l'éditeur de blocs. Il a réussi à prouver que l'interface utilisateur de création de pages de Gutenberg n'est pas un obstacle à la reproduction de conceptions créées dans d'autres applications. Il s'agit plutôt de tous les autres éléments de la liste de contrôle associés que les développeurs doivent généralement résoudre en dehors de l'éditeur, y compris l'accessibilité, la réactivité et les considérations SEO. Plus Gutenberg se rapprochera de la réduction du travail supplémentaire lié à la réactivité et à l'accessibilité, plus il sera accessible aux utilisateurs réguliers qui essaient de produire eux-mêmes les conceptions qu'ils imaginent.