Gutenberg 12.1 corrige le décalage de la disposition de l'appender de bloc, ajoute des vues de liste de modèles et améliore les styles globaux

Plus tôt dans la journée, Gutenberg 12.1 a atterri dans le répertoire des plugins WordPress. La dernière version était lourde d'améliorations de l'expérience utilisateur, y compris un correctif pour le changement de disposition de l'appender de bloc, de nouvelles fonctionnalités de styles globaux et une vue de liste de modèles améliorée. Les auteurs de thèmes ont également un nouveau drapeau pour activer tous les outils liés à l'apparence.

WordPress 5.9 devait être lancé aujourd'hui, mais il a été repoussé au 25 janvier 2022. Les contributeurs avaient besoin de plus de temps pour affiner l'éditeur de site et les outils associés fournis avec la version. Jusqu'à présent, ils utilisent le temps supplémentaire en corrigeant les bogues et en créant une meilleure expérience utilisateur globale.

Plus de décalage de mise en page

Si c'était le seul et unique changement dans Gutenberg 12.1, j'aurais été l'utilisateur le plus heureux du monde. Heureusement, il existe d'autres éléments agréables à avoir, mais ma plus grande bête noire en trois ans d'utilisation de l'éditeur de blocs a maintenant été corrigée.

L'appender de bloc (ces petits boutons + ) dans le canevas de contenu est maintenant affiché en utilisant un positionnement fixe. Cela signifie que lorsque vous sélectionnez des blocs, en particulier ceux imbriqués dans d'autres, l'écran ne rebondit plus, ne modifie plus la mise en page ou ne laisse plus d'espaces blancs dans une section par ailleurs parfaite.

Je sais d'avoir parlé à d'autres que cela a été un point douloureux lors de la création de mises en page complexes dans le passé. Pour certains, ils n'utiliseraient pas du tout l'éditeur de blocs parce que c'était tellement irritant. Si vous tombez dans ce camp, cela vaut la peine de réessayer. C'est une nette amélioration de l'expérience utilisateur.

Améliorations globales des styles

Les utilisateurs peuvent désormais définir des dégradés personnalisés via la section palette de couleurs dans la barre latérale des styles globaux. Ceux-ci seront disponibles sur tout le site et ne sont pas liés au thème.

La palette affiche également les couleurs bicolores sous la même section de dégradé. Cependant, il n'existe pas encore d'option pour créer des filtres bichromes personnalisés. Il s'agit d'une section en lecture seule.

Le panneau de styles globaux divise également les options de typographie entre les éléments de texte et de lien, ouvrant la porte à d'autres éléments HTML à l'avenir.

Les utilisateurs ne devraient probablement pas changer cela pour les liens. Au lieu de cela, ils doivent généralement correspondre au texte environnant. Si nous obtenons une décoration de texte ou des options similaires à l'avenir, la séparation pourrait avoir plus de sens. Cependant, la modification de paramètres tels que la taille de la police ou la hauteur de ligne serait probablement préjudiciable à la conception.

Vues des modèles et des parties de modèle

Gutenberg 12.1 introduit une nouvelle vue de liste de modèles et de pièces de modèle à partir de l'éditeur de site. L'interface utilisateur de cette fonctionnalité a changé au cours des dernières versions du plug-in. La liste était disponible via le panneau coulissant de gauche dans l'éditeur pendant des mois. Ensuite, il a été complètement supprimé dans 11.9. Il est réapparu entre cette version et la 12.0.

Le panneau a maintenant été réduit pour inclure trois liens pour le site, les modèles et les parties de modèle. Le premier lien fait apparaître l'éditeur du site. Les autres affichent des tableaux de modèles existants.

La commutation entre les écrans semble lente pour le moment. Cependant, il s'agit de la version 1.0 de l'éditeur de site que les utilisateurs de WordPress du monde entier verront. Cela changera probablement avec le temps. "L'itération actuelle du design privilégie la simplicité et la convivialité", a écrit Riad Benguella dans le message d'annonce. "Des itérations mettant en œuvre la navigation côté client et la vue en mosaïque pourraient être ajoutées à l'avenir."

Il ne semble pas y avoir de moyen d'ajouter des modèles personnalisés, tels qu'une catégorie ou une archive d'auteur. Cliquer sur le bouton "Ajouter un nouveau" présente les options d'un modèle de page d'accueil et de recherche lors de l'utilisation du thème Twenty Twenty-Two.

Cependant, l'ajout d'un nouveau composant de modèle est un processus beaucoup plus raffiné. Après avoir cliqué sur le bouton pour en créer un, les utilisateurs se voient présenter une superposition et un formulaire, comme illustré dans la capture d'écran suivante :

Les utilisateurs peuvent lui donner un nom personnalisé et choisir entre trois zones autorisées : général, en-tête et pied de page. Après avoir créé une nouvelle pièce, les utilisateurs sont redirigés vers l'éditeur.

Lorsque vous affichez à nouveau la liste des pièces du modèle, elle affiche l'utilisateur qui l'a créée et dispose d'une liste déroulante d'options (bouton points de suspension). Actuellement, la seule action consiste à supprimer la pièce.

J'aimerais voir les modèles de niveau supérieur recevoir le même traitement que les parties de modèle lors de la création d'un nouveau. Bien qu'il existe de légères différences entre eux, les deux sont des modèles en fin de compte. L'expérience utilisateur bénéficierait si les processus de création correspondaient.

La création de modèles personnalisés en dehors de la liste par défaut à partir de cet écran aiderait également les concepteurs à créer visuellement des thèmes à partir de l'éditeur de site.

Retour de navigation vide

La dernière version a introduit une solution de repli pour le bloc de menu de navigation vide. En fin de compte, si aucun menu n'est trouvé, il affichera le bloc Liste de pages. Selon le nombre de pages du site d'un utilisateur, cela peut rapidement devenir incontrôlable, comme le montre la capture d'écran suivante de Twenty Twenty-Two :

Les développeurs de thèmes peuvent écraser ce repli via le hook de filtre block_core_navigation_render_fallback en retournant une valeur false ou un ensemble de blocs enfants valides pour le parent Navigation. Auteurs de thèmes, je les invite à faire un usage généreux de ce crochet de filtre.

Éléments de thème de bloc remarquables

Pour les développeurs de thèmes de blocs, les dossiers standard liés aux modèles ont été renommés. Les anciens noms continueront de fonctionner, mais les auteurs doivent mettre à jour les éléments suivants dans leurs thèmes :

• /block-templates renommé en /templates
• /block-template-parts renommé en /parts

Ce changement nettoie le répertoire de thème de niveau supérieur, mais il crée également un chemin vers plus de standardisation à l'avenir. Il existe déjà un ticket ouvert pour /patterns , et un dossier /styles est possible.

Gutenberg 12.1 introduit également un indicateur d' appearanceTools pour theme.json , permettant aux auteurs de thèmes d'activer la prise en charge de toutes les options de bordure, de couleur, d'espacement et de typographie actuelles et futures. J'ai couvert cela plus en détail dans le post de Gutenberg 12.0, qui avait marqué à tort la fonctionnalité comme étant fournie avec la dernière version.