Créer un block Gutenberg avec l’IA : le guide pratique du vibe coding

RÉPONSE DIRECTE : Créer un block Gutenberg avec l’IA permet de développer un block WordPress fonctionnel en moins de 10 minutes grâce à un agent IA bien configuré et la commande

npx @wordpress/create-block

DÉFINITION RAPIDE : Un block Gutenberg est un composant réutilisable de l’éditeur WordPress qui permet d’ajouter du contenu personnalisé. Avec l’IA, le processus de création devient accessible même aux développeurs moins expérimentés avec React.

Table des matières

• Préparer votre agent IA pour créer un block Gutenberg
• Initialisation avec WordPress
• Développement collaboratif avec l’IA
• Stratégies de styling
• Résultats concrets
• Questions fréquentes

Alors, développer des blocks Gutenberg, ça peut vite devenir un casse-tête, surtout quand on vient du bon vieux PHP. React, JavaScript, toutes ces nouvelles syntaxes… on se retrouve parfois un peu perdus, pas vrai ?

Mais bon, et si je te disais qu’avec un agent IA bien configuré, tu peux créer un block Gutenberg avec l’IA en moins de 10 minutes ? Ouais, tu as bien lu. C’est exactement ce qu’on va voir ensemble.

Préparer votre agent IA pour créer un block Gutenberg : la clé du succès

La contextualisation, votre meilleur atout

Avant de se lancer tête baissée dans le code, il faut transformer ton IA en véritable expert Gutenberg. Voici ce qui va faire la différence :

1. Documentation officielle : Balance-lui la doc WordPress officielle
2. Accès internet : Active cette fonctionnalité pour qu’il puisse aller chercher les ressources en temps réel
3. Tes préférences : Explique-lui ta structure de travail, tes conventions de nommage, ta façon de procéder

💡 Conseil d’expert : Un agent IA sans direction, c’est comme un GPS sans destination. Pour éviter les erreurs qui font mal, va jeter un œil à mon guide sur l’intégration de l’IA dans votre workflow.

Initialisation : WordPress fait le travail lourd

La commande magique pour créer un block Gutenberg

npx @wordpress/create-block bloc-chiffres-cles --variant dynamic

Cette petite commande, exécutée dans wp-content/plugins, elle génère une structure complète et fonctionnelle (avec render.php : –variant dynamic). Le résultat ? Un plugin qu’on peut activer immédiatement, sans aucune erreur.

Pourquoi cette approche fonctionne

• Structure standardisée : On respecte les conventions WordPress
• Render.php inclus : Ça facilite la gestion côté serveur
• Zéro configuration : Tout fonctionne out-of-the-box

Selon W3Techs.com, plus de 60% des sites web utilisent WordPress, rendant cette compétence particulièrement précieuse.

Développement collaboratif avec l’IA

Définir les spécifications

Ton agent a besoin de clarté. Pour notre block « chiffres clés », on va définir ensemble :

• Titre du chiffre
• Valeur numérique
• Unité de mesure
• Description optionnelle

Le processus étape par étape

1. block.json : L’agent génère les attributs nécessaires
2. edit.js : Configuration complète avec TextControl dans le panneau de contrôle
3. render.php : Affichage des attributs avec gestion des valeurs par défaut
4. Styles CSS : Séparation editor.scss et style.scss

Stratégies de styling : deux approches

Approche thème-specific

Tu utilises les classes CSS de ton thème existant dans le render.php. L’avantage ? Une intégration parfaite avec ton design.

Approche universelle

Tu crées un style minimal qui s’adapte à tous les thèmes. Parfait pour les plugins qu’on distribue.

Résultats concrets

Ce que tu obtiens en créant un block Gutenberg avec l’IA

• Code 100% valide : Aucune correction manuelle nécessaire

import { __ } from '@wordpress/i18n';
import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl, TextareaControl } from '@wordpress/components';
import './editor.scss';

export default function Edit({ attributes, setAttributes }) {
	const { titre, valeur, suffixe, description } = attributes;

	const onChangeTitre = (newTitre) => {
		setAttributes({ titre: newTitre });
	};

	const onChangeValeur = (newValeur) => {
		setAttributes({ valeur: newValeur });
	};

	const onChangeSuffixe = (newSuffixe) => {
		setAttributes({ suffixe: newSuffixe });
	};

	const onChangeDescription = (newDescription) => {
		setAttributes({ description: newDescription });
	};

	return (
		<>
			<InspectorControls>
				<PanelBody title={__('Paramètres du chiffre clé', 'bloc-chiffres-cles')}>
					<TextControl
						label={__('Titre', 'bloc-chiffres-cles')}
						value={titre}
						onChange={onChangeTitre}
						placeholder="Ex: Clients satisfaits"
					/>
					<TextControl
						label={__('Valeur', 'bloc-chiffres-cles')}
						value={valeur}
						onChange={onChangeValeur}
						placeholder="Ex: 1250"
					/>
					<TextControl
						label={__('Suffixe/Unité', 'bloc-chiffres-cles')}
						value={suffixe}
						onChange={onChangeSuffixe}
						placeholder="Ex: +, %, €"
					/>
					<TextareaControl
						label={__('Description', 'bloc-chiffres-cles')}
						value={description}
						onChange={onChangeDescription}
						placeholder="Ex: Depuis notre création"
					/>
				</PanelBody>
			</InspectorControls>

			<div {...useBlockProps()}>
				<div className="bloc-chiffres-cles-preview">
					<div className="chiffre-cle-item">
						<h3 className="chiffre-titre">{titre}</h3>
						<div className="chiffre-valeur">
							<span className="valeur">{valeur}</span>
							<span className="suffixe">{suffixe}</span>
						</div>
						<p className="chiffre-description">{description}</p>
					</div>
				</div>
			</div>
		</>
	);
}

• Sécurité respectée : Fonctions d’échappement (esc_html) correctement implémentées

<div <?php echo $wrapper_attributes; ?>>
    <div class="chiffre-cle-item">
        <h3 class="chiffre-titre"><?php echo esc_html($titre); ?></h3>
        
        <div class="chiffre-valeur">
            <span class="valeur"><?php echo esc_html($valeur); ?></span>
            <?php if (!empty($suffixe)) : ?>
                <span class="suffixe"><?php echo esc_html($suffixe); ?></span>
            <?php endif; ?>
        </div>
        
        <?php if (!empty($description)) : ?>
            <p class="chiffre-description"><?php echo esc_html($description); ?></p>
        <?php endif; ?>
    </div>
</div>

• Standards WordPress : Utilisation de wp-scripts
• Temps de développement : Moins de 10 minutes

Build final

Et voilà ! Ton block est prêt à être utilisé.

Conclusion : l’évolution, pas la révolution

Ce block peut sembler simple (il est brut, aucun traitement, full IA complet), mais il illustre parfaitement le potentiel du vibe coding. Un agent IA bien guidé devient un partenaire de développement redoutable pour créer un block Gutenberg avec l’IA.

Pour creuser cette approche, je te recommande mon article sur le vibe coding qui explore cette évolution du métier de développeur.

Prochaine étape : Dans un prochain article, on va monter le niveau avec des blocks plus complexes pour convaincre les plus sceptiques !