Comment créer un bloc WordPress Gutenberg personnalisé : série de didacticiels

Il s’agit d’une série de tutoriels détaillés expliquant comment créer vos propres blocs WordPress Gutenberg personnalisés. C’est pour vous qui êtes un développeur de thèmes ou de plugins et qui êtes, comme moi, frustré par le manque de documentation. La plupart de ce que j’ai appris en matière de développement dans le nouveau monde Javascript de WordPress se fait par essais et erreurs, en expérimentant vigoureusement et en lisant tout ce que j’ai rencontré. Et donc j’ai pensé que je pourrais rassembler tout ce que j’ai appris jusqu’à présent dans un grand tutoriel.

A travers 10 parties ce tutoriel a pour objectif de vous apprendre à écrire vos propres blocs personnalisés. Peu importe à quoi ils servent, en commençant par les bases et en passant à des fonctionnalités plus complexes. Je vous recommande de tout écrire vous-même au lieu de copier-coller le code. C’est la meilleure façon d’apprendre! Suivez la série de l’étape 1 à 10 car nous allons construire au-dessus du bloc au fur et à mesure que nous avancerons.

Ce que vous devez savoir avant de commencer

Avant de plonger dans les marches; une clause de non-responsabilité. Il y a quelques choses que vous devriez déjà savoir à l’avance sur ce qu’est cette série et ce qu’elle n’est pas.

Les langages de programmation

Vous devez connaître Javascript – c’est une donnée. Pas besoin d’être un expert, mais ce n’est pas un tutoriel Javascript. Comme pour la version ECMAScript Javascript ; vous pouvez écrire dans ES5 et ne pas vous soucier de compiler votre code avec Babel et d’autres choses. Cependant, cette série est écrite avec le code ES6 et ESNext. Ne vous inquiétez pas – l’étape 1 est dédiée à vous guider dans la configuration d’un environnement de développement prêt à coder dans ESNext avec toutes leurs nouvelles syntaxes.

Comme vous le savez probablement, Gutenberg est basé sur React JS. Cette série n’est pas non plus un didacticiel React et suppose une connaissance de base de React et de son fonctionnement. Encore une fois, nul besoin d’être un expert. Comme React existe depuis un certain temps, il existe de nombreux bons tutoriels, documentations et ressources dédiées à vous apprendre React. Je recommande donc de les rechercher en premier.

Cette série est axée sur l’apprentissage des parties Javascript, React et JSX et ne concerne pas le style / CSS. Comme l’objectif de votre bloc peut être radicalement différent, j’ai choisi de ne pas me concentrer sur le style et de ne fournir que du HTML très basique. C’est à vous d’ajouter votre style et la sortie HTML nécessaire pour que votre bloc s’affiche exactement comme vous en avez besoin.

L’âge de ce tutoriel

Et enfin, veuillez considérer le moment où cette série a été écrite. Gutenberg est encore assez nouveau mais change radicalement et s’améliore.

Si vous trouvez cela dans un avenir lointain, certains codes pourraient être obsolètes ou remplacés par de meilleures méthodes. Ce guide a été écrit et finalisé dans WordPress version 5.2.3 (fin d’année 2019).

Ce que vous apprendrez

Dans les premières parties, nous nous concentrons sur les bases. Nous avons mis en place un environnement de développement avec une compilation en cours de notre code. Et les bases de l’enregistrement d’un bloc et des parties PHP nécessaires. Nous découvrirons l’immense bibliothèque de composants et de méthodes disponibles sur WordPress Gutenberg.

Ensuite, nous apprendrons comment ajouter des sections et des paramètres pour notre bloc dans la barre latérale de l’éditeur (inspecteur) ainsi que la personnalisation de la barre d’outils. En cours de route, nous aborderons de nombreux types d’entrée différents et comment utiliser le composant de Gutenberg pour ceux-ci. Et bien sûr, nous apprendrons comment enregistrer, mettre à jour et sortir les informations enregistrées dans notre bloc – et comment cela fonctionne dans les coulisses.

À la fin, nous verrons des choses plus avancées comme les blocs dynamiques et comment utiliser PHP pour rendre la sortie du bloc. Et enfin comment faire des requêtes de publication dans l’éditeur – permettant à l’utilisateur de sélectionner une publication dans une liste pour le rendu.

Table des matières

Vous trouverez ci-dessous des liens directs vers chaque partie de la série.

• Partie 1: Configuration de l’environnement de développement
  Dans la première partie de cette série de didacticiels sur la création de blocs Gutenberg personnalisés, nous devons configurer notre environnement de développement. Nous avons besoin d’un endroit où nous pouvons écrire notre code dans les syntaxes ES6/ESNext et le compiler à la volée.

• Partie 2: Enregistrement d’un bloc
  Dans cette partie, nous allons écrire du Javascript pour enregistrer et configurer notre bloc personnalisé. À la fin, nous enregistrerons le script avec PHP et créerons le code PHP nécessaire pour que WordPress le reconnaisse comme un nouveau bloc.

• Partie 3: Props et composants WordPress
  Dans l’étape précédente, nous avons appris comment enregistrer un bloc personnalisé, à la fois en Javascript et en PHP. Dans cette étape, nous apprendrons à utiliser les composants de WordPress pour ajouter différents types de champs et de paramètres.

• Partie 4: Attributs
  Dans cette partie, nous verrons comment définir des attributs, récupérer leurs valeurs et les mettre à jour. Avec les attributs, nous pouvons accepter les entrées de l’éditeur, les enregistrer et les sortir comme bon nous semble.

• Partie 5: Ajouter des paramètres d’inspecteur
  Dans cette étape, nous allons nous concentrer sur ce que WordPress (au moins dans le code) appelle l’inspecteur – la barre latérale sur le côté droit de l’éditeur. Nous aborderons quelques nouveaux composants qu’il est logique de placer dans la barre latérale et comment les gérer.

• Partie 6: Ajout de barres d’outils
  Dans cet article, nous apprendrons comment ajouter les barres d’outils de WordPress à notre bloc, c’est-à-dire pour l’alignement et l’alignement des blocs. Nous apprendrons également à ajouter nos propres barres d’outils avec nos propres boutons pour effectuer des actions personnalisées.

• Partie 7: Création de vos propres composants
  Jusqu’à présent, dans cette série de didacticiels, nous avons écrit tout le code à l’intérieurregisterBlockType()de laeditfonction de. Il est tout à fait possible, et souvent recommandé, d’affecter à la place la modification à un composant distinct. Ce faisant, nous pouvons utiliser des fonctionnalités telles que l’état des composants et les méthodes de cycle de vie.

• Partie 8: Traduction de votre bloc
  Dans cette partie, nous allons nous concentrer sur la manière de traduire les textes et les valeurs de notre bloc. Nous utilisons WP-CLI pour générer les fichiers nécessaires afin que Gutenberg puisse charger nos traductions lors du changement de langue WordPress.

• Partie 9: Blocs dynamiques
  Jusqu’à présent, nous avons rendu la sortie du bloc en Javascript. Cependant, avec un contenu dynamique comme des publications récentes ou l’affichage d’une publication, nous pouvons être amenés à rendre la sortie du bloc en PHP.

• Partie 10: Récupérer les publications et les composants d’ordre supérieur
  Dans la dernière partie, nous apprendrons comment utiliser les composants d’ordre supérieur, et donc comment effectuer une requête de publication depuis l’éditeur et fournir une méthode pour sélectionner les publications.