Formation Wordpress Création de blocs Gutenberg custom (ACF / blocks natifs)

Programme détaillé

8 modules, construits autour de vos cas réels.

Durée recommandée ≈ 21 à 35 heures, modulable selon le rythme du groupe et vos contraintes intra-entreprise.

1. 01Comprendre l'écosystème Gutenberg et la logique des blocs custom

   Chapitres

   • Situer la place de Gutenberg dans l'architecture moderne de WordPress et son évolution vers le Full Site Editing.
   • Comprendre le fonctionnement de l'éditeur par blocs côté administration et côté rendu front.
   • Distinguer blocs natifs, blocs dynamiques, patterns, templates et compositions réutilisables.
   • Analyser les cas d'usage qui justifient la création d'un bloc personnalisé plutôt qu'un bloc existant.
   • Comparer les deux approches de développement : ACF Blocks et API natives de Gutenberg.
2. 02Préparer l'environnement de développement pour des blocs sur mesure

   Chapitres

   • Structurer un environnement WordPress local adapté au développement et aux tests de blocs.
   • Identifier les prérequis techniques : thème, thème enfant, extensions, version de WordPress et organisation du code.
   • Comprendre les hooks et mécanismes nécessaires à l'enregistrement d'un bloc custom.
   • Mettre en place une arborescence claire pour centraliser blocs, assets, styles et scripts.
   • Appliquer une convention de nommage cohérente pour les blocs, champs, classes et composants.
   • Configurer les outils de build et de compilation des assets côté éditeur et côté front.
3. 03Créer des blocs Gutenberg custom avec ACF

   Chapitres

   • Comprendre le principe des blocs ACF et leur intérêt dans des contextes de production rapides.
   • Déclarer un bloc ACF avec ses paramètres : nom, catégorie, icône, mots-clés, supports et mode d'aperçu.
   • Concevoir des groupes de champs adaptés à des usages éditoriaux clairs et robustes.
   • Exploiter les types de champs ACF pour structurer le contenu, les variantes d'affichage et les options.
   • Produire le rendu d'un bloc en PHP via un template dédié, dans une logique propre et réutilisable.
   • Mettre en application sur des blocs éditoriaux courants : texte enrichi, média, appel à l'action, grille de contenus.
4. 04Développer des blocs Gutenberg avec les API natives de WordPress

   Chapitres

   • Comprendre les principes du développement natif de blocs avec les API Gutenberg et React.
   • Identifier le rôle de block.json, des scripts d'édition, des styles et des métadonnées du bloc.
   • Créer un bloc simple en distinguant attributs, fonction edit et fonction save ou rendu dynamique.
   • Structurer l'interface d'édition avec les composants standards du package block-editor.
   • Gérer les contrôles de l'inspecteur latéral, la toolbar et les options d'affichage avancées.
   • Comparer avantages, limites et contextes d'usage du développement natif face à ACF Blocks.
5. 05Concevoir une expérience éditeur claire et robuste

   Chapitres

   • Définir des interfaces de saisie compréhensibles par des contributeurs non techniques.
   • Organiser champs, libellés, aides contextuelles et valeurs par défaut pour limiter les erreurs.
   • Prévoir les états vides, les contraintes de saisie et les comportements de secours.
   • Encadrer les possibilités de personnalisation sans fragiliser la cohérence graphique du site.
6. 06Gérer le rendu, le style et l'intégration front-end des blocs

   Chapitres

   • Relier les blocs custom au thème, aux styles globaux et au fichier theme.json du site.
   • Structurer le HTML et les classes CSS dans une logique modulaire et évolutive.
   • Gérer les styles spécifiques à l'éditeur et au front pour garantir un rendu cohérent.
   • Prendre en compte responsive, alignements, espacements et contraintes de mise en page.
   • Sécuriser le rendu des données avec les fonctions d'échappement et de validation de WordPress.
7. 07Industrialiser une bibliothèque de blocs

   Chapitres

   • Organiser plusieurs blocs personnalisés dans une bibliothèque cohérente et maintenable.
   • Définir des conventions de développement communes pour faciliter le travail à plusieurs.
   • Mutualiser composants, réglages et logiques de rendu récurrents entre plusieurs blocs.
   • Rédiger une documentation technique et éditoriale utile à l'exploitation des blocs.
   • Prévoir l'évolution des blocs dans le temps via les mécanismes de dépréciation, sans casser les contenus existants.
   • Mettre en application sur une mini bibliothèque de blocs métier réutilisables.
8. 08Tester, optimiser et maintenir des blocs en conditions professionnelles

   Chapitres

   • Vérifier le fonctionnement des blocs dans l'éditeur, en front-office et sur différents contenus.
   • Identifier les points de vigilance liés aux mises à jour de WordPress, Gutenberg, ACF et du thème.
   • Repérer les impacts sur les performances, la compatibilité et la stabilité du site.
   • Mettre en place des contrôles qualité sur le code, le rendu et l'accessibilité des blocs.
   • Corriger les anomalies fréquentes liées aux champs, attributs, scripts ou styles.