Ajouter un bouton dans l’éditeur Gutenberg avec l’IA : copy post HTML

RÉPONSE DIRECTE : Pour ajouter un bouton dans l’éditeur Gutenberg, utilisez l’API registerPlugin() de WordPress avec les hooks enqueue_block_editor_assets côté PHP et les composants React côté JavaScript.

DÉFINITION RAPIDE : Un bouton personnalisé dans l’éditeur Gutenberg permet d’étendre les fonctionnalités natives de WordPress en ajoutant des outils spécifiques dans le panneau d’administration.

La semaine dernière, on a vu ensemble comment créer un block Gutenberg avec l’IA. Aujourd’hui, on reste dans le même délire React Gutenberg et vibe coding, mais cette fois on va voir comment ajouter facilement un bouton dans l’éditeur Gutenberg pour optimiser votre workflow de développement WordPress.

Table des matières

• Le problème des développeurs WordPress
• La solution Copy Post HTML
• Développement avec l’IA
• Implémentation technique
• Résultat final
• Questions fréquentes

Le Problème : cette galère qu’on connaît tous

La situation qu’on vit tous

Vous voyez le topo ? Vous venez de boucler un article et vous voulez le faire analyser par vos agents IA pour checker :

• Si ça se comprend bien
• Si c’est pas trop lourd à lire
• Si la longueur est correcte
• S’il y a pas trop de répétitions
• Si le SEO/GEO tient la route

Le cauchemar du copier-coller

Copier-coller chaque bout devient vite l’enfer. Mais le pire dans tout ça ? Vous n’avez pas le markup HTML (ou celui de Gutenberg), ce qui complique l’analyse par l’agent IA qui doit deviner la structure de votre contenu.

Au bout de trois fois à me taper cette corvée, mon cerveau a dit « stop ». Il devait forcément y avoir un moyen plus malin pour ajouter un bouton dans l’éditeur Gutenberg et automatiser cette tâche.

La solution : copy post HTML

C’est comme ça qu’est née la fonctionnalité « Copy Post HTML » – un simple bouton dans l’éditeur Gutenberg qui copie instantanément le contenu HTML complet avec les commentaires Gutenberg, plus le titre, direct dans le presse-papier.

Cette approche suit les bonnes pratiques WordPress officielles pour étendre l’éditeur Gutenberg.

Développement avec l’IA : on va droit au but

Contextualisation de l’agent

Pour cette fonctionnalité, l’agent IA m’a permis de taper directement au bon endroit sans me prendre la tête. Rapide et efficace, exactement comme on aime quand on veut ajouter un bouton dans l’éditeur Gutenberg. Clairement c’est le point important à ne jamais délaisser ! Fonce voir mon article sur l’intégration de l’IA dans votre workflow si tu ne sais pas de quoi je parle.

Voici exactement ce que j’ai balancé comme contexte :

@BlockCraft On va faire une fonctionnalité Gutenberg. Copy Post HTML l’idée est de rajouter une fonctionnalité dans les outils de l’éditeur pour copier le contenu HTML (avec les commentaires Gutenberg) ainsi que le titre dans le presse-papier.

Et comme mon agent est déjà configuré pour être expert Gutenberg -> inutile de repréciser les éléments. Ici je précise juste mon idée.

L’Intelligence de l’agent spécialisé

Même avec un agent spécialisé React et Gutenberg, il me sort d’abord la commande npx @wordpress/create-block par réflexe. Mais ce qui est cool, c’est qu’il me recommande ensuite une structure manuelle, bien plus adaptée à notre besoin d’ajouter un bouton personnalisé dans l’éditeur Gutenberg.

Point important : Expliquer clairement ce qu’on veut aide à orienter l’agent pour qu’il propose la solution la plus logique. Pas de mystère là-dedans.

Implémentation technique

La classe PHP : Singleton pattern

L’agent me propose une classe PHP bien propre utilisant le pattern Singleton ❤️. Ce pattern garantit qu’une classe ne sera instanciée qu’une seule fois dans toute l’application.

public static function get_instance() {
    if (null === self::$instance) {
        self::$instance = new self();
    }
    return self::$instance;
}

Difficile de dire non à une proposition pareille ! Cette approche suit les standards de développement WordPress recommandés.

Gestion des hooks : version agent vs version optimisée

Version proposée par l’agent :

private function __construct() {
    add_action('init', array($this, 'init'));
}

public function init() {
    if (is_admin()) {
        add_action('enqueue_block_editor_assets', array($this, 'enqueue_editor_assets'));
    }
}

Ma correction :

private function __construct() {
    add_action('enqueue_block_editor_assets', array($this, 'enqueue_editor_assets'));
}

public function enqueue_editor_assets() {
    // only admin
    if ( ! is_admin() ) {
        return;
    }
    // le reste du code
}

Pourquoi j’ai changé ça ?

On peut pas toujours avoir 100% de réussite sans rien faire ! L’agent proposait de chaîner les hooks (ce qui peut poser problème en fonction des priorités, qui débute avant qui ?), mais pour éviter les complications inutiles, j’ai simplifié en utilisant directement le hook enqueue_block_editor_assets afin d’éviter d’être dépendant du hook init.

Le is_admin() n’est pas forcement utile car le hook se charge uniquement côté admin mais une double vérification c’est mieux (surtout lorsqu’on va relire le code, c’est beaucoup plus clair).

JavaScript : la puissance WordPress native

L’agent me propose exactement ce dont j’ai besoin pour ajouter un bouton dans l’éditeur Gutenberg :

( function( wp ) {
    // Code encapsulé
} )( window.wp );

Pourquoi c’est malin cette approche :

1. On utilise les APIs WordPress natives
2. Pas besoin de node_modules supplémentaires
3. Encapsulation pour éviter les conflits

Mais si on veut respecter la documentation 100%, on doit corriger :

( function ( wp, React ) {
  // code ici
} )( window.wp, window.React );

Je corrige le code histoire de respecter la doc.

Éléments utilisées :

select( 'core/editor' ).getEditedPostAttribute( 'title' );
select( 'core/editor' ).getEditedPostContent();
wp.data.dispatch( 'core/notices' );
registerPlugin();

Ici, j’ai rien touché. L’agent a visé juste du premier coup.

CSS : confiance totale

Pour le CSS, j’ai fait confiance à 100% à l’agent. Il connaît les standards WordPress et propose toujours du code propre et cohérent. (et je ferais pas mieux 😁​)

Résultat : mission accomplie

Et voilà ! C’était rapide, on a déjà terminé.

Fonctionnalité opérationnelle

Maintenant, on peut copier rapidement le contenu complet + titre et le donner directement à un agent expert SEO/GEO pour analyse.

L’avantage des commentaires gutenberg

L’intérêt de garder les commentaires Gutenberg est crucial : ils permettent à l’agent d’analyser et de savoir le type de tag HTML utilisé, donnant ainsi du contexte précieux qui améliore considérablement la pertinence des conseils.

Conclusion

Cette fonctionnalité illustre parfaitement comment le vibe coding peut transformer une tâche répétitive en solution automatisée en quelques minutes. Savoir ajouter un bouton dans l’éditeur Gutenberg ouvre de nombreuses possibilités pour personnaliser votre workflow WordPress.

L’IA ne remplace pas le développeur, elle le libère des tâches chronophages pour qu’il se concentre sur l’essentiel : résoudre des problèmes concrets.