Gutenberg 8.3 met à jour les catégories de blocs, inclut le sélecteur de bloc parent et ajoute de nouvelles commandes de conception

Hier, l'équipe Gutenberg a publié la version 8.3 du plugin en cours derrière l'éditeur de blocs. Bien que l'équipe se concentre principalement sur la prochaine édition complète du site, cette mise à jour comprend plusieurs fonctionnalités destinées aux utilisateurs, telles qu'un ensemble réorganisé de catégories de blocs, un sélecteur de bloc parent, un contrôle d'espacement et des options de couleur de lien.

Une petite amélioration inclut la possibilité de filtrer le bloc Derniers messages par auteur. Le contrôle de niveau pour le bloc Heading a également changé. Au lieu de sélectionner le niveau dans la barre latérale des options de bloc, le sélecteur de niveau se trouve désormais dans la barre d'outils de l'éditeur.

Dans Gutenberg 8.2, appuyer sur la touche Enter dans le champ de légende d'un bloc d'image créait un nouveau paragraphe. Dans la version 8.3, cette fonctionnalité a été étendue à tous les blocs avec des légendes.

L'équipe a corrigé plus de 20 correctifs de bogues dans la dernière version. Dans l'ensemble, la nouvelle mise à jour du plugin semble être solide après une journée d'utilisation. Cependant, certains des ajouts expérimentaux, tels que le nouveau contrôle de remplissage, peuvent être préoccupants. Les auteurs de thèmes doivent commencer à tester cela, à fournir des commentaires et à s'assurer que le développement va dans la bonne direction.

Nouvelles catégories de blocs

L'équipe de Gutenberg a renommé et réorganisé les catégories de blocs. La nouvelle liste semble avoir plus de sens et est mieux consolidée en groupes appropriés :

• Texte
• Médias
• Conception
• Widget
• Intègre

Bien que je sois fan des nouveaux noms de catégories, je trouve les catégories inutiles à des fins pratiques à ce stade. Depuis que Gutenberg a abandonné l'interface à onglets dans l'outil d'insertion de blocs, cela ressemble à un grand mur de blocs. Mes yeux sautent naturellement par les noms de catégorie lorsque je fais défiler et fais défiler la liste des blocs disponibles pour trouver le bloc dont j'ai besoin. J'utilise presque toujours les commandes de barre oblique du clavier pour insérer des blocs. Dans les cas où je ne le fais pas, ce n'est pas une expérience utilisateur idéale, et les nouvelles catégories n'aident pas beaucoup.

Sélectionnez le bloc parent

L'une des expériences les plus frustrantes de Gutenberg consiste à tenter de sélectionner un bloc parent dans un scénario de blocs imbriqués. Bien trop souvent, les utilisateurs ont l'impression de cliquer au hasard dans l'espoir d'atteindre le point idéal où ils peuvent réellement accéder au bloc qu'ils doivent modifier. C'est un exercice de frustration dans les meilleurs moments.

L'équipe de Gutenberg a fait un pas - un petit pas - vers le soulagement de cette douleur. Lorsque vous survolez le bouton "changer le type ou le style de bloc" dans la barre d'outils de l'éditeur, un nouveau bouton apparaît pour sélectionner le bloc parent.

Je ne sais pas si c'est la bonne façon de gérer le problème. J'aimerais voir des expériences avec une sorte de bouton fléché qui apparaît sans survol. Pour l'instant, je suis convaincu que l'équipe tente de résoudre le problème et j'espère que les futures itérations amélioreront la navigation dans les blocs imbriqués.

Cette fonctionnalité ne semble pas fonctionner lorsque le mode barre d'outils supérieure est activé. Pour ceux qui utilisent ce mode, la meilleure façon de sélectionner un bloc parent est via le fil d'Ariane en bas de l'éditeur.

Contrôle expérimental de l'espacement/du rembourrage

Les auteurs de thèmes peuvent désormais ajouter la prise en charge d'un contrôle de remplissage expérimental via add_theme_support( 'experimental-custom-spacing' ) . Lorsqu'il est pris en charge, l'utilisateur final verra un nouvel onglet Espacement sous la barre latérale des options de bloc pour le bloc Couverture, qui devrait être disponible pour d'autres blocs à l'avenir. Par défaut, les utilisateurs peuvent contrôler le remplissage des quatre côtés d'un bloc avec une seule valeur. Ils peuvent également "dissocier" le rembourrage et contrôler individuellement les valeurs du haut, du bas, de gauche et de droite.

Vraisemblablement, l'équipe Gutenberg étendra cette fonctionnalité d'espacement pour inclure également un contrôle de marge. Ce serait le mouvement naturel et celui dans lequel j'espère que cela mènera à la mort du bloc Spacer avec lequel les utilisateurs ont dû vivre au cours des deux dernières années.

Cependant, je ne suis pas convaincu de permettre aux utilisateurs finaux de contrôler le remplissage avec des valeurs explicites. Changer au hasard les valeurs de rembourrage brisera le rythme vertical que de nombreux auteurs de thèmes prennent le temps de calculer méticuleusement. Lors de l'utilisation des valeurs de pixel (valeur par défaut), les utilisateurs rencontreront très certainement des problèmes avec les tailles d'écran des tablettes et des mobiles. Essentiellement, cela créera un désordre complet d'espacement.

Je ne suis pas contre l'idée. Je veux que ce soit fait juste avant que cela n'arrive dans WordPress. Les auteurs de thèmes doivent pouvoir enregistrer des classes nommées qui sont gérées via la feuille de style. Cela revient à l'idée de WordPress ayant un cadre de conception. Créez un ensemble de classes utilitaires pour l'espacement (oh, bonjour, Tailwind). Laissez les auteurs de thèmes définir l'espacement en fonction de leur conception. Laissez les utilisateurs choisir parmi ceux-ci. Ensuite, proposez une option personnalisée pour les moments où les utilisateurs souhaitent prendre les choses en main. À ce stade, ils ont pris la décision explicite de rompre avec le flux de conception choisi par l'auteur du thème.

Couleurs des liens

L'un des obstacles les plus difficiles auxquels les auteurs de thèmes ont dû faire face lors du style de l'éditeur de blocs consiste à déterminer quoi faire avec les couleurs des liens lorsque l'utilisateur modifie la couleur d'arrière-plan d'un bloc. Les utilisateurs ont depuis longtemps le contrôle de la couleur du texte dans ce scénario. Cependant, les couleurs des liens pourraient rapidement devenir inaccessibles ou carrément laides. Les auteurs de thèmes avant-gardistes styliseraient ces couleurs de lien afin qu'ils héritent de la couleur du texte, mais ce n'est pas toujours la solution idéale.

C'est là qu'interviennent les couleurs de lien contrôlées par l'utilisateur. Pour ajouter la prise en charge des couleurs de lien personnalisées, les auteurs de thèmes doivent activer la fonctionnalité via add_theme_support( 'experimental-link-color' ) . Cela ajoutera un nouveau sélecteur de couleur pour les blocs Paragraphe, Titre, Groupe, Colonnes et Média & Texte.

Impossible de faire fonctionner cette fonctionnalité avec l'appel de fonction de support de thème, j'ai dû creuser un peu dans le code pour trouver le problème. Pour que les auteurs de thèmes ajoutent la prise en charge des couleurs des liens, ils doivent également définir leurs liens par défaut, comme indiqué dans l'extrait de code CSS suivant :

 a { color: var( --wp--style--color--link, #000 ); }

WordPress définira automatiquement la --wp--style--color--link . Pour plus de spécificité, les auteurs de thèmes peuvent également cibler .has-link-color a .