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

Bienvenue dans le troisième et dernier article sur la création d'un plugin de cartes pour Gutenberg. Notre dernier post était assez dense et nous avons vu beaucoup de choses différentes : les attributs de notre bloc, comment insérer une carte à l'aide d'un composant React, comment utiliser des composants WordPress ou encore créer nos propres composants pour définir l'interface utilisateur, etc. Aujourd'hui, nous allons discuter de quelque chose de plus simple.

Dans cet article, nous verrons comment rendre la carte Google Maps dans le front-end. Pour ce faire, nous allons regarder de plus près save.js et nous apporterons quelques modifications au plugin pour que tout fonctionne comme prévu. J'utiliserai également ce dernier post pour commenter tout point qui n'était peut-être pas clair jusqu'à présent.

Comment enregistrer notre bloc de carte pour l'afficher dans le front-end

Pour afficher la carte dans le front-end, nous devons d'abord définir le code HTML que nous voulons afficher dans le front-end. Dans un bloc Gutenberg, cela est réalisé en définissant la méthode save de la fonction registerBlockType . Comme je l'ai déjà mentionné dans le post précédent, cette méthode est définie dans le fichier save.js dans packages/blocks/nelio-maps/ .

Encore une fois, c'est une fonction extrêmement simple à comprendre :

• De la ligne 7 à 25, nous extrayons tous les attributs pertinents pour notre bloc. C'est-à-dire tous les attributs que nous avons définis dans attributes.js et qui modifient l'apparence de notre carte.
• A la ligne 41 nous ouvrons la div qui servira de conteneur pour le bloc.
• À la ligne 47, nous trouvons un div qui enveloppera la carte elle-même. Regardez quelque chose de très intéressant : cette div inclut tous les attributes de l'objet dans sa définition. Cela signifie que toutes les propriétés dans les attributes (par exemple, 'data-lat': lat de la ligne 34) seront rendues en tant qu'attributs HTML (par exemple, en supposant que la variable lat est 2.48171 , lat apparaîtra dans le HTML final en tant que data-lat="2.48171" ).
• A la ligne 49, un petit div est ajouté contenant les coordonnées du marqueur.
• A la ligne 59, le contenu du RichText que nous avions défini dans edit.js .

Ainsi, en substance, la méthode save génère un code HTML qui contient tous les attributs pertinents pour afficher une carte dans le front-end. Alors, qu'est ce qui pourrait aller mal? Eh bien, si vous deviez ouvrir le front-end maintenant, tout ce que vous verriez serait ceci :

Un bloc vide qui n'a que du contenu RichText . Qu'est-il arrivé?

Comment modifier le plugin pour rendre une carte Google créée avec notre bloc Gutenberg

Pour afficher une carte Google Maps dans le front-end, il est nécessaire de charger la bibliothèque Google Maps et un script qui l'utilise pour construire la carte elle-même. C'est extrêmement simple et si vous avez déjà développé pour WordPress, vous devez savoir comment le faire.

La première chose à faire est de créer un script capable de créer une carte Google à l'aide des données que nous avons insérées dans le code HTML. Ce script se trouve dans assets/src/js/public/public.js . Regardez de plus près pour comprendre comment cela fonctionne:

• À la ligne 9, nous recherchons tous les nœuds contenant une carte (en filtrant par l'une des classes que nous avons incluses dans la méthode save ) et, pour chacun d'eux, nous appelons la méthode initGoogleMap .
• Cette méthode repose sur deux fonctions pour faire son travail. D'une part, il extrait les coordonnées d'un éventuel marqueur avec la fonction extractMarkerPositionIfAny de la ligne 55 et, d'autre part, il extrait toutes les propriétés de la carte (coordonnées du centre, niveau de zoom, liste des boutons visibles, etc) avec la fonction fonction extractMapOptions de la ligne 26. Notez que les deux fonctions sont simplement dédiées à la lecture des valeurs des attributs data-something que nous avions mis dans la méthode save .
• Enfin, nous avons créé une carte (ligne 18) et ajouté un marqueur (ligne 21) en utilisant respectivement les classes Map et Marker fournies par la bibliothèque Google Maps.

Maintenant que nous avons ce script, nous n'avons besoin que de deux ajustements supplémentaires dans notre projet :

• D'une part, nous devons modifier le fichier de configuration webpack webpack.config.js pour qu'il transpile le script public.js que nous venons de créer. Cela peut sembler difficile, mais c'est en fait assez facile : il suffit de regarder les modifications que j'ai apportées à ce fichier dans ce commit.
• D'autre part, nous devons modifier le plugin pour mettre en file d'attente ce nouveau script (et la bibliothèque Google Maps !) dans le front-end. Encore une fois, un changement très simple que vous pouvez voir dans ce commit.

Une fois toutes ces modifications effectuées, voici le résultat final :

Je sais ce que vous pensez : pourquoi, au lieu de faire tout cela à la main, n'avons-nous pas utilisé le composant React que nous avions utilisé dans edit.js ? Cela ne ferait-il pas gagner du temps ?

En effet, utiliser le composant React que nous avons vu dans le post précédent nous aurait évité quelques ennuis… mais il y a un hic : il repose sur React, ce qui signifie que nous aurions dû charger React dans le front-end pour l'utiliser également. Et cela semble trop, vous ne pensez pas ?

Détails en attente

Enfin, permettez-moi de discuter brièvement d'un aspect très important, sinon votre plugin ne fonctionnera pas : la clé API Google Maps.

La clé API Google Maps

Pour utiliser Google Maps, vous devez disposer d'une clé API. Comment l'obtenir est quelque chose qu'Antonio nous a expliqué il y a quelques jours. Maintenant, comment l'utilisons-nous ?

Une option serait de coder en dur notre clé API dans le plugin. Si vous êtes le seul à utiliser le plugin, cela ferait l'affaire. Mais si vous envisagez de distribuer votre plugin à de vrais utilisateurs, c'est une très mauvaise idée, car tous les services Google ne sont pas gratuits, certains sont payants et les coûts peuvent être assez élevés si tout le monde utilise votre clé.

Que faire dans ces cas ? L'idée est très simple : il suffit d'ajouter une option de configuration dans le plugin pour que les gens entrent leur propre clé API.

Dans notre cas, si vous ajoutez une carte sans clé API, vous verrez le message d'avertissement suivant :

vous invitant à ajouter la clé API.

Habituellement, vous créez une page spéciale pour gérer les paramètres de votre plugin. Mais pour un plugin aussi facile et simple que celui que nous créons, j'ai pensé qu'il serait plus simple d'opter pour une solution différente.

Dans WordPress, il y a un écran d'options dans /wp-admin/options.php qui ressemble à ceci :

C'est une sorte de « belle interface » pour éditer (presque) toutes les options qui ont été enregistrées dans WordPress et qui se trouvent dans la table wp_options . Donc, tout ce que notre plugin a à faire est de s'assurer que cette option existe toujours dans la base de données (même lorsqu'il n'y a pas encore de clé API définie) et nous aurons une "belle interface" pour que l'utilisateur colle sa clé API sans que nous fassions quoi que ce soit !

Pour ce faire, utilisez le crochet init (voir la ligne 73 de ce commit) avec une fonction (ligne 134) qui définit toujours une valeur pour votre option clé. Si l'option n'existe pas encore, cette fonction définira sa valeur sur la valeur par défaut (une chaîne vide) et enregistrera l'option. Si elle existait déjà, la nouvelle valeur sera la même que nous avions déjà, et donc la fonction de mise à jour ne fera rien. Un hack astucieux et efficace !

En résumé

Dans cet article, nous avons surmonté le dernier obstacle de notre projet : comment enregistrer la carte et comment l'afficher dans le front-end. Fondamentalement, tout ce dont nous avions besoin était une div avec toutes les informations pertinentes sur la carte (son centre, les options d'affichage des boutons, le marqueur, etc.) et un petit script pour la reconstruire dans le front-end.

J'espère que ce tutoriel vous aura plu et servira d'exemple pour entreprendre vos propres projets. Comme vous pouvez le voir, si vous démarrez un nouveau projet avec une bonne base comme celle que nous avons créée dans Nelio avec le passe-partout pour le développement de Gutenberg, matérialiser vos idées en projets réels sera beaucoup plus facile.

Si vous avez des questions, faites-le nous savoir dans la section commentaires ci-dessous. Bonne chance!

Image sélectionnée par Artem Bali sur Unsplash .