Découvrez la formation

Développer des blocs Gutenberg sur mesure

et apprenez à développer des blocs interactifs, natifs et performants avec JavaScript et React.

En présentiel En e‑learning

Développez vos propres blocs
sur mesure avec WordPress

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.

Découvrir mes formules

Objectifs pédagogiques & opérationnels

  • Comprendre le fonctionnement de l’éditeur de blocs
  • Maitriser la création de blocs sur mesure avec JS et React
  • Adopter l’approche par composants
  • Savoir manipuler les données pour un rendu dynamique
  • Comprendre le flux de traitement des données de Gutenberg dans WordPress

En chiffres

  • 3 jours soit 21h

  • Dès 2700 € HT

  • Éligible financement OPCO

  • De 1 à 9 stagiaires

  • En présentiel ou visio synchrone

  • Programme personnalisable

Prérequis

Cette formation a été conçue pour les développeurs. Pour la suivre, il vous faudra :

  • Être à l’aise avec WordPress
  • Être à l’aise avec Gutenberg
  • Avoir des bases en JavaScript
  • Avoir des bases en PHP
  • Pas besoin de maîtriser React !

Vous êtes

  • Une agence web

  • Un freelance

  • Un dev back

  • Un dev front

Cette formation est pour vous si

  • 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.

Programme de la formation

Voici mon programme type sur 3 jours, que nous pourrons bien sûr personnaliser ensemble selon vos besoins spécifiques.

Jour 1

Mise en place de l’environnement et premiers blocs

  • Présentation de Gutenberg et du FSE

  • 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

  • Supports : ajouter des fonctionnalités à vos blocs sans code

  • Attributs et RichText : rendre un bloc Gutenberg administrable simplement

  • 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

À l’issue de cette première journée, vous aurez mis en place votre environnement de développement une bonne fois pour toutes et vous serez à l'aise avec les outils de compilation.

Vous saurez également créer vos premiers blocs administrables et leur ajouter des réglages grâce aux attributs.

Jour 2

Cycle de vie et concepts avancés de Gutenberg

  • Comprendre le cycle de vie de Gutenberg

  • Notions fondamentales de React et ESNext pour Gutenberg

  • Refactoriser nos blocs avec des sous-composants

  • 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

  • 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

À la fin de cette journée, vous comprendrez parfaitement l’univers du JavaScript moderne et React.

Vous serez en mesure d’utiliser les différents hooks de Gutenberg pour manipuler les blocs et les données.

Vous saurez également créer des blocs dynamiques qui récupèrent des données via l’API REST de WordPress.

Jour 3

Finitions, mise en production et études de cas

  • 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

  • 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

  • Mise en pratique finale : créer un bloc complet sur mesure selon vos besoins

Au terme de cette dernière journée, vous saurez générer la build de votre extension et la mettre en ligne.

Vous serez également en mesure de traduire vos blocs et les préparer pour l'avenir.

Enfin, grâce aux études de cas, vous tirerez pleinement parti des concepts appris dans cette formation.

Le programme vous plait ?

Je veux un devis !

Cette formation est finançable par votre OPCO
grâce à mon partenaire certifié Qualiopi.

Pourquoi suivre cette formation ?

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 :

1
Travaillez avec des technologies natives

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é.

2
Optez pour une méthodologie compatible FSE

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 !

3
Répondez à tous les besoins de vos clients

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.

4
Offrez une meilleure expérience utilisateur

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.

5
Réutilisez vos blocs sur vos prochains sites

Un bloc Gutenberg peut très facilement se réutiliser entre vos projets. Plus besoin de réinventer la roue sur chaque site client !

6
Partagez vos extensions de blocs

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 ?

Est-ce que je dois maîtriser React ?

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.

N’est-ce pas plus simple de faire des blocs avec ACF ?

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.

Est-ce que j’aurais autant de contrôle qu’avec l’ancienne méthode ?

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 !

Maxime BERNARD-JACQUET

Le formateur

Salut ! Moi c'est Maxime, alias Capitaine WP.
Je forme les agences à WordPress depuis 2009.

Maxime BERNARD-JACQUET

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.

C'est vous qui en parlez le mieux !

Voici quelques témoignages d'entreprises et freelances que j'ai accompagné :

Valentin Grenier

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 !

Valerie Galassi

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.

Horizon Marketing

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.

SWAT Agency

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

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

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.

Les formules

Que ce soit en visio ou en présentiel, j'ai une formule adaptée à vos besoins.

En visio

1000 € HT/j


Une formation en visio répartie sur plusieurs demi-journées


  • Éligible à un financement OPCO
  • Programme sur‑mesure
  • Aux dates de votre choix
  • En demi-journées faciles à planifier
  • Durée flexible de 1 à 5 jours
  • Accès aux formations e-learning

Demander un devis

Dans votre agence

à partir de 1200 € HT/j


Une formation en présentiel directement dans vos locaux.


  • Éligible à un financement OPCO
  • Programme sur‑mesure
  • Aux dates de votre choix
  • Sur 3 à 5 jours consécutifs
  • Accès aux formations e-learning

Demander un devis

Masterclass

à venir


Une formation de haut vol en petit comité dans un lieu d'exception


  • En petit comité exclusif
  • Avec 2 formateurs
  • Pour pousser la technique
  • Des ateliers, études de cas, workshops
  • Dans un lieu d'exception

Prochainement…

Des questions ?

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.

Cette formation est-elle suffisante pour passer au FSE ?

Tout à fait ! Si vous avez déjà de bonnes bases de WordPress, on pourra largement couvrir tous les aspects du Full Site Editing.

On abordera également la stratégie pour que votre agence se prépare au chamboulement des compétences et des techniques de travail.

Les prix sont-ils les mêmes sans prise en charge OPCO ?

Non ! Si vous financez la formation par vous-même, je n'ai pas besoin de mandater mon partenaire certifié Qualiopi.

Il y aura donc moins d'administratif. Le tarif visio passe à 800 € HT par jour et le tarif présentiel à 1000 €  HT par jour.

Est-ce que j'aurais accès au support à la fin de la formation ?

Oui ! Vous aurez un accès illimité à la version e-learning de la formation, ainsi qu'à un groupe privé sur Slack.

De quel matériel j'ai besoin pour chaque formule ?

En visio :

Le mieux, c'est d'avoir accès à un double écran pour suivre l'écran du formateur en même temps que vous manipulez.

Il faut également une connexion internet stable, un casque audio avec micro et une webcam.

En présentiel :

Il faut une salle de réunion avec Wi-Fi, vidéo projecteur ou téléviseur HDMI.

Dans tous les cas :

Vous aurez besoin des droits d'administrateur de votre machine pour l'installation du site en local.

Est-ce que Capitaine WP est certifié Qualiopi ?

Eh bien non mais mon partenaire l'est ! Je travaille en collaboration avec des organismes de formation qui ont une certification en cours de validité.

On a mis en place tous des process stricts pour respecter tous les points de qualité.

Vous préférez vous former en autonomie ?

Je propose également plusieurs formules e-learning pour suivre la formation à votre rythme.

Découvrez mes formules e-learning

Demande de devis

La prochaine étape, c'est de discuter de votre projet ensemble !

  • 1

    Prise de contact

    Pour commencer, remplissez ce formulaire et décrivez-moi votre besoin.

  • 2

    Positionnement pédagogique

    Je vous proposerai ensuite une visio de 20 minutes pour faire connaissance et définir un programme sur‑mesure.

  • 3

    Devis, programme et convention

    J'établirai ensuite avec mon partenaire Qualiopi les documents nécessaires pour votre OPCO.

  • 4

    Formation

    Quand tout est bon, il ne reste plus qu'à programmer la formation aux dates de votre choix.

  • Devis sans engagement.

  • Réponse sous 48h.

  • Partenaire d'un OF Qualiopi.