Il s’agit d’une s\u00e9rie de tutoriels d\u00e9taill\u00e9s expliquant comment cr\u00e9er vos propres blocs WordPress Gutenberg personnalis\u00e9s. C’est pour vous qui \u00eates un d\u00e9veloppeur de th\u00e8mes ou de plugins et qui \u00eates, comme moi, frustr\u00e9 par le manque de documentation. La plupart de ce que j’ai appris en mati\u00e8re de d\u00e9veloppement dans le nouveau monde Javascript de WordPress se fait par essais et erreurs, en exp\u00e9rimentant vigoureusement et en lisant tout ce que j’ai rencontr\u00e9. Et donc j’ai pens\u00e9 que je pourrais rassembler tout ce que j’ai appris jusqu’\u00e0 pr\u00e9sent dans un grand tutoriel.<\/p>\n
A travers 10 parties ce tutoriel a pour objectif de vous apprendre \u00e0 \u00e9crire vos propres blocs personnalis\u00e9s. Peu importe \u00e0 quoi ils servent, en commen\u00e7ant par les bases et en passant \u00e0 des fonctionnalit\u00e9s plus complexes. Je vous recommande de tout \u00e9crire vous-m\u00eame au lieu de copier-coller le code. C’est la meilleure fa\u00e7on d’apprendre! Suivez la s\u00e9rie de l’\u00e9tape 1 \u00e0 10 car nous allons construire au-dessus du bloc au fur et \u00e0 mesure que nous avancerons.<\/p>\n
Avant de plonger dans les marches; une clause de non-responsabilit\u00e9. Il y a quelques choses que vous devriez d\u00e9j\u00e0 savoir \u00e0 l’avance sur ce qu’est cette s\u00e9rie et ce qu’elle n’est pas.<\/p>\n
Vous devez conna\u00eetre Javascript – c’est une donn\u00e9e. Pas besoin d’\u00eatre un expert, mais ce n’est pas un tutoriel Javascript. Comme pour la version ECMAScript Javascript\u00a0; vous pouvez \u00e9crire dans ES5 et ne pas vous soucier de compiler votre code avec Babel et d’autres choses. Cependant, cette s\u00e9rie est \u00e9crite avec le code ES6 et ESNext. Ne vous inqui\u00e9tez pas – l’\u00e9tape 1 est d\u00e9di\u00e9e \u00e0 vous guider dans la configuration d’un environnement de d\u00e9veloppement pr\u00eat \u00e0 coder dans ESNext avec toutes leurs nouvelles syntaxes.<\/p>\n
Comme vous le savez probablement, Gutenberg est bas\u00e9 sur React JS<\/a>. Cette s\u00e9rie 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’\u00eatre un expert. Comme React existe depuis un certain temps, il existe de nombreux bons tutoriels, documentations et ressources d\u00e9di\u00e9es \u00e0 vous apprendre React. Je recommande donc de les rechercher en premier.<\/p>\n Cette s\u00e9rie est ax\u00e9e sur l’apprentissage des parties Javascript, React et JSX et ne concerne pas le style \/ CSS. Comme l’objectif de votre bloc peut \u00eatre radicalement diff\u00e9rent, j’ai choisi de ne pas me concentrer sur le style et de ne fournir que du HTML tr\u00e8s basique. C’est \u00e0 vous d’ajouter votre style et la sortie HTML n\u00e9cessaire pour que votre bloc s’affiche exactement comme vous en avez besoin.<\/p>\n Et enfin, veuillez consid\u00e9rer le moment o\u00f9 cette s\u00e9rie a \u00e9t\u00e9 \u00e9crite. Gutenberg est encore assez nouveau mais change radicalement et s’am\u00e9liore.<\/p>\n Si vous trouvez cela dans un avenir lointain, certains codes pourraient \u00eatre obsol\u00e8tes ou remplac\u00e9s par de meilleures m\u00e9thodes. Ce guide a \u00e9t\u00e9 \u00e9crit et finalis\u00e9 dans WordPress version 5.2.3 (fin d’ann\u00e9e 2019).<\/p>\n Dans les premi\u00e8res parties, nous nous concentrons sur les bases. Nous avons mis en place un environnement de d\u00e9veloppement avec une compilation en cours de notre code. Et les bases de l’enregistrement d’un bloc et des parties PHP n\u00e9cessaires. Nous d\u00e9couvrirons l’immense biblioth\u00e8que de composants et de m\u00e9thodes disponibles sur WordPress Gutenberg.<\/p>\n Ensuite, nous apprendrons comment ajouter des sections et des param\u00e8tres pour notre bloc dans la barre lat\u00e9rale de l’\u00e9diteur (inspecteur) ainsi que la personnalisation de la barre d’outils. En cours de route, nous aborderons de nombreux types d’entr\u00e9e diff\u00e9rents et comment utiliser le composant de Gutenberg pour ceux-ci. Et bien s\u00fbr, nous apprendrons comment enregistrer, mettre \u00e0 jour et sortir les informations enregistr\u00e9es dans notre bloc – et comment cela fonctionne dans les coulisses.<\/p>\n \u00c0 la fin, nous verrons des choses plus avanc\u00e9es comme les blocs dynamiques et comment utiliser PHP pour rendre la sortie du bloc. Et enfin comment faire des requ\u00eates de publication dans l’\u00e9diteur – permettant \u00e0 l’utilisateur de s\u00e9lectionner une publication dans une liste pour le rendu.<\/p>\n Vous trouverez ci-dessous des liens directs vers chaque partie de la s\u00e9rie.<\/p>\n Partie 1: Configuration de l’environnement de d\u00e9veloppement<\/a><\/strong> Partie 2: Enregistrement d’un bloc<\/a> Partie 3: Props et composants WordPress<\/a><\/strong> Partie 4: Attributs<\/a><\/strong> Partie 5: Ajouter des param\u00e8tres d’inspecteur<\/a><\/strong> Partie 6: Ajout de barres d’outils<\/a><\/strong> Partie 7: Cr\u00e9ation de vos propres composants<\/a><\/strong> Partie 8: Traduction de votre bloc<\/a><\/strong>L’\u00e2ge de ce tutoriel<\/h3>\n
Ce que vous apprendrez<\/h2>\n
Table des mati\u00e8res<\/h3>\n
\n
\nDans la premi\u00e8re partie de cette s\u00e9rie de didacticiels sur la cr\u00e9ation de blocs Gutenberg personnalis\u00e9s, nous devons configurer notre environnement de d\u00e9veloppement. Nous avons besoin d’un endroit o\u00f9 nous pouvons \u00e9crire notre code dans les syntaxes ES6\/ESNext et le compiler \u00e0 la vol\u00e9e.<\/p>\n<\/li>\n
\nDans cette partie, nous allons \u00e9crire du Javascript pour enregistrer et configurer notre bloc personnalis\u00e9. \u00c0 la fin, nous enregistrerons le script avec PHP et cr\u00e9erons le code PHP n\u00e9cessaire pour que WordPress le reconnaisse comme un nouveau bloc.<\/p>\n<\/li>\n
\nDans l’\u00e9tape pr\u00e9c\u00e9dente, nous avons appris comment enregistrer un bloc personnalis\u00e9, \u00e0 la fois en Javascript et en PHP. Dans cette \u00e9tape, nous apprendrons \u00e0 utiliser les composants de WordPress pour ajouter diff\u00e9rents types de champs et de param\u00e8tres.<\/p>\n<\/li>\n
\nDans cette partie, nous verrons comment d\u00e9finir des attributs, r\u00e9cup\u00e9rer leurs valeurs et les mettre \u00e0 jour. Avec les attributs, nous pouvons accepter les entr\u00e9es de l’\u00e9diteur, les enregistrer et les sortir comme bon nous semble.<\/p>\n<\/li>\n
\nDans cette \u00e9tape, nous allons nous concentrer sur ce que WordPress (au moins dans le code) appelle l’inspecteur \u2013 la barre lat\u00e9rale sur le c\u00f4t\u00e9 droit de l’\u00e9diteur. Nous aborderons quelques nouveaux composants qu’il est logique de placer dans la barre lat\u00e9rale et comment les g\u00e9rer.<\/p>\n<\/li>\n
\nDans cet article, nous apprendrons comment ajouter les barres d’outils de WordPress \u00e0 notre bloc, c’est-\u00e0-dire pour l’alignement et l’alignement des blocs. Nous apprendrons \u00e9galement \u00e0 ajouter nos propres barres d’outils avec nos propres boutons pour effectuer des actions personnalis\u00e9es.<\/p>\n<\/li>\n
\nJusqu’\u00e0 pr\u00e9sent, dans cette s\u00e9rie de didacticiels, nous avons \u00e9crit tout le code \u00e0 l’int\u00e9rieurregisterBlockType()<\/code>de laedit<\/code>fonction de. Il est tout \u00e0 fait possible, et souvent recommand\u00e9, d’affecter \u00e0 la place la modification \u00e0 un composant distinct. Ce faisant, nous pouvons utiliser des fonctionnalit\u00e9s telles que l’\u00e9tat des composants et les m\u00e9thodes de cycle de vie.<\/p>\n<\/li>\n
\nDans cette partie, nous allons nous concentrer sur la mani\u00e8re de traduire les textes et les valeurs de notre bloc. Nous utilisons WP-CLI pour g\u00e9n\u00e9rer les fichiers n\u00e9cessaires afin que Gutenberg puisse charger nos traductions lors du changement de langue WordPress.<\/p>\n<\/li>\n