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 ?

Les bases de la construction d’un bloc

  • Comprendre le fonctionnement de l’éditeur de bloc
  • Découvrir l’anatomie d’un bloc Gutenberg
  • Mettre en place un environnement et créer notre extension qui va accueillir votre 1er 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