Maxime BJ présentePourquoi vous former à Gutenberg ?
Gutenberg, le nouvel éditeur de WordPress, est la grande nouveauté pour 2018. Destiné à apporter un vent de fraicheur sur l’éditeur visuel, à savoir le vieillissant Tiny MCE, il va révolutionner notre utilisation de WordPress.
Ne perdez pas de temps et formez-vous dès maintenant à la création de blocs sur mesure affichés en temps réel grâce à ReactJS (blocs éditables en direct, contenu dynamique via l’API Rest…).
Les préventes sont ouvertes, les premiers cours et vidéos seront disponibles courant mars 2018.
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 : 8 min
- 2. Gutenberg n’est pas un page builder — Lecture : 5 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 : 5 min
- 6. Différences entre React et Jquery — Lecture : 7 min
- 7. Quiz : Le Projet Gutenberg — Lecture : 2 min • Pratique : 5 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 • Pratique : 10 min
- 2. WebPack — Lecture : 4 min
- 3. Create-guten-block : démarrer rapidement ses projets Gutenberg — Lecture : 8 min • Pratique : 10 min
- 4. Notions fondamentales de JSX et ESNext — Lecture : 12 min
- 5. Approche JS standard vs approche moderne ESNext — Lecture : 4 min
- 6. Quiz : Le JS moderne — Lecture : 2 min • Pratique : 5 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
3.1 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 • Pratique : 10 min
- 2. Analyse des fichiers et du coeur de Gutenberg — Lecture : 7 min
- 3. Quiz : Les coulisses de Gutenberg — Lecture : 2 min • Pratique : 5 min
3.2 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. Télécharger les fichiers de la formation — Lecture : 3 min • Pratique : 5 min
- 3. Chargement des scripts et styles nécessaires à Gutenberg en PHP — Lecture : 3 min
- 4. Déclarer un bloc Gutenberg — Lecture : 8 min
- 5. Définir une icône personnalisée pour son bloc — Lecture : 5 min
- 6. Champs administrables et attributs — Lecture : 6 min
- 7. Le champ RichText et la Toolbar — Lecture : 10 min • Pratique : 15 min
- 8. Ajouter des styles CSS avec Sass — Lecture : 6 min
- 9. Devoir : créer une liste d’ingrédients — Lecture : 3 min • Pratique : 60 min
- 10. Personnaliser la toolbar Gutenberg — Lecture : 6 min • Pratique : 30 min
- 11. Le composant URL — Lecture : 4 min • Pratique : 15 min
- 12. Le composant import de média — Lecture : 7 min • Pratique : 20 min
- 13. Quiz : blocs en stock — Lecture : 2 min • Pratique : 5 min
3.3 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 : 8 min
- 4. Devoir : Créer un bloc bouton amélioré avec Gutenberg — Lecture : 2 min • Pratique : 120 min
- 5. Bloc dynamique via l’API REST et rendu en PHP — Lecture : 7 min
- 6. Blocs dynamiques, approche alternative — Lecture : 5 min
- 7. Quiz : Gutenberg avancé — Lecture : 2 min • Pratique : 5 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 : 8 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. Devoir : Réalisez votre propre bloc ! — Lecture : 1 min • Pratique : 120 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 — Lecture : 4 min
- 2. Gérer la dépréciation de vos blocs — Lecture : 4 min
- 3. i18n : internationaliser le Javascript de Gutenberg — Lecture : 3 min
- 4. Astuce : ajouter un bloc / titre Gutenberg sans toucher la souris — Lecture : 1 min
- 5. Personnaliser les couleurs de la palette Gutenberg — Lecture : 2 min
- 6. Blocs larges et full width sur Gutenberg — Lecture : 2 min
- 7. Modifier la largeur de l’éditeur Gutenberg — Lecture : 1 min
- 8. Activer Gutenberg dans un Custom Post Type — Lecture : 1 min
- 9. Précharger un modèle de mise en page avec Gutenberg — Lecture : 4 min
- 10. Désactiver des blocs Gutenberg — Lecture : 2 min
- 11. Déployer son extension Gutenberg sur le répertoire WordPress — Lecture : 6 min
- 12. Aller encore plus loin… — Lecture : 2 min