Nick Diego a sorti le Bloc d’icônes plugin la semaine dernière. Contrairement aux blocs similaires disponibles, il ne repose pas sur une bibliothèque tierce. Au lieu de cela, il s’adresse aux développeurs et aux bricoleurs, leur permettant d’ajouter n’importe quel SVG directement à l’éditeur.

Diego est l’auteur du Bloquer la visibilité plugin, qui a un peu plus d’un an et s’annonce comme le meilleur projet de l’espace. Au cours de l’été, il l’a agrandi avec une version pro qui ajoute de la valeur avec plus d’options de niche. En ce qui concerne l’éditeur de blocs, il a jusqu’à présent montré sa volonté de trouver des solutions créatives aux problèmes en mettant l’accent sur une expérience utilisateur bien équilibrée. Son dernier plugin ne semble pas différent.

Rassembler les page de prix pour Block Visibility, c’est ce qui l’a poussé à créer Icon Block. Il avait une énorme liste de fonctionnalités et codait manuellement les icônes via le bloc HTML.

Capture d'écran du tableau de tarification de la page de tarification de Bloquer la visibilité.  Sur la gauche se trouve une liste de fonctionnalités.  Sur la droite, sont des coches et "X" Icônes.
Tableau de tarification de la visibilité des blocs.

« J’ai assemblé ce petit bloc cette semaine après avoir été très ennuyé d’utiliser des blocs HTML pour les icônes SVG (et de ne pas vouloir utiliser une bibliothèque de blocs) », a déclaré Diego. « Mon objectif était de créer un simple bloc d’icônes SVG en utilisant pratiquement tous les composants WP natifs. Et comme plus de fonctionnalités sont ajoutées au noyau (marge, contrôles réactifs, etc.), je les ajouterai au bloc.

Le résultat a été un succès. Il coche de nombreuses cases pour une telle solution d’icônes qui s’appuie sur le système de blocs WordPress.

À la base, il permet aux utilisateurs finaux de copier et coller n’importe quel code SVG dans un champ de texte et de le rendre dans l’éditeur et sur le front-end.

L'icône du logo WordPress en noir.
Ajout d’une icône de base.

Cependant, cela ne s’arrête pas là. Il utilise une gamme de composants de base et de fonctionnalités prises en charge par les blocs pour compléter la solution. Il prend en charge les fonctionnalités indispensables telles que les couleurs et l’alignement. Les utilisateurs peuvent ajuster la taille de l’icône, le remplissage et le rayon de la bordure tout en le liant à n’importe quelle URL.

Une fonctionnalité que je souhaite voir ajoutée est un ensemble de contrôles de style de bordure, de largeur et de couleur. C’est plus un plus qu’une priorité.

Le logo WordPress sous forme d'icône avec un fond bleu et une icône blanche.
Ajuster les couleurs, la taille, l’espacement et le rayon de la bordure de l’icône.

La prise en charge des composants de base aurait été parfaite pour un lancement, mais Diego a franchi cette étape supplémentaire et a ajouté des fonctionnalités personnalisées. Le bloc Icône a un bouton « pivoter » qui permet aux utilisateurs de faire pivoter l’icône par incréments de 90 °. Il a également des boutons pour retourner l’icône horizontalement et verticalement.

Il existe des tonnes de cas d’utilisation pour de tels plugins d’icônes dans l’éditeur WordPress. L’un des scénarios les plus courants est un simple ensemble de cases avec un graphique en haut.

Trois cases d'affilée avec une icône circulaire et du texte en dessous.
Boîtes avec des icônes.

Avec Icon Block, c’est assez simple à faire en utilisant le bloc Columns, en déposant des icônes personnalisées et en les personnalisant. Cependant, il y a tellement plus qui est possible.

Les pièces manquantes sont du côté de WordPress. Actuellement, il n’y a pas beaucoup de solutions robustes pour construire des implantations horizontales. Il est difficile d’aligner les icônes à côté du texte.

Les variation de ligne récemment ajoutée sur le bloc Groupe est prometteur. L’expérience est un peu compliquée, mais il est possible de placer le bloc Icône à côté d’un Paragraphe, comme le montre la capture d’écran suivante. J’ai construit un tableau de prix rapide avec des icônes de contrôle.

Un tableau de prix à deux colonnes qui présente l'utilisation du bloc d'icônes comme coche dans une liste.
Colonnes de prix avec liste d’icônes.

Il n’y a pas encore de moyen de contrôler l’espacement entre les éléments de chaque ligne à partir de l’interface. Je voulais que mes icônes soient un peu plus proches du texte.

L’autre problème est que cela devrait être une liste. Il n’y a aucune raison de réutiliser d’autres blocs pour construire la mise en page. Cependant, le bloc Liste ne permet pas aux utilisateurs d’imbriquer des blocs.

Ce ne sont pas des problèmes du plugin Icon Block. Il montre simplement un cas d’utilisation raisonnablement courant que WordPress devrait rendre possible. Cela rendrait ces types de plugins beaucoup plus puissants.

Il existe un support pour un bloc d’icônes pour atterrir dans le plugin Gutenberg et, éventuellement, le faire sur WordPress. Chef de projet Gutenberg Matías Ventura a ouvert un billet en 2019 pour explorer l’idée de permettre aux utilisateurs d’insérer des SVG directement dans l’éditeur. Si cela arrivait un jour, il s’agirait plus probablement d’un sélecteur visuel qui ne permet pas aux utilisateurs finaux d’ajouter du code personnalisé. Le bloc de Diego pourrait toujours exister comme solution alternative avec plus de flexibilité dans ce cas.

Alors que le plugin pourrait servir de solution parfaite dans sa forme actuelle à une grande partie de la communauté WordPress, Diego a des plans pour l’améliorer. Il envisage d’ajouter un sélecteur d’icônes pour les utilisateurs qui ne souhaitent pas ajouter de code SVG. Par défaut, cela afficherait les icônes WordPress intégrées. Cependant, il prévoit également de permettre aux développeurs tiers de l’étendre avec des « packs d’icônes » personnalisés.


Source link