Identifiez et sélectionnez des blocs via le plugin WordPress Wayfinder

Christopher John, un designer et ingénieur UX basé à Seattle, a publié hier son premier projet dans le répertoire des plugins. Annoncé via Twitter avec des éloges, Wayfinder est une solution de contour de bloc pour l'éditeur WordPress.

Comme des plugins similaires, l'objectif est de permettre aux utilisateurs finaux de sélectionner plus facilement des blocs imbriqués, ce qui peut parfois être difficile à cerner. Wayfinder décrit chaque bloc dans l'éditeur au survol. Il affiche ensuite le nom du bloc en haut à gauche de la boîte.

Ma fonctionnalité préférée que vous ne trouverez pas ailleurs est l'ajout des classes de chaque bloc en bas à droite de la boîte. Cela facilite la tâche des concepteurs ou des utilisateurs qui souhaitent trouver rapidement une classe pour le style.

Les utilisateurs peuvent également activer ou désactiver les éléments de l'interface utilisateur qu'ils souhaitent voir apparaître via l'écran de configuration du plugin. Cependant, tout changement affecte toutes les expériences utilisateur du site. Actuellement, il n'y a pas de paramètres par utilisateur.

À première vue, le plugin semblait fonctionner très bien. L'expérience de survol était fluide et je n'ai pas eu besoin de modifier les options par défaut. Wayfinder semblait presque être tout ce que l'on pouvait rechercher dans une solution de contour de bloc. Il surpassait les plugins existants à presque tous les égards.

Cependant, les choses ont rapidement commencé à se dégrader lors de la rédaction d'un article de blog typique avec rien d'autre que des blocs d'en-tête, de paragraphe et d'image. J'ai d'abord remarqué que je ne pouvais pas taper le même nombre de mots que d'habitude sur une seule ligne. Ma typographie parfaitement réglée se cassait plus tôt qu'elle n'aurait dû. L'espacement entre les paragraphes semblait un peu trop grand. Mes images alignées en large étaient juste un peu plus petites que d'habitude.

L'expérience utilisateur était toujours bonne jusqu'à présent, mais les petites bizarreries s'accumulaient. Quelque chose n'allait pas. Le plugin avait été plébiscité sur Twitter et avait déjà reçu trois avis cinq étoiles au cours de ses premières 24 heures. Peut-être que mon thème personnalisé était le problème. Cependant, des problèmes similaires sont survenus lors du test de plusieurs autres, tels que Twenty Twenty-One, Nutmeg et Eksell - chacun un thème bien équilibré répondant à l'éditeur de blocs.

Aussi propre que soit l'interface utilisateur du plugin, il détruit le plus souvent l'espacement de bloc par défaut du thème. Cela devient plus visible lorsque les utilisateurs commencent à ajouter des couches imbriquées de blocs.

Le problème est que le plugin ajoute 18 pixels de rembourrage autour de chaque bloc via sa feuille de style.

 .wp-block:not(.block-list-appender) { position: relative; outline: 1px dashed transparent; padding: 18px; overflow: visible !important; }

Pour un œil non averti, cela peut ne pas être un problème visible dans de nombreux cas. Cela affectera chaque site différemment, mais 18 pixels de rembourrage supplémentaire sur chaque bloc gâcheront sans aucun doute les choses dans une certaine mesure, à moins que le thème lui-même n'utilise exactement le même espacement dans sa conception.

Les problèmes les plus notables sont observés avec des blocs comme les icônes sociales :

Mais, même quelque chose d'aussi basique qu'un bloc List peut être mal aligné :

Les auteurs de thèmes peuvent écrire des CSS personnalisés pour annuler le rembourrage du plugin. Cependant, la dernière chose dont la communauté WordPress a besoin est une guerre de spécificité entre les thèmes et les plugins. Les thémers doivent déjà le faire suffisamment pour affronter les blocs maintenant.

La suppression de cette règle de padding du fichier editor-style.css du plugin a éliminé 99 % de ses problèmes. Ensuite, les choses fonctionnaient comme une machine bien huilée.

En tant que développeur, j'explorerais le outline-offset pour l'espacement entre le bloc et son contour, peut-être en réduisant un peu ce 18px . Étant donné que les contours ne font pas partie du modèle de boîte CSS, cela n'affecterait pas l'espacement. Des ajustements peuvent être nécessaires sur une base par bloc, en particulier lorsque ces blocs sont imbriqués ou petits (par exemple, icônes sociales, navigation). Il porterait ses propres défis mais devrait être un parcours moins destructeur.

Dans une moindre mesure, la règle de overflow du plugin brise de temps en temps la conception du thème. Ses règles de position et de outline peuvent également annuler certains styles de bloc de cas extrêmes, mais elles sont nécessaires pour que le plug-in fasse réellement son travail. En particulier, je pouvais voir que le positionnement était problématique avec des en-têtes collants lorsque nous entrons dans l'édition du site.

Le seul autre problème pourrait être les thèmes qui utilisent les pseudo-éléments ::before et ::after sur les blocs, mais le plugin doit également les écraser pour afficher le nom du bloc et la liste des classes. Il s'agit probablement d'un autre cas marginal.

Malgré les problèmes, le plugin est en avance sur le peloton à ce stade.

Gutenberg Editor Full Width Blocks Border ( un peu bouchée ), un autre plugin récent offrant des fonctionnalités similaires, rompt la conception de thèmes personnalisés à tous les niveaux. Il accomplit le travail de rendre les blocs plus faciles à sélectionner, mais le sacrifice d'un WYSIWYG n'en vaut pas la peine.

Le plugin Editor Block Outline est ma recommandation préférée depuis un certain temps. Il a ses propres problèmes de conception, mais certains d'entre eux sont réglables en fonction de l'utilisateur. Cependant, ces derniers temps, cela a rendu l'éditeur lent. De plus, son utilisation abusive du système de notification d'administration WordPress pour les abonnés Twitter en fait quelque chose que je préférerais éviter.

EditorsKit a une fonctionnalité similaire de "directives de bloc" qui utilise une ombre de boîte au lieu d'un remplissage et d'un contour. Il ne gâche pas la plupart des mises en page de thème avec cette technique. Cependant, j'ai rencontré d'autres conflits de style avec le plugin. De plus, EditorsKit est exagéré pour les utilisateurs qui ne veulent qu'une seule fonctionnalité.

Cela nous laisse avec Wayfinder. Les verrues et tout, c'est la meilleure option autonome en ce moment. Cela ne dit peut-être pas grand-chose, mais cela dit quelque chose. C'est une caractéristique difficile à cerner. Je n'envie pas les développeurs qui essaient de faire des miracles.

Il est sûr de plaire à beaucoup de ceux qui étaient à la recherche d'une solution de contour de bloc. Il est en mesure de prendre une longueur d'avance sur la concurrence avec sa première sortie relativement solide. Avec des tests de thème plus approfondis et un peu d'ajustement de son approche, cela pourrait être encore mieux. J'ai hâte de tester les futures itérations.