Partie 8 — Gutenberg : blocs custom en React
Votre zone de confort. L’éditeur de blocs est une application React, et développer un bloc, c’est écrire des composants avec
edit/save, des attributs (props/état), des contrôles (Inspector, Toolbar), de la composition (InnerBlocks), et des stores (@wordpress/data). Cette partie exploite à fond votre expérience React : vous verrez que vous savez déjà 80 % de ce qu’il faut. On construit le bloc fil rouge « Livre à la une », branché sur le pluginwpr-books(Partie 7).
Version de référence : WordPress 6.x, @wordpress/scripts, React 18.
Sommaire
| Chapitre | Fichier | Contenu | Ce que vous saurez faire |
|---|---|---|---|
| 1 | Gutenberg pour un dev React | Le modèle mental : blocs = composants, @wordpress/*, JSX, différences avec React « classique ». | Traduire vos réflexes React en Gutenberg. |
| 2 | Scaffolding : @wordpress/scripts & block.json | create-block, structure, block.json, build, enqueue automatique. | Démarrer un bloc en une commande. |
| 3 | edit, save & attributs | Le composant edit, la fonction save, les attributes, useBlockProps. | Écrire un bloc statique complet. |
| 4 | Contrôles : Inspector & Toolbar | InspectorControls, BlockControls, @wordpress/components, RichText. | Offrir des réglages riches et ergonomiques. |
| 5 | Blocs dynamiques (render PHP) | render_callback/render.php, quand statique vs dynamique. | Rendre du contenu live côté serveur. |
| 6 | InnerBlocks & composition | Blocs imbriqués, templates, allowedBlocks, useInnerBlocksProps. | Créer des blocs conteneurs. |
| 7 | Les data stores (@wordpress/data) | useSelect/useDispatch, core, core/editor, useEntityProp. | Lire/écrire les données de WordPress depuis un bloc. |
| 8 | Variations, transforms & styles | Block variations, transforms, block styles, supports. | Enrichir et décliner un bloc. |
| 9 | Tutoriel : le bloc « Livre à la une » | Bloc dynamique branché sur wpr-books : sélection d’un livre, affichage ISBN/prix. | Livrer un bloc réel de bout en bout. |
Ce que vous retiendrez de cette partie
- Un bloc = un composant React avec
edit(rendu éditeur) etsave(ou un rendu PHP dynamique). @wordpress/scriptsfournit le build (JSX, dépendances, enqueue) — pas de config webpack à écrire.@wordpress/dataest un store global (façon Redux) qui expose toutes les données de WordPress à vos composants.- Votre expérience React est un avantage direct et rare sur ce terrain (Partie 13).
Retour à l’accueil · Chapitre suivant : Gutenberg pour un dev React.