Maxime BJ présente

La formation

Créer des blocs avec Gutenberg

54 cours

Niveau : Développeur

Pourquoi 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.

Acheter • 99€

Partie

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.

Partie

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.

Partie

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.

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

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.

Partie

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...

Partie

Partie 5

Étendre et personnaliser Gutenberg

Des fonctions supplémentaires, des astuces utiles pour pousser Gutenberg encore plus loin.