Compétences GenerateBlocks
Documentation de compétences et ressources de développement optimisées pour LLM pour le plugin WordPress GenerateBlocks.
Vérifié à partir du code source pour GenerateBlocks gratuit 2.3 et GB Pro 2.6 (Juin 2026). Chaque schéma de bloc, ordre d'attributs et balise dynamique dans ces compétences a été vérifié par rapport au code source du plugin dans ce dépôt — pas de données mémorisées.
Ce que les compétences peuvent construire
- Sections statiques — héros, tarifs, cartes, FAQ, CTA, pages d'atterrissage complètes
- Contenu dynamique — boucles de requêtes (grilles de blog, articles connexes, archives), 27 balises dynamiques avec syntaxe exacte
- Champs personnalisés — champs ACF texte/image/lien/groupe, boucles de répéteur, pages d'options, méta-requêtes
- Animations — micro-interactions au survol, entrées par image clé, défilement CSS, gardes de mouvement réduit
- Conditions — conditions de bloc/menu GB Pro, conditions de champ de formulaire, alternatives pour le plugin gratuit
- Blocs GB Pro — accordéon, onglets, carrousel, navigation, en-tête de site, superpositions/méga-menus, le système de formulaires de la version 2.6
- Modèles de site complet — Éléments GeneratePress (modèles de boucle, héros de page, crochets, règles d'affichage), thèmes FSE
Installation rapide
Installez les compétences pour votre assistant de codage IA avec une seule commande :
git clone https://github.com/wpgaurav/generateblocks-skills.git
cd generateblocks-skills
chmod +x install.sh
./install.sh
Ceci lance un installateur interactif qui configure les compétences pour vos outils préférés.
Outils pris en charge
| Outil | Emplacement d'installation | Format |
|---|---|---|
| Claude Code | ~/.claude/skills/ | Répertoires de compétences |
| Cursor | ~/.cursor/skills/ | Répertoires de compétences |
| Windsurf | ~/.windsurf/rules/ | Markdown combiné |
| OpenAI Codex CLI | ~/.codex/instructions.md | Markdown combiné |
| Gemini CLI | GEMINI.md (racine du projet) | Markdown combiné |
| GitHub Copilot | .github/copilot-instructions.md | Markdown combiné |
| Cline / Roo Code | .clinerules (racine du projet) | Markdown combiné |
| Aider | CONVENTIONS.md (racine du projet) | Markdown combiné |
Options d'installation
./install.sh # Mode interactif (choisir les outils)
./install.sh --all # Installer pour tous les outils
./install.sh claude # Claude Code uniquement
./install.sh cursor codex # Plusieurs outils à la fois
./install.sh --help # Afficher l'aide
Alternative : Configuration manuelle
Si vous préférez ne pas utiliser l'installateur, vous avez deux options :
Option A : Télécharger un fichier de compétence
Téléchargez un fichier .skill et importez-le au début d'une nouvelle conversation dans Claude.ai, ChatGPT, Gemini, ou tout autre assistant IA.
| Compétence | Téléchargement |
|---|---|
| Mises en page GenerateBlocks | .skill |
| HTML vers GenerateBlocks | .skill |
| Elementor vers GenerateBlocks | .skill |
| Figma vers GenerateBlocks | .skill |
Option B : Pointer votre IA vers le fichier de compétence
Avec Claude Code, Cursor ou Windsurf, référencez simplement la compétence directement :
Lisez skills/generateblocks-layouts/SKILL.md et créez un carrousel de témoignages avec 3 cartes
Liens directs vers les fichiers de compétence :
skills/generateblocks-layouts/SKILL.mdskills/html-to-generateblocks/SKILL.mdskills/elementor-to-generateblocks/SKILL.mdskills/figma-to-generateblocks/SKILL.md
Exemples copier-coller
Parcourez le dossier examples/ pour 38 modèles prêts à l'emploi répartis dans 14 types de sections :
| Section | Description |
|---|---|
| Section Héros | Barre de statistiques, doubles CTA (5 variantes) |
| Tableau de Tarifs | 3 niveaux avec badge "Populaire" |
| Grille de Cartes | Articles de blog, portfolio |
| Liste de Fonctionnalités | 6 fonctionnalités avec icônes |
| Section FAQ | Q&R numérotée, deux colonnes |
| Témoignages | Citations, avatars, étoiles |
| CTA Fixe | Bannière sombre, doubles boutons |
| Grille d'Articles | Article à la une + petits articles |
| Section Statistiques | 4 métriques sur fond sombre |
| Grille de Services | Mise en page Bento |
| Carrousel de Logos | Logos clients/partenaires |
| Grille d'Équipe | Cartes des membres de l'équipe |
| Chronologie | Chronologie verticale |
| Tableau Comparatif | Comparaison de fonctionnalités |
Chaque dossier contient plusieurs variantes ainsi que le prompt qui les a générées. Une grille de blog dynamique complète avec boucle de requête se trouve à skills/generateblocks-layouts/examples/layouts/query-blog-grid.html.
Bonus : Consultez examples/from-gauravtiwari-org/ pour des sections du monde réel exportées depuis des sites en production.
Utilisation des exemples
- Ouvrez n'importe quel dossier
examples/ - Copiez le contenu du fichier
output-*.html - Dans WordPress, ouvrez votre page/article
- Passez à l'éditeur de code (menu trois points > Éditeur de code)
- Collez les blocs
- Revenez à l'éditeur visuel
Contenu inclus
generateblocks-skills/
├── install.sh # Installateur de compétences multi-outils
├── CLAUDE.md # Instructions de projet Claude Code
├── AGENTS.md # Instructions LLM universelles
├── skills/ # Fichiers sources des compétences
│ ├── generateblocks-layouts/
│ │ ├── SKILL.md # Point d'entrée principal (léger — profondeur dans references/)
│ │ ├── references/ # 23 fichiers de référence (voir carte ci-dessous)
│ │ └── examples/ # Exemples de base, composés, mises en page, SVG
│ ├── html-to-generateblocks/
│ ├── elementor-to-generateblocks/
│ └── figma-to-generateblocks/
├── importable/ # Fichiers .skill et .zip pour téléchargement
├── examples/ # 38 exemples en or répartis dans 14 sections
├── generateblocks/ # Code source du plugin (2.3.0-rc) pour référence
└── generateblocks-pro/ # Code source du plugin Pro (2.6.0-rc) pour référence
Compétences
| Compétence | Objectif |
|---|---|
| Mises en page GenerateBlocks | Construire tout avec GB V2 : sections statiques, boucles de requêtes, balises dynamiques, données ACF, animations, conditions, formulaires Pro/blocs interactifs, modèles de site complet |
| HTML vers GenerateBlocks | Convertir du HTML/CSS en balisage de blocs GenerateBlocks |
| Elementor vers GenerateBlocks | Migrer les mises en page Elementor vers des blocs GB propres |
| Figma vers GenerateBlocks | Convertir des designs Figma en blocs GB |
Carte de référence (generateblocks-layouts/references/)
| Fichier | Couvre |
|---|---|
_index.md | Routeur de tâches — quel fichier charger pour quel travail |
recovery-rules.md | Toutes les causes connues des erreurs "Attempt Recovery" + correctifs exacts |
field-notes.md | Leçons de conversion réelles : workflow d'échappement, scripts de validation |
block-types.md | Schémas d'attributs vérifiés pour les blocs Élément/Texte/Média/Forme |
dynamic-tags.md | Catalogue canonique des 27 balises dynamiques + syntaxe exacte |
query-block.md | Bloc de requête/Looper/Loop-Item + extensions de requête Pro |
acf-and-custom-fields.md | Champs ACF, boucles de répéteur, pages d'options, Meta Box |
conditions.md | Conditions de bloc/menu/formulaire Pro + alternatives gratuites |
template-authoring.md | Sites complets : Éléments GeneratePress, FSE, modèles d'archive |
animations.md | Animation au survol, par image clé, pilotée par le défilement, mouvement réduit |
gb-pro.md | Carte des fonctionnalités Pro (28 blocs, classes globales, chronologie des versions) |
pro-forms.md | Formulaires Pro 2.6 : champs, validation, intégrations ESP, Turnstile |
pro-interactive.md | Accordéon, Onglets, Carrousel, Navigation, En-tête de site, Superpositions |
css-patterns.md · svg-icons.md · responsive.md | Modèles de style |
global-styles.md · patterns.md · performance.md · migrations.md · troubleshooting.md | Guides de support |
Formats importables
Le dossier importable/ contient deux formats pour chaque compétence :
.skill— Télécharger dans n'importe quel chat IA (Claude.ai, ChatGPT, Gemini).zip— Compresse la compétence avec les références incluses
Référence rapide GenerateBlocks V2
Quatre blocs principaux plus la famille de requêtes :
generateblocks/element → Conteneurs (div, section, nav, figure, a, ul/ol/li, dl/dt/dd)
generateblocks/text → Texte (h1-h6, p, span, div, a, button, figcaption, li)
generateblocks/media → Images (img uniquement — statique et dynamique)
generateblocks/shape → Icônes SVG
generateblocks/query → Listes dynamiques (+ looper, loop-item, query-no-results, query-page-numbers)
Les règles les plus importantes :
- Utilisez
generateblocks/element(PAS/container),generateblocks/text(PAS/headlineou/button) htmlAttributesest un objet simple ({"href":"https://exemple.com/a-propos/"}) — jamais un tableau- Liens : élément
<a>contenant un enfantspande texte. Le texte<a>supprime son href lors de l'enregistrement ; l'élément<a>avec du texte brut déclenche une récupération - L'ordre des attributs JSON suit l'ordre de déclaration
block.jsonde chaque bloc,classNameen dernier - La chaîne
cssest sur une seule ligne, minifiée, alphabétisée — les états de survol vivent dans l'objetstyles
Format de bloc (Option A — le plugin injecte automatiquement l'id-class) :
<!-- wp:generateblocks/element {"uniqueId":"hero001","tagName":"section","styles":{...},"css":"...","className":"gb-element"} -->
<section class="gb-element-hero001 gb-element">
<!-- contenu -->
</section>
<!-- /wp:generateblocks/element -->
Balises dynamiques — espace après le nom de la balise, options séparées par des pipes, pas de guillemets :
{{post_title link:post}}
{{post_permalink}}
{{featured_image size:large}}
{{post_excerpt length:25}}
{{post_date dateFormat:M j, Y}}
{{term_list tax:category|sep:, }}
{{post_meta key:mon_champ_acf}}
{{post_meta key:repeater.0.subfield}}
{{post_url}}, {{featured_image_url}}, {{post_terms}}, {{acf}}, et toute forme key="avec_guillemets" n'existent pas — ils s'enregistrent correctement mais s'affichent sous forme de texte littéral. Le catalogue complet se trouve dans references/dynamic-tags.md.
Exemples de prompts
"Crée une section héros avec titre, sous-titre, deux boutons CTA et une barre de 4 statistiques"
"Construis un tableau de tarifs à 3 colonnes avec un niveau central mis en évidence"
"Construis une section d'articles connexes : 3 articles de la même catégorie, article actuel exclu"
"Boucle sur mon répéteur ACF team_members pour créer une grille d'équipe à 3 colonnes"
"Construis un modèle de boucle d'archive pour les Éléments GeneratePress qui hérite de la requête"
"Ajoute une animation de révélation au défilement à cette section avec un repli pour mouvement réduit"
"Convertis ce HTML en GenerateBlocks : [collez le HTML]"
Limitations
- Pas d'URLs externes — Fournissez du HTML, des captures d'écran ou des descriptions
- Pas de JavaScript personnalisé — Les interactions sont uniquement CSS, plus les blocs JS intégrés de GB Pro (accordéon, onglets, carrousel, superpositions, pagination instantanée)
- Images de substitution — Remplacez par des images réelles après la génération
- Inférence de survol — Les états interactifs sont déduits des designs statiques
- Paramètres gérés par l'interface — Les règles de condition, actions de formulaire, déclencheurs de superposition et règles d'affichage sont configurés dans wp-admin, pas dans le balisage des blocs ; les compétences listent ces étapes comme manuelles
- Fonctionnalités Pro 2.6 / gratuit 2.3 (Formulaires, Mode CSS) sont en version bêta en juin 2026 — les sites sur versions stables ne les auront pas encore
Développement
cd generateblocks
npm run build # Build de production
npm run start # Mode surveillance
npm run test:unit # Tests unitaires Jest
npm run test:e2e # Tests E2E Playwright
npm run wp-env:start # WordPress local
Autres LLMs
Pour les assistants autres que Claude (GPT, Gemini, etc.), consultez AGENTS.md pour des instructions universelles — ou exécutez simplement ./install.sh pour configurer votre outil automatiquement.
Licence
- Code source du plugin : GPL-2.0-or-later
- Documentation de la compétence : MIT