Développement Web
Formation Wordpress Création de blocs Gutenberg custom (ACF / blocks natifs)
Cette formation permet de concevoir, développer et maintenir des blocs Gutenberg sur mesure avec ACF et les API natives de WordPress.
Format
Intra-entreprise
Durée recommandée
≈ 21 à 35 heures
Démarrage
Sous 15 jours
Sur-mesure
Programme co-construit avec le formateur
Mis à jour le
Pour qui ?
- ›Développeurs WordPress souhaitant créer des blocs Gutenberg personnalisés pour des sites sur mesure.
- ›Intégrateurs web amenés à structurer des interfaces éditoriales modulaires dans l’environnement WordPress.
- ›Responsables techniques, chefs de projet digitaux ou profils web avancés intervenant sur des projets WordPress personnalisés.
Prérequis
- ›Maîtriser les bases de WordPress, de son administration et de son architecture de thèmes.
- ›Avoir de bonnes bases en HTML, CSS, PHP et une première connaissance de JavaScript.
- ›Une expérience de personnalisation de thèmes WordPress est recommandée.
Objectifs pédagogiques
- ›Comprendre l’architecture de Gutenberg et le rôle des blocs personnalisés dans un dispositif éditorial modulaire.
- ›Concevoir des blocs sur mesure adaptés aux besoins de publication, de mise en page et de réutilisation des contenus.
- ›Développer des blocs custom avec ACF et avec les méthodes natives de WordPress selon le niveau de personnalisation attendu.
- ›Structurer les champs, les réglages, les variations et les comportements d’affichage dans une logique maintenable.
- ›Intégrer les bonnes pratiques de développement, de qualité de code, de performance, de compatibilité et d’expérience éditeur.
- ›Tester, faire évoluer et maintenir une bibliothèque de blocs personnalisés dans un projet WordPress professionnel.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Moyens & supports pédagogiques
- Accueil des stagiaires
- Supports de formation projets
- Apports théoriques et pratiques
- Études de cas concrets
- Auto-positionnement
- Accès en ligne aux ressources
Évaluation & suivi des acquis
Feuille de présence
Émargement des stagiaires en présentiel ou à distance, via support papier ou signature électronique.
Émargement sécurisé
Signatures électroniques collectées en ligne et conservées dans un coffre-fort numérique sécurisé par Dendreo.
Auto-positionnement
Évaluation du niveau des stagiaires en début et en fin de formation pour mesurer la progression.
Évaluations pédagogiques
Validation des acquis par des questions orales ou écrites tout au long de la formation.
Mises en situation
Exercices pratiques et cas concrets pour ancrer les compétences dans la réalité métier.
Attestation de fin de formation
Remise d'une attestation officielle à l'issue de la formation.
Délai d’accès
Sous 15 jours après validation du devis
Accessibilité PSH
Adaptations possibles en situation de handicap. En savoir plus
Prochaine étape
Construire votre formation Wordpress Création de blocs Gutenberg custom (ACF / blocks natifs)
Un échange de 20 minutes suffit pour cadrer vos enjeux et la session. Devis personnalisé sous 48h, démarrage sous 15 jours.
- Réponse sous 24h ouvrées
- 01 85 71 00 29
Pour aller plus loin
