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
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.
2.1 Outils et logiciels
Les outils et logiciels nécessaires au bon déroulement de cette formation
- 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
2.2 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 : 6 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 Créer son premier bloc
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. Exercice : créer une liste d’ingrédients — Lecture : 3 min • Pratique : 60 min
- 10. Personnaliser la toolbar Gutenberg — Prochainement
- 11. Le composant URL — Prochainement
- 12. L’import de média — Prochainement
- 13. Ajouter des réglages dans l’inspecteur Gutenberg — Prochainement
- 14. Composant dynamique et rendu en PHP — Prochainement
- 15. Paramètres supplémentaires des blocs — Prochainement
3.2 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. Étude de cas : les blocs de CapitaineWP — Prochainement
- 2. Des blocs conseil / attention personnalisables — Prochainement
- 3. Créer un bloc bouton amélioré avec Gutenberg — Prochainement
- 4. Afficher un article d’un Custom Post Type dans un bloc Gutenberg — Prochainement
- 5. Utiliser Ajax avec Gutenberg pour récupérer une donnée distante — Prochainement
- 6. Étude de cas : les blocs de Advanced Gutenberg Blocks — Prochainement
- 7. Une Google Map personnalisable dans Gutenberg — Prochainement
Partie 4
Bonus
Des fonctions supplémentaires, des astuces utiles pour pousser Gutenberg encore plus loin
- 1. Dans quels cas gutenberg peut remplacer ACF — Prochainement
- 2. Ajouter une palette de couleurs par défaut — Prochainement
- 3. Activer Gutenberg dans un Custom Post Type — Prochainement
- 4. Précharger un modèle de mise en page avec Gutenberg — Prochainement
- 5. Désactiver des blocs Gutenberg — Prochainement
- 6. Les filtres Gutenberg utiles — Prochainement
- 7. i18n : internationaliser le Javascript de Gutenberg — Prochainement