Développement de Gutenberg avec des exemples : Google Maps (partie 1)

Il y a quelques jours nous avons publié un nouveau plugin dans le répertoire des plugins de WordPress.org : Nelio Maps. Comme son nom l'indique, il s'agit d'un plugin de cartes qui ajoute un nouveau type de bloc dans l'éditeur WordPress. Avec lui, nous pouvons facilement ajouter une carte Google sur nos pages ou publications. Voici à quoi ça ressemble :

Nelio Maps est l'un de nos premiers plugins entièrement conçu pour Gutenberg. Bien qu'il s'agisse d'un plugin relativement simple, c'est un produit très utile. D'une part, parce que tout utilisateur qui souhaite ajouter des cartes à son site Web peut désormais le faire en installant un plugin simple et léger. D'autre part, parce que tout développeur qui veut développer dans Gutenberg a désormais un vrai exemple de comment créer un plugin "from scratch", simplement en lisant ce post.

Comme je suis conscient que le développement d'un plugin comme celui-ci n'est pas la chose la plus simple du monde, j'ai organisé ce tutoriel en trois parties différentes. Aujourd'hui, je vais vous expliquer comment créer le plugin "à partir de zéro" afin que nous nous retrouvions avec le squelette que nous utiliserons pour construire le produit final. Dans le second post je vous expliquerai comment obtenir une carte interactive dans l'éditeur de blocs WordPress et nous verrons tous les composants que j'ai créés pour faire le plugin. Enfin, dans le troisième et dernier article, nous verrons comment enregistrer la carte dans la base de données et comment nous pouvons l'afficher dans le frontend .

Définir notre projet et le plugin que nous voulons

Cela peut sembler un truisme, mais avant de se lancer dans un nouveau projet, la première chose que nous devons faire est de définir ce que nous voulons réaliser avec ledit projet. Selon les fonctionnalités que nous voulons inclure, nous aurons un ensemble d'exigences différent. Définissons donc le type de plugin de carte que nous voulons implémenter dans ce tutoriel.

Voici les exigences du projet :

1. On devrait pouvoir ajouter une carte (ou plus d'une) à leurs pages ou messages.
2. Il devrait être possible de centrer la carte n'importe où en
   
   • soit en faisant glisser la carte avec la souris
   • ou rechercher l'emplacement dans une boîte de recherche.
3. La taille de la carte doit être ajustable , tant en largeur qu'en hauteur
4. La carte doit inclure différents styles (noir et blanc, palettes de couleurs personnalisées, etc.)
5. L'utilisateur doit pouvoir ajouter un marqueur dans la carte.
6. S'il y a un marqueur, la carte doit être accompagnée d'une zone de texte contenant des informations supplémentaires sur le marqueur.

Ambitieux, non ? Eh bien, commençons !

Comment créer un plugin Gutenberg "à partir de zéro"

Si vous suivez notre blog, vous avez probablement vu qu'il y a quelques jours, Antonio a publié un article expliquant comment créer des plugins à l'aide d'un plugin standard que nous avons créé dans Nelio. Si vous n'avez pas encore lu son article, je vous recommande de le lire en premier, car notre plugin sera basé sur le plugin standard wp-beb qu'Antonio y explique.

Pour démarrer notre projet, la première chose que nous allons faire est de mettre en miroir le plugin standard de Nelio. Tout d'abord, créez un nouveau référentiel dans votre compte GitHub. Ensuite, suivez les étapes décrites dans les pages d'aide de Github pour refléter notre passe-partout :

 git clone --bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git push --mirror https://github.com/your-username/your-repo.git

Une fois votre projet prêt, suivez les instructions trouvées dans README.md pour compiler le projet et ainsi pouvoir le voir dans votre site WordPress.

Comment transformer le plugin Boilerplate en votre plugin

Comme il apparaît dans la documentation passe-partout du plugin, la première chose que nous devons faire est de changer le nom du projet dans le code source. Autrement dit, vous devez remplacer toutes les occurrences de wp-beb (majuscules et minuscules, avec tirets ou traits de soulignement) par le nom de notre plugin (dans mon cas, nelio-maps ).

Pour cela, nous pouvons utiliser le script suivant :

Gardez simplement à l'esprit que vous devrez remplacer la chaîne nelio maps int lignes 5, 8, 9 et 10 par le nom de votre plugin.

D'un autre côté, c'est aussi le bon moment pour changer la documentation du plugin. D'une part, vous devez éditer les fichiers README.md et readme.txt pour refléter le but de votre nouveau plugin (sans oublier de mentionner le fait que vous utilisez notre passe-partout comme base, bien sûr). D'autre part, vous devez modifier le premier commentaire dans le fichier PHP principal, car ce sont les données que WordPress utilise pour afficher le plugin dans l'écran Plugins .

Vous pouvez voir comment j'ai apporté toutes ces modifications dans le premier commit du projet Nelio Maps.

Comment nettoyer le Plugin Boilerplate des éléments inutiles

Le plugin passe-partout de Nelio comprend, par défaut, quelques composants : (a) un bloc de démonstration et (b) un plugin Gutenberg. Puisque nous ne sommes intéressés que par la création d'un bloc (la carte), nous allons éliminer tout ce qui reste (le plugin Gutenberg).

Cette étape est assez simple, car elle repose essentiellement sur la « suppression » des éléments inutiles du plugin. Plus précisément, nous devrions :

1. Débarrassez-vous de tout le contenu qui apparaît dans le dossier des assets (où le plugin Gutenberg a été ajouté, son style et son icône).
2. Nettoyez le fichier webpack.config.js , car il existe quelques règles qui utilisaient les fichiers dans les assets que nous venons de supprimer.
3. Nettoyez le fichier principal du plugin, car il met en file d'attente une feuille de style et un fichier JavaScript qui n'existent plus.

Vous pouvez voir tous les changements dans ce commit. Si vous compilez à nouveau le code, vous verrez que le bloc Demo existe toujours, mais pas le plugin Gutenberg qui est apparu dans le coin supérieur droit de l'écran.

Sommaire

Dans l'article d'aujourd'hui, nous avons vu comment créer un plugin pour Gutenberg. Tout d'abord, nous avons défini le type de projet que nous voulons créer et nous avons identifié ses exigences. Ensuite, nous avons vu les étapes nécessaires pour adapter le plugin standard de Nelio à un nouveau projet. Autrement dit, nous avons vu comment cloner le projet passe-partout de Nelio et le nettoyer pour répondre à nos besoins particuliers.

Rendez-vous la semaine prochaine avec la deuxième partie de ce tutoriel, où nous modifierons le bloc Démo afin qu'il exécute toutes les fonctions que nous avons décrites au début de ce post.

Image sélectionnée par Brett Zeck sur Unsplash .