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
Programme révisé 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, jusqu'à l'éditeur de site (Full Site Editing) désormais standard dans les thèmes blocs.
- 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 via block.json (la méthode recommandée depuis ACF 6) 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.
- Situer l'API Block Bindings, qui relie un champ (méta, donnée externe) aux attributs d'un bloc existant, et repérer les cas où elle évite de créer un bloc complet.
- 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
Questions fréquentes
Ce que les entreprises demandent avant de se lancer.
ACF Blocks est-il toujours un choix d'actualité pour créer des blocs Gutenberg ?
Oui. ACF Pro continue d'investir sur les blocs : la version 6.6 a introduit ACF Blocks V3, qui aligne l'expérience d'édition sur celle des blocs natifs (rendu direct dans le canvas, fin du mode aperçu à bascule), et l'enregistrement passe par block.json comme pour un bloc natif. Pour une équipe qui maîtrise PHP mais pas React, ACF Blocks reste la voie la plus rapide vers des blocs métier robustes. La formation couvre les deux approches pour choisir en connaissance de cause selon le projet.Faut-il savoir développer en React pour suivre cette formation ?
Non, une première connaissance de JavaScript suffit. La partie ACF Blocks se travaille entièrement en PHP avec des templates de rendu classiques. Le module consacré aux API natives introduit les notions React nécessaires (composants, attributs, fonctions edit et save) de façon progressive, avec les composants prêts à l'emploi du package block-editor. Un développeur WordPress à l'aise en PHP repart capable de produire un bloc natif simple et de lire le code d'un bloc existant.Créer un bloc custom est-il toujours nécessaire, ou existe-t-il des alternatives ?
Pas systématiquement, et la formation apprend justement à arbitrer. Un pattern synchronisé couvre les compositions réutilisables sans code. L'API Block Bindings permet de connecter un champ personnalisé aux attributs d'un bloc natif (paragraphe, image, bouton) sans développer de bloc, une approche que WordPress étend au fil des versions. Le bloc custom garde sa place quand il faut une interface de saisie dédiée, un rendu spécifique ou une logique métier que les blocs existants ne portent pas.
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
