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 : 6 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. Chargement des scripts et styles nécessaires à Gutenberg en PHP — Lecture : 3 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 : 4 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 : 7 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 : 7 min
- 4. Bloc dynamique via l’API REST et rendu en PHP — Lecture : 5 min
- 5. Insérer des blocs dans un bloc grâce à InnerBlocks — Lecture : 3 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 CPT qui va chercher le contenu d'un article, 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. Étude de cas : les blocs de Advanced Gutenberg Blocks — Lecture : 8 min
- 3. Bloc post : afficher un résumé d’article ou d’un autre post type — Lecture : 7 min
- 4. Bloc plugin : utiliser Ajax pour se connecter à une API distante — Lecture : 7 min
- 5. Une Google Map personnalisable dans Gutenberg — Lecture : 6 min
- 6. 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 : 3 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 : 6 min
- 5. Astuce : ajouter un bloc / titre Gutenberg sans toucher la souris — Lecture : 1 min
- 6. Configurer Gutenberg pour votre thème avec add_theme_support — Lecture : 4 min
- 7. Personnaliser les couleurs de la palette Gutenberg — Lecture : 2 min
- 8. Blocs larges et full width sur Gutenberg — Lecture : 2 min
- 9. Modifier la largeur de l’éditeur Gutenberg — Lecture : 1 min
- 10. Activer Gutenberg dans un Custom Post Type — Lecture : 1 min
- 11. Précharger un modèle de mise en page avec Gutenberg — Lecture : 3 min
- 12. Désactiver des blocs Gutenberg — Lecture : 2 min
- 13. Aller encore plus loin… — Lecture : 2 min