Maxime BJ présentePourquoi vous former à Gutenberg ?
Gutenberg, le nouvel éditeur de WordPress, est la grande force de WordPress. Et quoiqu’en disent ses détracteurs, il révolutionne notre utilisation de WordPress avec une interface ergonomique et moderne.
Ouvert aux développeurs, il vous permettra de créer tous types de blocs permettant une édition et un aperçu WYSIWYG en temps réel.
Vous pourriez même créer votre propre constructeur de pages natif ! Découvrez comment créer votre premier bloc dès maintenant.
Introduction
Et Gutenberg révolutionna WordPress
Gutenberg, de son nom de code, est le nouvel éditeur visuel de WordPress qui remplace Tiny MCE. Découvrons ce nouvel éditeur et quel rôle il va jouer dans l'écosystème face aux pages builders. Nous allons voir aussi l'impact de Javascript sur notre CMS favori.
-
1. Présentation du projet Gutenberg — Lecture : 7 min
-
2. Gutenberg n’est pas (encore) un page builder — Lecture : 6 min
-
3. Pourquoi apprendre à développer avec Gutenberg — Lecture : 7 min
-
4. Pourquoi WordPress s’oriente vers le Javascript — Lecture : 5 min
-
5. Le choix de ReactJS — Lecture : 4 min
-
6. Différences entre React et Jquery — Lecture : 6 min
Partie 2
Être prêt pour React
Avant de se lancer dans le bain, nous allons préparer notre machine avec quelques outils, et on va analyser rapidement comment est fait le coeur de Gutenberg. Nous nous inspirerons de son approche pour nos propres blocs.
-
1. Node & NPM : outils et librairies nécessaires — Lecture : 5 min
-
2. WebPack — Lecture : 4 min
-
3. Create-block : une librairie pour démarrer rapidement ses projets Gutenberg — Lecture : 7 min
-
4. Notions fondamentales de JSX et ESNext — Lecture : 11 min
-
5. Approche JS standard vs approche moderne ESNext — Lecture : 3 min
Partie 3
Développer avec Gutenberg
Dans cette partie nous allons apprendre à créer notre premier bloc, avec des zones éditables, en personnalisant la toolbar ainsi que l'inspecteur (la barre latérale) en utilisant des composants fournis par WordPress
3A • Gutenberg sous le capot
On va jeter un oeil sous le capot pour comprendre comment fonctionne Gutenberg et son cycle de vie, et voir quels composants on va pouvoir réutiliser à nos propres fins.
-
1. Le cycle de vie de Gutenberg — Lecture : 7 min
-
2. Analyse des fichiers et du coeur de Gutenberg — Lecture : 6 min
3B • Gutenberg Bases : créer ses premiers blocs
On se lance dans le développement en utilisant du javascript, du ReactJS et bien sûr la surcouche amenée par WordPress qui va grandement nous simplifier la vie
-
1. Créer ses blocs : dans un thème ou une extension ? — Lecture : 4 min
-
2. Créer plusieurs blocs dans une extension — Lecture : 4 min
-
3. Déclarer un bloc Gutenberg avec registerBlockType — Lecture : 7 min
-
4. Définir une icône personnalisée pour son bloc — Lecture : 4 min
-
5. Champs administrables et attributs — Lecture : 6 min
-
6. Le champ RichText et la Toolbar — Lecture : 6 min
-
7. Ajouter des réglages dans la Toolbar — Lecture : 5 min
-
8. Ajouter des styles CSS avec Sass — Lecture : 6 min
-
9. Exemple • Le bloc alerte : styles et réglages via la Toolbar — Lecture : 4 min
-
10. Le composant URL — Lecture : 3 min
-
11. Le composant import de média — Lecture : 5 min
3C • Gutenberg Avancé : aller plus loin avec les blocs
Maintenant que l'on a des bases bien solides, on va pousser un peu plus loin en ajoutant des réglages dans l'inspecteur, en utilisant l'API Rest et en créant des sous-composants React pour améliorer la lisibilité de notre code.
-
1. Ajouter des réglages via l’inspecteur — Lecture : 10 min
-
2. Déstructurer les props pour améliorer le code — Lecture : 3 min
-
3. Créer des sous-composants pour alléger son code — Lecture : 6 min
-
4. Bloc dynamique via l’API REST et rendu en PHP — Lecture : 4 min
-
5. Insérer des blocs dans un bloc grâce à InnerBlocks — Lecture : 3 min
-
6. Hooks Gutenberg : ajouter des paramètres à un bloc existant — Lecture : 6 min
Partie 4
Exemples concrets et études de cas
Dans ce chapitre nous allons créer de vrais blocs qui pourront facilement trouver utilité dans votre prochain site, comme le bloc Post qui va chercher le contenu d'un article ou encore le bloc extension qui se connecte à l'API de wordpress.org pour récupérer un plugin...
-
1. Dans quels cas Gutenberg peut remplacer ACF ? — Lecture : 3 min
-
2. Le bloc « article », le composant recherche et les hooks React — Lecture : 14 min
-
3. Le bloc « plugin » : utiliser Ajax pour se connecter à une API distante — Lecture : 5 min
-
4. Créer des blocs dans Gutenberg avec ACF — Lecture : 8 min
Partie 5
Étendre et personnaliser Gutenberg
Des fonctions supplémentaires, des astuces utiles pour pousser Gutenberg encore plus loin.
-
1. Paramètres supplémentaires des blocs et transformations — Lecture : 4 min
-
2. Gérer la dépréciation de vos blocs — Lecture : 3 min
-
3. Déployer son extension Gutenberg sur le répertoire WordPress — Lecture : 6 min
-
4. i18n : internationaliser le Javascript de Gutenberg — Lecture : 4 min
-
5. Astuce : ajouter un bloc / titre Gutenberg sans toucher la souris — Lecture : 1 min
-
6. Configurer Gutenberg pour votre thème avec theme.json ou add_theme_support — Lecture : 4 min
-
7. Charte graphique et Gutenberg : personnaliser les couleurs de la palette et les polices — Lecture : 2 min
-
8. Modifier la largeur de l’éditeur Gutenberg — Lecture : 2 min
-
9. Blocs larges et full width sur Gutenberg — Lecture : 2 min
-
10. Activer Gutenberg dans un Custom Post Type — Lecture : 2 min
-
11. Précharger un modèle de mise en page avec Gutenberg — Lecture : 3 min
-
12. Désactiver des blocs Gutenberg avec ou sans code — Lecture : 3 min
-
13. Aller encore plus loin avec Gutenberg — Lecture : 2 min