Hello Charts lance une expérience native de création de graphiques pour l'éditeur de blocs

Luke Carbis et Rob Stinson, deux des trois personnes de l'équipe Block Lab que WP Engine a récupérée en 2020, sont de retour ensemble sur un nouveau projet. Cette fois, ils sont rejoints par Byron Keet. Le trio s'attaque à l'espace des graphiques WordPress via une suite de blocs nommés Hello Charts.

"Certaines personnes lancent des offres le Black Friday", a écrit l'équipe la semaine dernière dans son deuxième tweet seulement depuis juillet. « Nous lançons un produit complet ! »

Carbis a souligné que l'équipe s'était efforcée de créer un plugin natif d'éditeur de blocs. Il n'y a pas d'écrans d'administration ou de pages de paramètres, et l'utilisateur travaille simplement à partir de l'éditeur.

Le matériel marketing sur la page d'accueil du site Web affirme que Hello Charts est "le premier éditeur de blocs construit par un plug-in de graphiques en premier". Cependant, SB Charts existe depuis près d'un an et Chart Block a atterri dans le répertoire des plugins WordPress il y a plusieurs semaines. Charts Blocks for Gutenberg, qui prend en charge les importations CSV, a été publié il y a six mois mais n'a pas été mis à jour depuis.

La prétention d'être le premier est peut-être une erreur de marketing. La seule raison pour laquelle je l'ai repéré immédiatement est que je surveille de près les plugins similaires depuis un certain temps, dans l'espoir de trouver une solution de graphiques décente pour l'éditeur de blocs. Bien que Hello Charts ne soit techniquement pas le premier à atterrir, il offre la meilleure expérience utilisateur à ce jour.

Dans la plupart des cas, je m'appuie sur des graphiques à barres et à courbes. Cependant, le plugin propose cinq types de blocs au total :

• Diagramme à bandes
• Graphique en ligne
• Diagramme circulaire
• Carte de la zone polaire
• Carte radar

Chacun fonctionne presque de la même manière lors de la saisie des données et de la personnalisation de la sortie. Il existe quelques options et commandes spécifiques à chaque type. De plus, les utilisateurs peuvent passer d'un bloc graphique à un autre et vice-versa en un clic sans perdre de données.

Après m'être familiarisé avec les options, j'ai construit un tableau de données de ventes de produits sur trois ans par mois. J'ai commencé avec le bloc graphique à barres, qui avait le plus de sens. Chacun des blocs a un bouton "Modifier les données du graphique". Cliquer dessus ouvre une superposition sur l'écran qui fonctionne comme un tableur typique.

Les utilisateurs peuvent parcourir chaque cellule, ajouter des données et créer de nouveaux ensembles de données ou de nouvelles lignes. Il existe des options pour dupliquer des ensembles de données ou en ajouter de nouveaux avant/après en cliquant sur le bouton points de suspension. Tout semblait simple pour quelqu'un qui n'a pas passé beaucoup de temps à travailler avec un tableur depuis le cours d'informatique du lycée.

Après quelques minutes, j'ai eu un graphique à barres. Tout ce que j'avais à faire était de l'ajuster pour utiliser les couleurs de mon thème.

Les options de personnalisation du plugin étaient nombreuses mais suffisamment équilibrées pour ne pas devenir envahissantes. Je voulais juste qu'il corresponde à la conception de mon thème sans trop d'histoires, et cela n'a pas pris longtemps pour que cela se produise.

J'ai ajouté un bloc de graphique linéaire à l'éditeur en utilisant mes données existantes. Le seul ajustement que j'avais besoin de faire était l'option "Courbe". Je voulais que mes lignes paraissent droites au lieu de couler en vagues. Je me demandais déjà si l'équipe avait pensé à tout avant que je sache que j'en avais même besoin à ce moment-là.

Pour faire bonne mesure, j'ai testé le bloc Pie Chart. C'est un type de graphique que je peux utiliser occasionnellement. Dans l'ensemble, il a fait aussi bien que les autres.

La fonctionnalité qui me manquait était l'impression des données pour chacun des segments de tarte à l'écran. Les données sont disponibles via une fenêtre contextuelle au survol ou au focus, mais les visiteurs ne peuvent pas voir toutes les données du segment en même temps.

Certes, je n'ai pas passé beaucoup de temps avec les blocs Polar Area Chart et Radar Chart. Mon expérience avec eux est inexistante dans les scénarios du monde réel, donc je ne sais pas vraiment s'il existe des fonctionnalités que d'autres pourraient souhaiter. Je les ai simplement testés pour m'assurer qu'ils fonctionnaient. Comme les autres blocs de l'ensemble, je n'ai rencontré aucun problème.

J'aimerais voir une option de titre ou de légende intégrée dans les blocs du plugin. Cependant, les deux sont facilement ajoutés avec un bloc Titre ou Paragraphe. Pour faire correspondre l'arrière-plan, l'habillage dans un bloc Groupe aide, comme illustré dans la capture d'écran suivante :

Quelques autres fonctionnalités bienvenues seraient les options de couleur pour les lignes des axes X et Y et le texte de données ainsi que la prise en charge de l'écart de bloc ou de la marge. L'espacement des légendes laissait un peu à désirer, souvent trop près de la sortie du graphique. Il a plusieurs options de positionnement, mais il a besoin d'espace supplémentaire, surtout lorsqu'il se trouve en haut ou en bas.

Dans l'ensemble, je n'ai pas trouvé grand-chose à redire. Hello Charts est un plugin que je recommanderais à tous ceux qui ont besoin d'une solution graphique qui fonctionne comme si elle avait été conçue pour le système de blocs WordPress.

Flux d'achat et configuration

Vous pouvez tirer un peu parti des plugins de bloc gratuits actuels, mais Hello Charts vaut bien la mise à niveau du prix. Il peut même être sous-évalué pour la valeur. Si l'équipe construit des importations CSV, ce serait un vol pur et simple.

Les utilisateurs peuvent acheter les cinq types de blocs individuels pour 4 $ individuellement ou les mettre à niveau pour les obtenir tous pour 16 $. Ceux-ci offrent des mises à jour à vie pour un seul site sans support. Il existe un niveau plus élevé de 199 $ pour les sites illimités et un an de support.

Il n'y a qu'un seul plugin que les utilisateurs doivent installer. Chacun des types de blocs est regroupé dans le plugin. Les utilisateurs achètent techniquement une clé de licence pour activer chacun.

Carbis m'a proposé des codes de réduction pour tester le fonctionnement de ce flux d'achat et donner mon avis. L'équipe voulait emprunter une voie différente avec l'achat de blocs. Au lieu de créer un accord tout ou rien pour les utilisateurs, ils pourraient simplement acheter ce dont ils ont réellement besoin. "Donc, si vous avez besoin d'un graphique à barres, achetez simplement un bloc de graphique à barres", a déclaré Carbis. "Ou vous pouvez obtenir tous les types de graphiques sous forme d'ensemble."

Je n'ai eu aucun problème à passer par le flux d'achat. J'ai commencé par le Bar Chart, un bloc dont j'aurais besoin plus souvent que les autres. Ensuite, je suis passé à l'ensemble complet.

Le seul hic que j'ai eu au début était de savoir comment activer les licences car le plugin n'avait pas de page de paramètres. Le champ de licence se trouve en fait sur l'écran d'administration des plugins.

L'inconvénient d'avoir des licences distinctes pour chaque type de bloc est que les utilisateurs doivent entrer la clé pour un, la soumettre, attendre que la page se recharge, faire défiler jusqu'au plug-in et tout recommencer avec une autre licence. Le processus était si pénible que je voulais renoncer à tester les types de graphiques qui ne m'intéressaient pas. Cependant, j'ai continué, en entrant la clé de licence après la clé de licence.

Oui, j'exagère un tout petit peu, mais il serait beaucoup plus facile de saisir plusieurs clés de licence à la fois ou de ne pas attendre le chargement de la page. Cela s'est avéré être une partie de l'expérience qui n'a pas été à la hauteur de la norme établie par le reste du plugin.