Gutenberg 11.3 présente le panneau Dimensions, ajoute la prise en charge du rembourrage des boutons et accélère l'insertion

Publié: 2021-08-19

Plus tôt dans la journée, Gutenberg 11.3 a atterri dans le répertoire des plugins WordPress. La dernière mise à jour introduit un nouveau panneau de dimensions pour basculer les options de bloc liées à l'espacement. Le bloc Button prend désormais en charge le contrôle de remplissage et le bloc Post Featured Image a de nouveaux paramètres de largeur et de hauteur.

L'un des points forts de la version était une amélioration de la vitesse d'ouverture et de recherche dans l'inséreuse. Le temps d'ouverture a chuté de plus de 200 ms, passant de 370,35 ms à 137,28 ms. La vitesse de recherche est passée de 190,37 ms à 67,24 ms.

La dernière version comprend une bibliothèque de sélecteurs de couleurs simplifiée. Les aperçus enrichis pour les liens, une fonctionnalité introduite dans Gutenberg 10.9 pour les URL externes, fonctionnent désormais avec les liens de sites internes.

Les auteurs de thèmes devraient profiter de la spécificité réduite des feuilles de style de réinitialisation et de l'éditeur classique. De tels changements permettent toujours un peu plus facilement aux auteurs de thèmes de faire correspondre l'éditeur et le style frontal.

Panneau de dimension pour les contrôles d'espacement

Basculer les "options d'affichage" pour les contrôles de remplissage et de marge dans l'éditeur WordPress.
Basculer les contrôles de remplissage et de marge pour le bloc Slogan du site.

Gutenberg 11.3 introduit un nouveau panneau Dimensions pour les blocs prenant en charge les contrôles de marge ou de remplissage. La fonction ajoute un bouton points de suspension ( ... ) à la place de la flèche d'ouverture/fermeture typique de l'onglet. Les utilisateurs peuvent sélectionner les contrôles qu'ils souhaitent utiliser.

L'objectif à long terme est de nettoyer l'interface, en n'exposant que les contrôles dont un utilisateur a réellement besoin. Parce que ces besoins sont subjectifs, permettre aux utilisateurs de les activer/désactiver est une voie idéale à suivre.

Les inconvénients actuels sont doubles. Une fois que vous avez choisi d'afficher les contrôles de marge ou de remplissage, le panneau lui-même ne peut pas être réduit. Cela exacerbe le problème même que la nouvelle fonctionnalité tente de résoudre - désencombrer l'interface de la barre latérale. Pour moi, au moins, je veux toujours un accès rapide aux contrôles d'espacement. Cependant, je n'ai pas toujours besoin de les montrer.

Le deuxième problème est que le choix de l'utilisateur de ce qu'il faut afficher ne semble pas être stocké. Chaque fois que vous travaillez avec un bloc, vous devez sélectionner les contrôles qui doivent apparaître.

Le nouveau panneau Dimensions n'est qu'une partie du processus de dimensionnement (largeur et hauteur), d'espacement (remplissage et marge) et des contrôles associés pour les blocs. Le travail vers une solution plus complète est toujours en cours. Vraisemblablement, l'équipe de développement abordera ces problèmes et d'autres dans les prochaines versions. Cependant, ceux qui exécutent le plugin Gutenberg en production doivent s'attendre à des bizarreries d'utilisation.

Le plugin Block Visibility possède actuellement la version la plus conviviale d'un tel contrôle à bascule. Ce n'est pas encore une solution parfaite, mais cela fonctionne un peu mieux que ce qui existe actuellement chez Gutenberg.

Rembourrage du bloc de boutons

Personnalisation du padding pour le bloc Button dans l'éditeur WordPress.
Test de la nouvelle option de rembourrage du bloc de boutons avec les blocs TT1.

Ce n'est un secret pour personne que je n'aime pas le rembourrage par défaut du bloc Button lors de l'utilisation du thème TT1 Blocks (version basée sur les blocs de Twenty Twenty-One). J'en ai fait une de mes missions de le signaler régulièrement, allant même jusqu'à refuser d'utiliser le bloc lors du dernier appel à des tests dans le cadre du programme de sensibilisation FSE.

Un bouton surdimensionné n'est pas toujours le mauvais choix stylistique sur une page Web. Le contexte compte et je continue en quelque sorte à rencontrer des scénarios où j'ai besoin de quelque chose d'un peu plus réduit. Le contrôle du rembourrage du bloc Button est sur ma liste de souhaits depuis des mois, et l'équipe de développement de Gutenberg l'a fait.

À partir de la version 11.3, les utilisateurs peuvent contrôler le remplissage des blocs Button individuels. Il apparaîtra désormais comme une option dans le nouveau panneau Dimensions mentionné précédemment.

Prière exaucée. Passons maintenant à l'ajout de contrôles de remplissage à tous les blocs.

Le seul problème potentiel que certains utilisateurs pourraient rencontrer est le maintien d'un espacement constant lors de l'utilisation simultanée de plusieurs blocs Button. La façon la plus simple de le faire est d'ajouter et de styliser le premier, puis de le dupliquer pour en créer d'autres avec le même espacement. Ce n'est pas un problème nouveau; il s'applique à toutes les options de bouton où les utilisateurs souhaitent une cohérence au sein d'un groupe.

Commandes de dimension d'image en vedette

Un bloc d'image en vedette dans l'éditeur WordPress avec ses options de hauteur, de largeur et d'échelle affichées dans la barre latérale.
Ajustement des dimensions d'un bloc Post Featured Image.

Le bloc Post Featured Image a enfin reçu une mise à niveau petite mais pratique. Dans le passé, les utilisateurs et les auteurs de thèmes n'avaient qu'une seule option pour décider de le lier à la publication. Désormais, ils peuvent contrôler la largeur et la hauteur de l'image.

Si un utilisateur définit une hauteur pour l'image, l'éditeur révélera une option "Echelle" séparée avec les choix suivants :

  • Couverture (par défaut)
  • Contenir
  • S'étirer

Que font réellement ces options ? Ce serait une bonne question. Même en tant que personne dans la boucle de la conception et du développement Web depuis près de deux décennies, j'oublie parfois et je dois les rechercher. Ce sont des valeurs pour la propriété CSS object-fit et sont susceptibles de dérouter les utilisateurs dans de nombreux cas.

Couvrir et contenir permettent à l'image de tenir dans la boîte de l'élément contenant tout en conservant son rapport d'aspect (pas d'étirement de l'image). La différence est que la valeur de couverture sera tronquée si elle ne rentre pas et la valeur de contenu peut être en boîte aux lettres. Une valeur d'étirement remplira son conteneur quel que soit le rapport d'aspect.

Selon le rapport d'aspect de l'image sur son conteneur, chacune des valeurs peut afficher essentiellement la même chose à l'écran. Ou, ils pourraient fournir des résultats très différents. Le couplage de ces contrôles de dimensions avec des alignements larges et complets (également des options liées à la largeur) pourrait également entraîner des expériences imprévisibles.

Le concepteur de thème en moi souhaite désactiver complètement l'interface utilisateur pour cela et présenter quelque chose de légèrement plus contrôlé : un sélecteur de taille d'image.

Un tel sélecteur ne doit pas être confondu avec les contrôles de largeur et de hauteur. Les auteurs de thèmes WordPress enregistrent des tailles d'image personnalisées depuis des années. Le principal cas d'utilisation pour cela était les images en vedette. Les utilisateurs peuvent utiliser ces tailles avec les blocs Image et Derniers messages actuels. Cependant, ils n'ont pas encore cette option avec Post Featured Image.

Je suis dans le camp qui pense que les contrôles de taille d'image auraient dû être le premier ajout au bloc. Il fait tellement partie intégrante de la conception de thèmes WordPress qu'il ne peut pas être laissé de côté, et je me suis battu – ou du moins harcelé – pour m'assurer que les auteurs de thèmes peuvent contrôler les images en vedette via des tailles personnalisées.

Heureusement, il existe un ticket ouvert pour la prise en charge de la taille d'image personnalisée. Parmi les autres fonctionnalités encore manquantes, il s'agit d'un bloqueur pour de nombreux auteurs de thèmes qui cherchent à franchir le pas vers les thèmes de blocs.

Il existe de nombreux cas d'utilisation pour les nouvelles options, telles que le recadrage automatique des images en vedette d'une grille de publication en un carré. J'attends avec impatience un ensemble d'outils plus robustes pour le bloc Post Featured Image.