Maxime BJ présenteDécouvrez cette formation dans son intégralité
Bienvenue ! Certains cours accessibles gratuitement, mais la majorité est réservée aux détenteurs d'une offre premium.
Débloquez dès maintenant l'intégralité des cours et les vidéos.
Formules e-learning ou En présentiel
Déjà membre ? Connexion
Introduction
Introduction à l'éditeur de blocs
Gutenberg est l'éditeur de bloc créé pour révolutionner l'expérience d'édition de contenus au sein de WordPress. Il vous permet de créer vos propres blocs sur-mesure afin de répondre à tous vos besoins.
-
1. Introduction à Gutenberg, l’éditeur de blocs de WordPress • 5 min
-
2. Pourquoi développer ses propres blocs natifs avec Gutenberg (sans ACF) ? • 8 min
-
3. Prérequis : dois-je maîtriser Js et React pour développer pour Gutenberg ? • 8 min
Partie 1
Préparer notre environnement de développement
Avant de nous lancer dans le développement de nos blocs sur-mesure, on va d'abord devoir vérifier que nous avons de quoi faire fonctionner notre compilateur, notamment avec Node.js.
-
1. Installer Node.js & NPM pour compiler nos blocs Gutenberg • 5 min
-
2. Create-block : une librairie pour démarrer rapidement ses projets Gutenberg • 6 min
-
3. Analyse de la structure des fichiers de l’extension et des blocs • 11 min
Partie 2
Créer des blocs sur mesure avec React
Dans ce chapitre, on va apprendre à créer notre premier bloc Gutenberg administrable en React, et découvrir comment tirer parti des supports pour ajouter facilement des fonctionnalités à nos blocs.
1 • Nos premiers blocs interactifs
Dans ce premier chapitre, on va apprendre à créer des blocs et à leur donner de l'interactivité au travers de réglages et de champs de textes administrables.
-
1. Supports : ajouter des fonctionnalités à vos blocs sur-mesure sans code • 9 min
-
2. Attributs et RichText : rendre un bloc Gutenberg administrable simplement • 10 min
2 • Ajouter des réglages à nos blocs
Dans cette partie, on va aller plus loin et découvrir des mécanismes qui vont nous permettre d'ajouter tous types de réglages à nos blocs, en manipulant notamment les composants natifs de Gutenberg.
-
1. Ajouter des réglages dans la Toolbar • 11 min
-
2. Ajouter des réglages dans l’inspecteur • 11 min
-
3. Le composant import de média • 7 min
3 • Maîtriser Gutenberg et React
Dans cette partie, on va découvrir comment fonctionn Gutenberg sous le capot, comprendre les syntaxes un peu particulières de React et du JS moderne, et en profiter pour optimiser notre code pour le rendre plus lisible.
-
1. Comprendre le cycle de vie de Gutenberg et de la Block API • 9 min
-
2. Notions fondamentales de React et ESNext pour Gutenberg • 15 min
-
3. Refactoriser nos blocs avec des sous-composants • 7 min
4 • Récupérer des données dynamiquement
Dans cette partie, on va voir les blocs comment récupérer des données stockées en base toujours à jour dynamiquement, en passant par l'API Rest mais pas que. On va également voir comment insérer des blocs enfants dans nos blocs.
-
1. Imbriquer des blocs grâce à InnerBlocks et répéteurs • 8 min
-
2. Hooks useSelect & useDispatch : lire les données de l’éditeur et manipuler les blocs • 10 min
-
3. Hook useEntityRecords : récupérer des articles dynamiquement et rendu en PHP • 11 min
-
4. Récupérer des données via l’API REST de WordPress et rendu en PHP • 8 min
5 • Concepts avancés
Ici, on va pousser le développement de blocs dans ses retranchements avec les hooks pour modifier les blocs, la fameuse interactivity API qui remplace jQuery, les variantes, les contextes, les dépréciations, la traduction… des concepts importants qui vont permettre de tirer pleinement parti de vos blocs.
-
1. Les hooks JS de Gutenberg : ajouter des réglages à un bloc natif • 9 min
-
2. Utiliser l’Interactivity API de WordPress afin d’abandonner jQuery • 11 min
-
3. Déclarer des variantes de blocs • 7 min
-
4. Communiquer des données entre les blocs avec les contextes • 5 min
6 • Finitions et mise en production
Nos blocs sont enfin prêts, il ne nous reste plus qu'à appliquer quelques finitions pour qu'ils soient parfaits. Dans cette partie on va voir comment les rendre à l'épreuve du temps, traduisibles dans n'importe quel langage et comment déployer son extension.
-
1. Transformer les blocs en d’autres blocs et définir des raccourcis Markdown • 7 min
-
2. Rétrocompatibilité : gérer la dépréciation de vos blocs • 5 min
-
3. Internationalisation (i18n) : comment traduire nos blocs Gutenberg ? • 14 min
-
4. Créer la build de notre extension Gutenberg et la déployer sur le répertoire WordPress • 7 min
Partie 3
Études de cas concrets
Vous êtes curieux de voir des blocs complexes en action ? Dans cette partie, je vous montre certains de mes blocs et comment je les ai réalisés, afin de vous donner des idées pour vos propres blocs.
-
1. Le bloc « sommaire » qui génère automatiquement une table des matières • 10 min
-
2. Le bloc « relationnel » pour afficher une publication comme avec ACF • 11 min
-
3. Le bloc « plugin » pour chercher et afficher une extension via l’API WP.org • 7 min
Bonus
Astuces autour des blocs et de Gutenberg
Pour terminer cette formation, voici quelques petites astuces rapides et utiles autour de l'éditeur et des blocs.