Créez votre 1er bloc Gutenberg à partir de zéro.

Avant de débuter cette session, je vous conseille tout de même une bonne maîtrise de React.js et de PHP.

Par où commencer ?

• Questions à se poser avant de créer son propre bloc
• Découper les utilisations de votre bloc en User Story
• Comprendre le fonctionnement de l’éditeur de bloc

Les bases de la construction d’un bloc

• Découvrir l’anatomie d’un bloc Gutenberg
• Mettre en place un environnement et créer notre extension qui va accueillir votre 1^er bloc avec @wordpress/create-block
• Comment enregistrer un script dans Gutenberg ?
• Ajouter des styles à votre bloc
• Comprendre la différence entre Edit et Save
• Rendre le contenu de votre bloc éditable avec le composant RichText
• Utiliser les attributs pour faire transiter des données

Utiliser les fonctionnalités de Gutenberg

• Comprendre les différents supports
• Ajouter une barre d’outil à votre bloc
• Ajouter des réglages personnalisés dans la sidebar à droite de l’éditeur
• Ajouter des styles par défaut
• Créer des compositions de blocs
• Comment trouver et utiliser des composants existants ? Se repérer dans le repo Github de Gutenberg ?

Comment créer un bloc dynamique ?

• Quand utiliser un bloc dynamique ?
• Comment récupérer des contenus depuis l’API de WordPress ?
• Stocker la meta d’une publication dans un bloc
• Afficher le rendu coté serveur dans Gutenberg avec le composant ServerSideRender

Pour aller plus loin

• Créer un nouveau format et l’afficher dans la barre d’outil de votre bloc
• Comment afficher des messages d’informations à l’éditeur du document ?
• Utiliser les InnerBlocks pour imbriquer les blocs
• Gérer l’obsolescence de vos blocs ?
• Comment internationaliser vos blocs Gutenberg ?
• Penser à l’accessibilité de votre bloc
• Comment publier votre blocs sur le répertoire officiel de WordPress ?

Exemples avancés d’utilisation de Gutenberg

• Comment se hooker sur un bloc existant pour modifier son comportement ?
• Découverte du Full Site Editing : créer un thème WordPress uniquement à base de blocs
• Construire son propre éditeur de bloc pour éditer le contenu des taxonomies
• Utiliser Gutenberg dans le contenu des produits WooCommerce