Comment nous avons transformé mon prototype en l’une des principales fonctionnalités de notre produit

février 24, 2021

Ivan Čurdinjaković est développeur dans notre équipe Toolset. Dans cette interview, Ivan nous raconte comment il a eu l’idée de résoudre un problème de longue date, à savoir travailler avec un mélange de contenu statique et dynamique dans WordPress.

Pouvez-vous expliquer le problème que vous vouliez résoudre à quelqu’un qui ne connaît pas WordPress ?

Bien sûr ! Comme chacun le sait, WordPress permet de créer et de gérer des sites. Il contient des informations par défaut pour vos pages, telles que le titre de la page, l’image vedette, les catégories, etc. Toolset, notre ensemble de plugins pour WordPress, vous permet d’ajouter toutes sortes d’informations personnalisées.

Par exemple, vous devez indiquer le prix d’un bien immobilier ? Pas de problème, ajoutez-la à l’aide de Toolset. Comme ces informations changent d’un poste à l’autre, on dit qu’elles sont dynamiques.

Mais ensuite, vous voulez afficher ces informations sur le front-end. Vous pouvez afficher ces données dynamiques dans des listes personnalisées d’articles, dans des modèles d’articles individuels, etc. Toolset vous permet de le faire facilement en utilisant des blocs dans l’éditeur par défaut de WordPress. Il vous suffit d’activer l’option d’affichage des informations dynamiques et de sélectionner le champ concerné.

Pour illustrer cette opération, voici une image qui montre comment vous pouvez afficher un titre dynamique dans votre liste personnalisée d’articles créée à l’aide de Toolset.

Utilisation de Toolset Dynamic Sources pour afficher le titre d’un article dans une liste personnalisée d’articles

L’obstacle majeur que nous rencontrions était que nos blocs pouvaient avoir un contenu statique (texte saisi par l’utilisateur) ou un contenu dynamique. Il n’y avait tout simplement pas de possibilité technique de mélanger facilement du texte statique et des champs dynamiques. Il s’agit d’un besoin courant pour les utilisateurs.

Par exemple, vous pourriez vouloir afficher la valeur du prix, qui est un nombre, mélangée à du texte.

Un exemple de mélange de contenu statique et de champs dynamiques

Nous avions des solutions de contournement et des solutions provisoires, mais elles étaient lourdes pour les utilisateurs et les programmeurs.

C’était donc une démangeaison que beaucoup d’entre nous voulaient assouvir d’une manière ou d’une autre.

Comment avez-vous abordé cette question ?

OK, cela devient un peu plus technique… :)

Il y a quelques mois, je vérifiais certains filtres relativement nouveaux que Gutenberg (alias l’éditeur de blocs de WordPress) a ajoutés à leur éditeur RichText. Il s’agit d’un composant qui permet d’écrire du texte richement formaté à l’intérieur de blocs. Ce qui a attiré mon attention, c’est que l’équipe Gutenberg a ajouté des formats plus complexes, comme Link, Inline Code et Inline Image, en plus des formats habituels, comme Bold, Italic et Underline.

J’ai immédiatement pensé qu’il serait possible de créer un format de champ en ligne personnalisé.

Mais après avoir consulté la documentation de l’API RichText, je me suis rendu compte que ce n’était pas très clair. Il était assez limité, et les fonctionnalités avancées qu’ils ont ajoutées étaient étroitement adaptées aux besoins de leurs formats (WordPress core). Vous pouvez ajouter un format à RichText, mais il n’y a aucun exemple d’une complexité proche de celle dont nous avions besoin pour nos champs en ligne.

Quand vous êtes-vous rendu compte que vous pouviez y arriver ?

Au début, je n’arrivais pas à savoir si c’était possible. Mais j’étais curieux et je l’ai expérimenté pendant mon temps libre. Il y a eu des obstacles, mais à un moment donné, je suis arrivé à un prototype prometteur.

C’était très excitant pour moi, et je devais partager la nouvelle avec quelqu’un, alors je l’ai montrée à mon chef d’équipe, Juan. Il a immédiatement vu le potentiel et m’a dit de continuer à travailler sur ce projet jusqu’à ce qu’il devienne un prototype fonctionnel, puis nous en ferons la démonstration à d’autres.

Peu de temps après, je disposais d’un prototype fonctionnel doté de toutes les fonctionnalités de base, et j’en ai fait la première démonstration à l’équipe Toolset. Quelques jours plus tard, je l’ai montré à l’ensemble de l’équipe lors d’une réunion hebdomadaire sur les outils. J’étais persuadé que mes collègues programmeurs allaient “comprendre”, mais j’ai été agréablement surpris de voir que tous les autres avaient immédiatement perçu le potentiel. J’ai également été étonné de voir que nos plans pour la toute prochaine version de Toolset ont été ajustés avec souplesse pour tenir compte de ma percée.

Comment l’avez-vous fait passer du stade de prototype à celui de dispositif pleinement opérationnel ?

Comme je l’ai mentionné, notre direction (Amir et Juan) a vu le grand potentiel et l’objectif de notre prochaine version a immédiatement été de le faire fonctionner. Au cours de ce cycle de développement, on m’a accordé tout le temps dont j’avais besoin pour travailler sur les champs en ligne. Et oui, il y a un long chemin entre un prototype et un produit fini.

Pour vous faire une idée du résultat, vous pouvez visionner cette courte vidéo :

Y a-t-il eu des surprises en cours de route ?

En fait, ce que j’ai créé comporte un avantage considérable. Comme il s’agit d’un plugin pour RichText, il fonctionne dans tous les blocs qui utilisent RichText, qu’il s’agisse d’un Toolset, du cœur de WordPress ou d’un bloc tiers.

Il se trouve qu’au même moment, mon coéquipier Konstantinos Galanakis travaillait sur l’ajout de la possibilité d’utiliser les sources dynamiques dans les blocs développés par d’autres auteurs. C’est une chose que nous voulions depuis un certain temps, mais nous n’avons pas pu convaincre les auteurs de blocs d’utiliser les versions précédentes de notre API parce qu’ils devaient ajouter du code à leurs blocs.

Konstantinos a développé une meilleure API qui ne nécessite (presque) aucune intervention dans le code des blocs tiers. Les champs Inline complètent parfaitement ce dispositif en ajoutant des sources dynamiques à d’autres endroits.

Comment les utilisateurs ont-ils réagi à la publication ?

La version 1.4 de Toolset Blocks est sortie, et mes Inline Fields étaient l’une des deux principales nouveautés. À en juger par les commentaires des utilisateurs, tout leur plaît. Nous avons même vu à quel point certains vloggers indépendants étaient stupéfaits par la sorcellerie de pointe que nous réalisons avec Toolset, tout cela dans le cadre de l’éditeur WordPress de base.

Une démangeaison qui a été bien comblée :-)

Venez travailler avec nous

Vous souhaitez travailler au sein d’une équipe répartie dans le monde entier qui encourage la croissance et l’avancement ? Êtes-vous prêt à exploiter le pouvoir de la technologie pour un avenir meilleur ?