Voilà, c’est fait. Blockshifter, mon premier plugin, est publié sur le répertoire officiel WordPress ! Et oui, je suis assez fier de le dire.

L’idée me trotte dans la tête depuis plusieurs mois, suite à mon expérience chez Foyer et mes projets actuels chez Concept Factory. À un moment, j’ai arrêté de la laisser traîner et je me suis mis à coder.

Concrètement, tout s’est fait en quelques jours, pendant mes vacances, avec un agent IA en support sur une bonne partie du code. Je préfère le dire clairement plutôt que de laisser croire à je ne sais quel mythe du développeur solitaire qui code tout à la main pendant des mois… Ce n’est pas comme ça que ça s’est passé, et ça fait partie de ma façon de travailler aujourd’hui.

Le problème que je voulais régler

Vous avez une Galerie ou un Groupe de blocs Gutenberg, et l’affichage natif ne suffit pas. Vous voulez un carousel, un accordéon, etc. Du coup vous installez un plugin qui rajoute encore un nouveau bloc, avec sa propre syntaxe, ses propres réglages, souvent lourd, parfois abandonné et qui casse le jour où vous changez de thème.

J’en avais marre de ce pattern. Alors j’ai fait l’inverse.

Même bloc, autre forme

Blockshifter n’ajoute aucun nouveau bloc. Il fait une seule chose : il change l’affichage front-end d’un bloc « core » que vous utilisez déjà sans toucher à son contenu ni à sa structure.

Dans la pratique :

1. Vous sélectionnez un bloc Galerie ou Groupe, comme d’habitude.
2. Un nouveau panneau apparaît dans l’Inspector.
3. Vous activez le mode d’affichage souhaité (uniquement Carousel pour le moment).
4. Le bloc reste 100 % natif et éditable, mais son rendu change complètement.

Pas de nouveau bloc à apprendre, pas de shortcode. Un interrupteur, c’est tout.

Et si un jour vous désactivez le plugin, votre Galerie ou votre Groupe s’affiche juste… normalement. Rien ne casse, rien ne reste bloqué dans un format propriétaire.

Ce qu’il y a dedans

Un seul module pour l’instant : Carousel, sur les blocs Galerie et Groupe. Il s’appuie sur Splide.js — léger, accessible, sans dépendances qui traînent.

• Nombre de slides visibles
• Lecture automatique
• Boucle infinie
• Responsive, navigable au clavier, lecteur d’écran compatible

Pourquoi c’est en 0.1.0

Le plugin fonctionne, il est publié, vous pouvez l’installer maintenant. Mais je ne le considère pas comme un produit fini, d’où le 0.1.0. C’est un premier module qui marche, pas une boîte à outils complète. Accordion, Masonry et d’autres modes d’affichage sont dans un coin de ma tête, avec la même logique à chaque fois : un bloc connu, un interrupteur, un rendu différent.

D’ailleurs, pour Masonry, la réflexion a déjà abouti à une spec complète sur GitHub (grille CSS Grid à hauteurs variables, sans lib tierce). C’est un agent IA qui va s’en charger, dans la continuité de ce que je disais plus haut sur ma façon de travailler aujourd’hui. Objectif : un module fonctionnel dans les prochains jours.

Ça avancera au rythme où ça avancera. Pas de roadmap gravée dans le marbre, juste l’idée de continuer à construire dessus.

L’installer

C’est gratuit, open source, disponible dès maintenant :

wordpress.org/plugins/blockshifter

1. Extensions > Ajouter, cherchez « Blockshifter », installez, activez.
2. Sélectionnez un bloc Galerie ou Groupe.
3. Activez le panneau Blockshifter Carousel dans l’Inspector.

Rien d’autre à configurer.

Le code est ouvert

Tout est développé en public sur GitHub. Si vous testez le plugin et que quelque chose vous gêne, ou que vous avez une idée de module à prioriser, je suis preneur.

Et si vous laissez une review sur le répertoire WordPress.org, ça aide vraiment — visibilité du plugin, et un petit coup de pouce pour un premier projet.

Ça fait deux semaines que j’utilise Windsurf pour développer un plugin WordPress.
Le principe ? Ajouter des options sur les blocs Gutenberg natifs (en React/JSX), et gérer des Custom Post Types proprement.

Rien de dingue sur le papier.
Mais en vrai, c’est le genre de projet où tu te retrouves vite avec du code front mélangé au code métier, des fichiers qui grossissent, et un moment où tu te demandes « mais pourquoi j’ai foutu ça là ? ».

Avant, j’aurais passé une journée entière à refactoriser pour que ce soit propre.
Là, j’ai tenté de faire équipe avec l’IA.

Spoiler : c’est ni parfait, ni magique. Mais franchement, c’est troublant.

Le moment où j’ai compris que c’était différent

Au début, je lui ai juste balancé :

« J’ai du code pour étendre des blocs Gutenberg. Aide-moi à séparer proprement le front-end de la logique métier. »

Windsurf ne m’a pas juste craché trois suggestions de fonctions.
Il a réorganisé des fichiers.
Il a créé des dossiers, proposé une archi, déplacé du code React d’un côté, les enregistrements de CPT de l’autre.

Pas parfait, hein. Mais cohérent.

Et moi, pendant ce temps, je ne codais presque pas.
Je lisais, je validais, je virais ce qui ne me plaisait pas.

C’est là que j’ai senti le truc : je n’étais plus vraiment en train de « coder ».
J’étais en train de piloter.

Font Awesome sur les boutons : ou comment j’ai réécrit mes prompts 15 fois

Le truc qui m’a le plus pris la tête, c’est l’ajout d’icônes Font Awesome sur les blocs core/button.

Sur le papier, c’est simple :
tu rajoutes un control dans le panneau Gutenberg, tu laisses l’utilisateur choisir une icône, tu l’affiches côté front avec la bonne classe Font Awesome.

Dans la réalité ?
Windsurf m’a sorti :

• Des contrôles Gutenberg qui ne compilaient pas.
• Des attributs qui disparaissaient au save/reload.
• Du JSX bancal avec des icônes qui se dupliquaient ou qui partaient dans le mauvais sens.
• Une fois, il m’a même proposé d’importer tout Font Awesome en JS côté éditeur (merci, mais non).

Le problème, c’est que je lui demandais des trucs trop vagues.
Genre :

« Ajoute une option pour choisir une icône Font Awesome. »

Résultat : il partait dans tous les sens.

J’ai dû affiner. Beaucoup.
Jusqu’à arriver à des prompts du style :

« Ajoute un SelectControl dans InspectorControls pour choisir parmi 5 icônes Font Awesome.
L’attribut doit s’appeler faIcon, de type string.
L’icône doit s’afficher avant le texte du bouton, côté front uniquement, avec la classe fa-solid fa-{nomIcone}. »

Là, ça commençait à tourner.

Mais j’ai quand même dû tout recommencer à zéro une fois, parce qu’il m’avait généré une logique tellement tordue que je ne m’y retrouvais plus.

Ce que j’ai appris : parler à une IA, c’est un métier

Ce qui m’a le plus marqué, c’est à quel point la façon dont tu poses la question change tout.

Si tu dis :
« Fais-moi un truc pour gérer des icônes »,
tu obtiens du code générique, verbeux, à moitié cassé.

Si tu dis :
« Crée un attribut faIcon de type string, ajoute un SelectControl avec 5 options fixes, affiche l’icône en <i> avec la classe correspondante dans le RichText »,
là, ça roule.

Et ça, pour moi, c’est nouveau.
Avant, coder, c’était : je sais ce que je veux, je le tape.
Maintenant, c’est : je sais ce que je veux, j’apprends à le formuler pour qu’une IA le fasse.

C’est presque un exercice de specs en temps réel.
Et franchement, ça m’a forcé à être plus clair dans ma tête sur ce que je voulais vraiment.

La structure du plugin : là où l’IA m’a vraiment aidé

Ce qui est cool, c’est que Windsurf m’a aidé à mettre en place une archi propre dès le début.

Avant, j’aurais fait un gros index.php, un dossier assets, et je me serais dit « je rangerai plus tard ».
Jamais fait, évidemment.

Là, il m’a proposé direct :

• Un dossier src/blocks pour tout le code React/JSX qui étend les blocs Gutenberg.
• Un dossier includes pour les CPT et la logique métier.
• Un build propre avec webpack (enfin… plus ou moins propre, j’ai dû ajuster).
• Une séparation claire entre ce qui tourne côté éditeur et ce qui se charge côté front.

C’est pas révolutionnaire.
Mais c’est exactement ce que j’aurais dû faire depuis le début, et que je faisais jamais par flemme.

L’IA m’a forcé à être structuré dès le départ, parce qu’elle avait besoin de comprendre où mettre les fichiers.

Et résultat : mon code est plus maintenable. Plus facile à relire. Moins bordélique.

Les moments de frustration (parce qu’il y en a)

Je ne vais pas mentir : il y a eu des phases où j’ai eu envie de tout fermer et de retourner coder comme avant.

Genre :

• Quand l’IA me modifiait 4 fichiers alors que je lui avais demandé d’en toucher qu’un.
• Quand elle « corrigeait » du JSX qui marchait très bien, merci.
• Quand elle m’inventait des hooks React qui n’existent pas, et que je perdais 20 minutes à comprendre pourquoi ça plantait.

Il y a aussi ce moment bizarre où tu te rends compte que tu lis plus de code que tu n’en écris.
Et parfois, ça frustre.
Parce que coder, c’est pas juste produire du code. C’est aussi réfléchir, tâtonner, trouver des solutions.

Avec l’IA, tu sautes une partie de ce process.
Des fois c’est génial.
Des fois, tu te sens un peu… spectateur.

Ce que je retiens après deux semaines

Windsurf, c’est un outil de structure avant tout.
Il te force à penser ton projet proprement, parce qu’il a besoin de comprendre où il met les pieds.

C’est aussi un amplificateur de clarté mentale.
Si tu ne sais pas vraiment ce que tu veux, il va partir en vrille.
Si tu es clair, il va vite.

Mais ça reste un assistant, pas un dev.
Tu ne peux pas lui laisser la main sur tout.
Surtout si tu fais du React/JSX un peu poussé, ou si tu touches à des trucs sensibles (attributs Gutenberg, save/edit, etc.).

Le truc à retenir ?
L’IA produit le squelette. Toi, tu mets la chair.

Et franchement, pour l’instant, ça me va bien comme ça.

Et toi, t’en es où ?

Je suis curieux de savoir si d’autres devs WordPress ont testé ce genre d’outils sur des projets Gutenberg.
Parce que franchement, entre le JSX, les attributs, le save vs edit, et tout le bordel de la compilation… c’est pas toujours évident de savoir ce qu’on peut déléguer à l’IA et ce qu’il vaut mieux garder sous contrôle.

Si t’as des retours d’expérience, des prompts qui marchent bien (ou qui partent complètement en couille), ou juste une opinion tranchée sur le fait de coder avec une IA, balance-moi ça.

Parce qu’au fond, on est tous un peu en train d’apprendre ensemble comment bosser avec ces trucs-là.
Et autant partager les galères, non ?