La formation Développer des blocs Gutenberg en présentiel • Capitaine WP

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 à 6 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

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 bloc.
Vous désirez être 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 de développement

Adieu PHP ! Pourquoi WordPress opte désormais pour JavaScript ?
Différences entre React et Jquery
Introduction à NodeJS, Webpack et NPM
Notions fondamentales de JSX et ESNext
Installer la librairie « create-block »
Comprendre le cycle de vie de Gutenberg
Découverte du repo Github du projet Gutenberg
Doit-on créer ses blocs dans le thème ou dans une extension ?
Préparer notre extension pour recevoir plusieurs blocs

À l’issue de cette première journée, vous comprendrez parfaitement l’univers du JavaScript moderne, l’architecture du projet Gutenberg et vous serez à l’aise avec les outils de compilation.

Vous aurez alors les bases nécessaires pour créer votre tout premier premier bloc.

Jour 2

Développer des blocs sur‑mesure

Créer son premier bloc en JavaScript via registerBlockType
Créer la vue administrable Edit et la version enregistrable en base Save.
Déclarer les attributs du bloc
Créer des champs administrables
Utiliser le composant RichText et la Toolbar
Ajouter des réglages dans la barre d’outils
Ajouter des styles CSS avec Sass
Les composants URL et import de média
Ajouter des réglages via l’inspecteur
Utiliser l’API REST pour récupérer des données dynamiques
Blocs enfants avec InnerBlocks

À la fin de cette journée, vous saurez créer des blocs sur‑mesure administrables.

Vous serez en mesure d’ajouter des attributs et des réglages dans l’inspecteur et la barre d’outils de l’éditeur de blocs, et de manipuler les différents composants proposés par Gutenberg.

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

Jour 3

Aller plus loin avec les blocs

Hooker les blocs existants pour ajouter des options
Destructurer les props pour améliorer le code
Optimisation et refactorisation : découper en sous-composants
Comparaison avec les blocs ACF
Transformer un bloc en un autre en 2 clics
Internationaliser les chaînes de texte des blocs (i18n)
Activer l’éditeur de blocs dans un Custom Post Type
Précharger un modèle de mise en page des blocs avec Gutenberg
Désactiver certains blocs natifs de Gutenberg
S'abonner au store de WordPress pour créer un sommaire dynamique

Au terme de cette dernière journée, vous saurez comment repousser les limites de l’éditeur grâce aux blocs sur‑mesure.

Vous serez en mesure d‘optimiser le code de vos blocs, de les traduire, d’utiliser les hooks ou même encore créer des modèles pour vos CPT pour aller encore plus loin.

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 !

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.

J'ai ensuite créé un blog afin de partager mon savoir avec la communauté francophone. Je suis devenu par la suite formateur et consultant.

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.

Ils me font confiance

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

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 !

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.

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

En 2025…

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

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.

Développez vos propres blocs sur‑mesure avec WordPress