Découvrez la formation
et apprenez à développer des blocs interactifs, natifs et performants avec JavaScript et React.
Gutenberg, c'est l’éditeur de blocs de WordPress. Même s'il est riche en possibilités, vous aurez tôt ou tard besoin d’ajouter de nouvelles fonctionnalités. Heureusement, vous allez pouvoir développer vos propres blocs et répondre à tous les besoins grâce à la Block API de WordPress.
30 cours
10h de vidéo
Code source à télécharger
Accès au Slack
Dès 749 € TTC
Cette formation a été conçue pour les développeurs. Pour la suivre, il vous faudra :
Une agence web
Un freelance
Un no-coder
Un designer
Vous souhaitez comprendre comment déclarer des blocs en JS facilement.
Vous cherchez à dépasser les limites de Gutenberg et ajouter vos propres fonctionnalités.
Vous voulez offrir à vos clients une meilleure expérience d’édition de contenu via l’éditeur de blocs.
Vous désirez rester au plus proche des technologies natives.
Vous désirez moderniser vos outils afin de rester en phase avec les standards de l’industrie.
Découvrez mon programme e-learning, qui aborde tous les concepts phares du développement de blocs avec Gutenberg.
Module 1
Présentation de Gutenberg et du FSE
Pourquoi développer ses blocs avec Gutenberg et sans ACF ?
Prérequis pour suivre la formation : pas besoin d'être un expert JS !
Dans ce premier chapitre, on va voir pourquoi développer ses propres blocs avec Gutenberg et quels sont les prérequis pour suivre la formation.
Module 2
Installer Node.js et NPM pour compiler nos blocs
La librairie create-block pour démarrer rapidement ses projets Gutenberg
Analyse de la structure des fichiers de l'extension et des blocs
Dans ce chapitre, on va installer notre environnement de travail pour compiler notre code. Ensuite, tout sera automatisé.
Module 3
Supports : ajouter des fonctionnalités à vos blocs sans code
Attributs et RichText : rendre un bloc Gutenberg administrable simplement
Ici, l'objectif est de créer notre premier bloc administrable et découvrir les options automatiques grâce aux supports.
Module 4
Ajouter des réglages dans la barre d'outils de l'éditeur
Ajouter des réglages dans l'inspecteur
Le composant import de média
Dans ce chapitre, vous allez apprendre à ajouter des réglages à nos blocs au travers des composants et champs natifs fournis par Gutenberg.
Module 5
Comprendre le cycle de vie de Gutenberg et de la Block API
Notions fondamentales de React et ESNext pour Gutenberg
Refactoriser nos blocs avec des sous-composants
Petite aparté dans la création de nos blocs afin de bien comprendre les concepts fondamentaux du JS moderne, de React, ainsi que le cycle de vie de Gutenberg.
Module 6
Imbriquer des blocs grâce à InnerBlocks et répéteurs
Hooks useSelect & useDispatch : lire les données de l'éditeur et manipuler les blocs
Hook useEntityRecords pour récupérer des données dynamiques et rendu en PHP
Lire des données via l'API REST de WordPress et rendu en PHP
Dans cette partie, nous allons découvrir les nombreux hooks fournis par Gutenberg qui nous permettront de récupérer des données du back-end dynamiquement.
Module 7
Les hooks JS de Gutenberg : ajoutez des réglages à un bloc natif
Utiliser l'interactivity API de WordPress afin d'abandonner jQuery
Déclarer des variantes de blocs
Communiquer des données entre les blocs avec les contextes
Vous en voulez plus ? Dans ce chapitre, on va aborder des concepts avancés des blocs comme les hooks JS, l'interactivity API et les contextes.
Module 8
Transformer les blocs et définir des raccourcis markdown
Rétrocompatibilité : gérer la dépréciation de vos blocs
Internationalisation (i18n) : comment traduire ses blocs Gutenberg
Créer la build de notre extension et la déployer sur le répertoire WordPress
Dans cette partie, on se concentre sur les finitions comme la traduction, la rétrocompatibilité et la build. Une fois votre plugin de blocs prêt, il sera temps de le mettre en production.
Module 9
Un bloc « Sommaire » qui génère automatiquement une table des matières
Un bloc « Relationnel » pour afficher une publication comme avec ACF
Le bloc « Plugin » : chercher et afficher une extension via l'API WP.org
Dans ce dernier chapitre, vous découvrirez de véritables blocs avancés et utiles pour vos sites, au travers d'études de cas concrètes.
Vous vous posez à juste titre des questions sur Gutenberg et les blocs sur‑mesure. Découvrez ses 6 atouts majeurs ainsi que les réponses aux principales craintes que vous pourriez avoir :
Avec les blocs Gutenberg en JavaScript, vous restez au plus proche de WordPress. Pas besoin de surcouche pour enregistrer et traiter les données, ou de créer vos paramètres personnalisés : Tout existe déjà et est documenté.
Créer des blocs pour Gutenberg, c'est embrasser la nouvelle méthodologie pour faire des sites avec WordPress et l’éditeur de blocs : le Full Site Editing.
Avec cette nouvelle méthodologie, vous créerez des sites plus simples à maintenir plus rapidement. Un passage obligé pour votre agence !
En créant vos propres blocs, vous n’aurez aucune limite technique et vous pourrez répondre aux besoins les plus ambitieux de vos clients.
De plus, vous offrez une expérience d’édition de contenus encore jamais égalée à vos clients : c'est vous qui décidez des options que vous mettez à leur disposition ou non, avec un rendu en temps réel dans l’éditeur.
Un bloc Gutenberg peut très facilement se réutiliser entre vos projets. Plus besoin de réinventer la roue sur chaque site client !
Et pourquoi pas mettre à disposition vos extensions de blocs sur wordpress.org pour les partager avec la communauté WordPress, ou même carrément les vendre pour générer des revenus ?
Comme à son habitude, WordPress propose énormément d’outils pour vous aider à créer vos blocs.
Vous n’avez donc pas besoin d’être un expert en React pour créer vos premiers blocs, mais c’est mieux si vous avez déjà tout de même quelques bases en JavaScript.
Si vous n‘aimez pas le JavaScript, il existe une alternative pour faire des blocs en PHP avec ACF Pro.
C’est effectivement une bonne solution de repli, mais il vous faudra une licence Pro de ACF à quelques centaines d’euros par an.
De plus, l’expérience utilisateur sera un peu moins bonne car vous passez par des champs plutôt que d’éditer les blocs en temps réel.
Oui, bien entendu ! Au lieu de développer des fonctionnalités au niveau des pages (ou à partir de shortcodes), vous allez simplement délocaliser le code dans un bloc.
Ainsi, chaque bloc répondra à un besoin particulier. On respecte alors le principe de responsabilité unique. C’est plus propre et plus facile à maintenir !
Salut ! Moi c'est Maxime, alias Capitaine WP.
Je forme les agences à WordPress depuis 2009.
Capitaine WP // Expert WordPress
Grenoble, France
Développeur de métier, je me suis spécialisé en WordPress dès 2009, afin de répondre aux besoins de mes clients.
Puis j'ai commencé à m'investir dans la communauté WordPress en organisant des meetups, des WordCamps et en écrivant des tutoriels sur mon blog.
Aujourd’hui je vous propose mes services sous forme de formations en ligne, ou sur mesure dans votre entreprise.
Outre l’aspect technique, je suis en mesure de vous accompagner dans votre stratégie WordPress et élaborer des process solides au sein de votre entreprise.
Voici quelques témoignages d'entreprises et freelances que j'ai accompagné :
Valentin Grenier, freelance
Développeur WordPress créatif
Je dois beaucoup aux formations de Maxime dans mon apprentissage du développement WordPress. Ses explications claires, sa pédagogie par l'exemple, ainsi que sa disponibilité sur le canal Slack de Capitaine WP font toute la différence par rapport à une formation classique. Vous n'achetez pas simplement une formation : vous choisissez de vous former et d'être accompagné.e par un des piliers de la communauté WordPress !
Valérie Galassi, freelance
Chapitre Onze
J’ai suivi la formation Full Site Editing de Maxime et je l’ai vraiment appréciée. Le contenu est clair, bien structuré et très concret. Maxime explique les choses avec simplicité et pédagogie. J’ai aussi beaucoup apprécié son objectivité : il présente le Full Site Editing tel qu’il est, avec ses avantages mais aussi ses limites, sans chercher à en faire la solution miracle. C’est donc une formation complète et vraiment utile pour mieux comprendre le FSE et gagner en autonomie sur les outils de WordPress. Je la recommande sans hésiter.
William Lourenço, CTO
Studio Plune, Agence Web à Nantes
La formation était complète, parfaitement adaptée à nos problématiques, avec des cas concrets qui nous ont permis de progresser efficacement. Et ce n’est pas tout : tu nous as laissé des bases solides en partageant certains de tes dépôts, et ton support web est d’une grande qualité, un vrai plus pour continuer à apprendre.
Pascal MOURIER, directeur
SWAT Studio, Agence Web à Annecy
Maxime a su s’immerger dans notre fonctionnement pour mettre en lumière nos forces et nos faiblesses. Il a ensuite structuré sa formation pour renforcer nos approches WordPress. Nous maintenons un contact régulier pour rester au top !
Jean Ulmer, gérant
WebCD, Agence Web à Strasbourg
WordPress nous a permis de répondre plus précisément aux besoins clients, d'optimiser notre process et de gagne du temps. La formation Capitaine WP nous a permis d'apprendre le theming WordPress en un temps record.
Emmanuel Faure, gérant
Hemaphore, Agence Web à Valence
Merci à Maxime pour son intervention et sa formation qui nous ont permis de mieux structurer notre approche de WordPress. Il a su adapter sa formation en fonction de nos besoins et trouver les solutions dont nous avions besoin. Nous le recommandons vivement et continuerons à le solliciter de manière régulière pour nous mettre à niveau.
Choisissez votre formule et commencez la formation immédiatement.
Afficher les prix pour
Découverte
Gratuit
Découvrez le développement de blocs au travers de cours gratuits pour vous donner une idée de la formation.
Freelance
749 € TTC
La formation complète en vidéo pour devenir un expert en développement de blocs Gutenberg sur mesure.
Tous les cours en vidéo
Pack FSE + Blocs
1 498 € 999 € TTC
Un pack unique pour accéder aux deux formations en vidéo : Full Site Editing et développement de blocs
Tous les cours en vidéo
Découverte
Gratuit
Découvrez le développement de blocs au travers de cours gratuits pour vous donner une idée de la formation.
Agence
1 249 € TTC
La formation complète en vidéo et un compte pour chaque développeur pour suivre sa progession + du coaching en visio
Tous les cours en vidéo
Pack FSE + Blocs
2 498 € 1 849 € TTC
Les deux formations en vidéo : FSE et blocs + un compte pour chaque développeur pour suivre sa progession + du coaching en visio
Tous les cours en vidéo
Voici les questions fréquemment posées. Si vous en avez d'autres, contactez-moi !
Est-ce qu'une prise en charge CPF est possible ?
Malheureusement non, car il n'existe pas aujourd'hui de certification pour ce programme au registre spécifique (RS) de France Compétences.
Je suis étudiant ou jeune entrepreneur, ai-je droit à un coup de pouce ?
Oui ! J'ai des réductions pour vous.
Pour cela, commencez par m'envoyer un message via le formulaire en bas de cette page et joignez :
Je vous enverrai ensuite un code promo à appliquer sur le panier lors de votre achat !
Est-ce que j'ai un accès à vie à la formation ?
Oui ! Vous avez un accès illimité à la version e-learning de la formation, ainsi qu'à un groupe privé sur Slack.
Est-ce que la formation est à jour ?
Oui ! Je prends soin de mette à jour les cours au fur et à mesure des nouvelles versions de WordPress.
Est-ce que j'aurais besoin d'outils payants pour suivre la formation ?
Non ! On pourra tout faire grâce à des outils gratuits : on aura uniquement besoin de Node.js et de LocalWP, qui sont des outils gratuits.
Est-ce que je peux payer en plusieurs fois ?
Oui grâce à Paypal. Il suffit de sélectionner le paiement en 4 fois via Paypal lors du passage de commande.
Est-ce qu'il y a un tarif préférentiel pour les anciens de WP Chef ?
Oui ! Si vous êtes passé par la formule certifiante de WP Chef, contactez-moi et joignez votre certificat, je vous enverrai un code promo !
Y a-t-il une garantie satisfait ou remboursé ?
Oui ! Vous avez un délai de 14 jours pour demander un remboursement intégral. Mais pour cela, vous ne devez pas avoir consulté plus du tiers des cours de la formation.
Lors de la commande, vous devrez renoncer au délai de rétractation légal pour accéder immédiatement au contenu. En contrepartie, je vous propose une garantie plus flexible.
Aurais-je une facture ?
Oui ! Vous recevez votre facture immédiatement après avoir terminé l'achat.
Je propose également cette formation en visio ou en présentiel avec un programme sur‑mesure que l'on définira ensemble.
Vous avez des questions avant de sauter le pas ? Contactez-moi !