Gutenberg 9.7 améliore l'expérience utilisateur, met à jour les blocs réutilisables et apporte des modèles de page aux thèmes FSE

Gutenberg 9.7 a atterri hier avec plusieurs mises à jour et améliorations. Les utilisateurs doivent s'attendre à voir des modifications de l'interface pour les variations de blocs, les transformations et les modèles. Des blocs réutilisables sont en cours d'élaboration après ce qui semblait être une interruption. Les développeurs peuvent également désormais ajouter des modèles de page personnalisés à leurs thèmes WordPress basés sur des blocs.

Cette version a eu le moins de corrections de bogues que j'ai vues depuis un moment. L'équipe de développement n'a intégré que huit correctifs dans la mise à jour, ce qui pourrait indiquer que les choses étaient plus stables que d'habitude après la sortie de la 9.6 il y a quelques semaines.

La plupart des travaux de la 9.7 concernaient les nouvelles fonctionnalités et les améliorations. Comme prévu, l'édition complète du site a eu sa juste part de temps. Cependant, même cela semblait un peu retardé pour cette version. La plupart des mises à jour concernent l'interface de post-édition.

Améliorations de l'expérience utilisateur

L'équipe a publié plusieurs mises à jour sur le fonctionnement des fonctionnalités dans l'éditeur. Certains d'entre eux peuvent sembler mineurs mais améliorent l'expérience globale de l'éditeur.

Les variations de blocs ont reçu une amélioration bienvenue. Les variantes se produisent lorsqu'un bloc sous-jacent est utilisé pour créer plusieurs variantes du même bloc. Par exemple, le bloc Embed contient YouTube, Twitter et d'autres variantes. Dans les versions précédentes, l'inspecteur de blocs dans la barre latérale et la navigation des blocs affichaient le nom générique, l'icône et la description. Cependant, Gutenberg 9.7 affichera désormais les détails de la variation d'utilisation.

Lors de la transformation d'un bloc, les utilisateurs peuvent voir un aperçu de ce à quoi ressemblera le bloc. C'est une petite amélioration. Cependant, cela pourrait vous éviter quelques maux de tête avant de décider de transformer un bloc en un autre.

Gutenberg 9.6 a introduit une fonctionnalité de glisser-déposer pour les blocs dans l'inséreuse. L'équipe a maintenant étendu cette fonctionnalité pour bloquer les modèles. Ceci est juste un autre échelon sur l'échelle pour ceux qui recherchent plus de capacités de glisser-déposer.

Blocs réutilisables mis à jour

Cela faisait un moment que je n'avais pas testé les blocs réutilisables. La fonctionnalité a apparemment pris le pas sur d'autres fonctionnalités plus récentes au cours de la dernière année. Il ne s'est jamais senti beaucoup mieux qu'un prototype initial. Il n'existe toujours aucun moyen de les gérer facilement à moins que vous ne sachiez où chercher. Cependant, il semble que l'équipe de développement de Gutenberg développe activement cette fonctionnalité presque oubliée.

Les utilisateurs peuvent s'attendre à plus dans les prochaines versions. "Sur la base de ces changements, l'interface utilisateur des blocs réutilisables va très probablement voir quelques itérations dans les semaines à venir", a écrit Riad Benguella dans le message d'annonce.

J'ai effectué un premier test pour voir à quoi ressemblait la fonctionnalité dans Gutenberg 9.7. Après avoir cliqué sur le bouton "Ajouter aux blocs réutilisables", l'éditeur a fait un flash rapide. Ensuite, une notification est apparue en bas de l'écran indiquant que le bloc réutilisable avait été créé. Parce que je n'avais pas ouvert mon panneau de barre latérale d'options de bloc à l'époque, je n'ai vu aucun moyen de modifier le titre du bloc réutilisable. Ma pensée immédiate a été que l'équipe a pris une fonctionnalité déjà à moitié cuite et l'a aggravée de manière exponentielle.

En creusant davantage, j'ai découvert que les utilisateurs pouvaient modifier le titre du bloc réutilisable dans la barre latérale des options de bloc. Cependant, l'équipe ne s'est pas arrêtée là. Ils ont ajouté plusieurs améliorations à la fonctionnalité.

Les blocs réutilisables sont désormais modifiables dans l'éditeur de publication lui-même. Les utilisateurs peuvent faire glisser une image hors du bloc, par exemple. La barre latérale de l'inspecteur est disponible pour les blocs internes. Les blocs réutilisables ressemblent désormais à n'importe quelle autre partie de l'éditeur. Toutes les modifications seront répercutées sur toutes les instances des blocs réutilisables sur le site.

La grande différence réside dans la manière dont ils sont enregistrés.

Les blocs réutilisables font désormais partie du système de sauvegarde « multi-entités ». En cliquant sur le bouton de mise à jour de l'éditeur, les utilisateurs auront la possibilité d'enregistrer l'intégralité de la publication et/ou des blocs réutilisables individuels.

Modèles de "page" personnalisés pour les thèmes FSE

Les thèmes basés sur des blocs prennent désormais en charge ce qui était traditionnellement connu sous le nom de modèles de page. Tous les types de publication sont techniquement pris en charge avec la fonctionnalité. Cependant, l'équipe semble s'en tenir à la terminologie "page" après quelques discussions.

Il a fallu creuser car il n'y a pas de documentation existante et l'exemple original dans le ticket ne reflétait pas le résultat final du code qui a été adopté. Cependant, j'ai réussi à comprendre le fonctionnement de la fonctionnalité. Pour les auteurs de thèmes qui souhaitent tester cette fonctionnalité, utilisez l'exemple de code suivant pour ajouter un modèle de "contact". Placez-le au niveau racine du fichier experimental-theme.json de votre thème. Vous devrez également accompagner cela d'un block-templates/contact.html dans votre thème.

 "pageTemplates": { "contact": { "title": "Contact", "postTypes": [ "page" ] } }

Cette fonctionnalité ne fait rien de particulièrement révolutionnaire pour le moment. Il ajoute simplement le modèle personnalisé à la liste déroulante sur l'écran d'édition de publication/page. C'est l'équivalent du système de template de page actuel disponible pour les thèmes traditionnels.

Bien qu'il s'agisse d'un développement intéressant, les modèles de page traditionnels peuvent ne pas avoir beaucoup de sens dans le paradigme de la thématisation des blocs. Il n'y a aucun moyen de modifier la sortie visuelle de la page dans l'éditeur en fonction du modèle sélectionné - les utilisateurs doivent toujours afficher la page sur le front-end pour voir le résultat de son application. Le système de blocs concerne la rétroaction visuelle instantanée. Les modèles de page doivent être repensés pour la nouvelle ère.

"En termes d'interface utilisateur et d'intégration avec le mode modèle, nous pouvons faire beaucoup plus que l'ancienne boîte de sélection", a déclaré Benguella, qui était le développeur à l'origine de la pull request. « Nous pouvons afficher un aperçu des modèles et offrir un modal ou quelque chose comme ça pour que les gens puissent choisir… Nous aurions besoin d'une réflexion sur la conception et d'explorations là-bas. Ce PR définit simplement les exigences techniques pour que cela fonctionne.

Une grande partie, mais pas la totalité, des modèles de pages nécessaires au cours de la dernière décennie peuvent désormais être remplacés par des modèles de blocs.

À long terme, je préférerais voir des modèles de page qui se comportent davantage comme des mises en page de blocs prédéfinies. C'est ainsi que fonctionnent aujourd'hui les modèles de blocs pour les types de publication personnalisés. Cependant, c'est au niveau du type de poste plutôt qu'au niveau du poste individuel.

Les modèles de page traditionnels sont datés. Les thèmes offrent rarement plus que quelques-uns. Un pour supprimer la barre latérale. Un pour déplacer la barre latérale vers la gauche ou la droite. Un autre pour élargir la zone de contenu de la page.

Ce qui est clair, c'est que nous avons besoin de plus d'exploration sur ce à quoi ressembleront les modèles de page du futur. Sont-ils nécessaires dans le système de blocs ? Existe-t-il de meilleures façons de gérer les thèmes traditionnels pour lesquels ils sont utilisés ? Comment fonctionneront-ils dans une interface qui nécessite un retour visuel ?