Développement de Gutenberg et exemples: Google Maps (Partie 3)

Bienvenue au troisième et dernier article sur la création d’un plugin de carte pour Gutenberg. Notre dernier article était très dense et nous avons vu beaucoup de choses différentes: les propriétés des blocs, comment insérer des cartes en utilisant les composants React, comment utiliser les composants WordPress, et même créer nos propres composants pour définir l’interface utilisateur, et ainsi de suite. Aujourd’hui, nous allons parler d’une chose plus simple. Dans cet article, nous allons voir comment faire Google Maps à l’avant. Pour ce faire, nous étudierons attentivement Save. JS et nous allons apporter quelques modifications au plug – in afin que tout fonctionne comme prévu. Je vais également utiliser ce dernier post pour commenter tout ce qui n’est peut – être pas clair à ce jour.
Comment enregistrer un bloc de carte pour afficher la carte à l’avant pour afficher la carte à l’avant, vous devez d’abord définir le HTML à rendre à l’avant. Dans le bloc Gutenberg, cela se fait en définissant la méthode d’enregistrement de la fonction registerblocktype. Comme je l’ai mentionné dans mon dernier article, cette méthode est définie dans le fichier Save. JS in package \/ Block \/ nelio Maps \/. Encore une fois, c’est une fonction très simple: de la ligne 7 à la ligne 25, nous extrayons tous les attributs liés au bloc. C’est – à – dire tous les attributs que nous définissons dans les attributs. Cela change l’apparence de la carte. À la ligne 41, nous ouvrons DIV, qui servira de conteneur pour le bloc. À la ligne 47, nous avons trouvé une DIV qui emballera la carte elle – même. Regardez quelque chose de très intéressant: cette div contient toutes les propriétés de l’objet dans sa définition. Cela signifie que tous les attributs de l’attribut (par exemple, \
Euh… La ligne 59 est le contenu richtext que nous avons défini dans l’édition. JS. Par conséquent, la méthode Save génère essentiellement un HTML contenant tous les attributs pertinents pour rendre la carte à l’avant. Alors, quel est le problème? Si vous ouvrez l’avant maintenant, ce que vous verrez sera:
Capture l’écran qui devrait afficher la carte. Oh, attends… Que se passe – t – il? Un bloc vide qui n’a que du contenu richtext. Qu’est – ce qui se passe? Comment modifier le plug – in pour rendre une carte Google créée à l’aide du bloc Gutenberg pour voir une carte Google à l’avant, vous devez charger la Bibliothèque de cartes Google et le script utilisé pour construire la carte elle – même. C’est très simple et si vous avez déjà développé pour WordPress, vous devriez savoir comment le faire. La première chose que nous devrions faire est de créer un script qui crée Google Maps en utilisant les données que nous avons saisies en HTML. Ce script se trouve dans assets \/ src \/ js \/ public \/ public. JS. Regardez de plus près comment il fonctionne:
À la ligne 9, nous cherchons tous les noeuds qui contiennent la cartographie (une classe contenue dans la méthode d’enregistrement du filtre), et pour chaque noeud, nous appelons la méthode initgoogle map. Cette méthode est basée sur deux fonctions pour accomplir son travail. D’une part, il utilise la fonction extractmarkerpositionifany de la ligne 55 pour extraire les coordonnées de n’importe quelle balise et, d’autre part, il extrait tous les attributs de la carte (coordonnées centrales, niveaux d’échelle, listes de boutons visibles, etc.) Utilisez la fonction extractmapoptions à la ligne 26. Notez que ces deux fonctions ne sont utilisées que pour lire la valeur de la propriété Data something que nous avons insérée dans la méthode Save. Enfin, nous avons créé une carte (ligne 18) et ajouté une balise (ligne 21) en utilisant les classes de carte et de marqueur fournies par la Bibliothèque Google Maps, respectivement.
– Oui. Maintenant que nous avons ce script, nous n’avons besoin que de deux changements supplémentaires dans le projet:
D’une part, nous devons modifier le profil du paquet Web. Configuration. JS pour exposer le script. Le JS que nous venons de créer. Cela peut sembler difficile, mais c’est en fait simple: Regardez les changements que j’ai apportés au fichier dans cette soumission. D’autre part, nous devons modifier le plug – in pour ajouter ce nouveau script (et la Bibliothèque Google maps!) À l’avant. Encore une fois, vous pouvez voir un changement très simple dans cette soumission. Une fois tous ces changements terminés, le résultat final est le suivant: Capture d’écran de Google Maps avec le plugin nelio Maps à l’avant. Je sais ce que vous pensez: parce que nous n’avons pas utilisé le composant React utilisé dans l’édition, mais nous l’avons fait manuellement. JS? Ça ne nous fait pas gagner du temps?
En fait, l’utilisation du composant React que nous avons vu dans l’article précédent peut nous épargner quelques tracas… Mais il y a un problème: il est basé sur React, ce qui signifie que nous devons charger React à l’avant pour l’utiliser. Ça a l’air trop, non? Enfin, je voudrais aborder brièvement un aspect très important, sinon votre plug – in ne fonctionnera pas: la clé de l’API Google Maps. Clé API Google Maps vous devez avoir une clé API pour utiliser Google Maps. Antonio a expliqué comment l’obtenir il y a quelques jours. Comment l’utiliser?
Une option est d’encoder notre clé API dans le plug – in. Si vous êtes le seul à pouvoir utiliser le plug – in, ça ira. Mais si vous prévoyez distribuer votre plug – in à de vrais utilisateurs, c’est une mauvaise idée, car tous les services Google ne sont pas gratuits, certains sont payants, et si tout le monde utilise votre clé, le coût peut être élevé. Que faire dans ces situations? L’idée est simple: il suffit d’ajouter une option de configuration
Soyez satisfait et donnez l’exemple pour votre projet. Comme vous pouvez le voir, il est beaucoup plus facile de traduire vos idées en projets réels si vous commencez un nouveau projet avec une bonne base, comme nous l’avons fait avec les critères de développement Gutenberg à nelio. Si vous avez des questions, veuillez nous en informer dans la section commentaires ci – dessous. Bonne chance. Photos en vedette d’Artem Bali sur unsplash.