Maxime BJ présente

La formation

Créer des blocs avec Gutenberg

47 cours

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

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

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.

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

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.

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

Partie

Partie 5

Étendre et personnaliser Gutenberg

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