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 à la louange, Wayfinder est une solution de contour de bloc pour l’éditeur WordPress.

Comme pour les 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 en 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 de style.

Contour d'un bloc d'en-tête entre deux paragraphes via le plugin Wayfinder.
Aperçu d’un bloc d’en-tête.

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 des utilisateurs du site. Actuellement, il n’y a pas de paramètres par utilisateur.

À première vue, le plugin semblait très bien fonctionner. 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 dans presque tous les sens.

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 Titre, Paragraphe et Image. J’ai d’abord remarqué que je ne pouvais pas taper le même nombre de mots que d’habitude sur une ligne. Ma typographie parfaitement réglée s’est brisée plus tôt qu’elle n’aurait dû. L’espacement entre les paragraphes semblait un peu trop grand. Mes images grand format étaient juste un peu plus petites que d’habitude.

L’expérience utilisateur était encore bonne jusqu’à ce point, 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 critiques 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 se sont posés lors du test de plusieurs autres, tels que Twenty Twenty-One, Nutmeg et Eksell – chacun étant un thème bien équilibré adapté à l’éditeur de blocs.

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

Le problème est que le plugin ajoute 18 pixels de remplissage 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 tels que les icônes sociales :

Icônes sociales agrandies lors de l'utilisation du plugin Wayfinder.
Saint moly ! Ce sont des icônes sociales gigantesques !

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

Affichage d'un bloc de liste dans l'éditeur où le remplissage du plugin Wayfinder le désaligne.
Bloc de liste décalé hors de l’alignement.

Les auteurs de thèmes peuvent écrire des CSS personnalisés pour annuler le remplissage 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 Themers doivent déjà le faire assez pour se disputer les blocs maintenant.

Supprimer celui-là padding règle du plugin editor-style.css tué 99% de ses problèmes. Après, les choses fonctionnaient comme une machine bien huilée.

En tant que développeur, j’explorerais outline-offset pour l’espacement entre le bloc et son contour, peut-être en le coupant 18px un peu en bas. É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 pour chaque bloc, en particulier lorsque ces blocs sont imbriqués ou petits (par exemple, icônes sociales, navigation). Il comporterait ses propres défis, mais devrait être un cours moins destructeur.

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

Le seul autre problème pourrait être les thèmes qui utilisent ::before et ::after pseudo-éléments 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 limite.

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

Bordure de blocs pleine largeur de l’éditeur Gutenberg (un peu la bouchée), un autre plugin récent offrant des fonctionnalités similaires, interrompt 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 Contour du bloc de l’éditeur le plugin a été mon recommandation à suivre pendant 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 léthargique. 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ère éviter.

Kit Éditeurs a une fonctionnalité similaire de « directives de bloc » qui utilise une ombre de boîte au lieu d’un remplissage et d’un contour. Cela ne gâche pas la plupart des mises en page de thèmes avec cette technique. Cependant, j’ai rencontré d’autres conflits de style avec le plugin. De plus, EditorsKit est excessif 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. Ce n’est peut-être pas grand-chose, mais c’est dire 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 à son approche, cela pourrait être encore mieux. Je suis impatient de tester les futures itérations.



Source link