Desarrollo de Gutenberg con ejemplos: Google Maps (Parte 3)

Bienvenido a la tercera y última publicación sobre cómo crear un complemento para mapas para Gutenberg. Nuestra última publicación fue bastante densa y vimos muchas cosas diferentes: los atributos que tiene nuestro bloque, cómo insertar un mapa usando un componente React, cómo usar componentes de WordPress o incluso crear nuestros propios componentes para definir la interfaz de usuario, etc. Hoy discutiremos algo más simple. En esta publicación, veremos cómo jugar el mapa de Google Maps en front-end. Para hacer esto, echaremos un vistazo más de cerca a Save.js y haremos algunos cambios en el complemento para que todo funcione según las expectativas. También usaré esta última publicación para comentar sobre cualquier punto que podría haber estado poco claro hasta ahora.
Cómo guardar nuestro bloque de mapa para mostrarlo en el front-end para mostrar el mapa en el front-end, primero debemos definir el HTML que queremos jugar en la parte delantera. En un bloque de Gutenberg, esto se hace definiendo el método Guardar de la función RegistroBlockType. Como ya he mencionado en la publicación anterior, este método se define en el archivo save.js en paquetes/blocks/neli-maps/. Nuevamente, esta es una función extremadamente simple de entender:
De la fila 7 a 25 extraemos todos los atributos que son relevantes para nuestro bloque. Es decir, todos los atributos que definimos en atributos.js y que cambian la apariencia de nuestro mapa.
En la línea 41 abrimos el DIV que servirá como un contenedor de bloque.
En la línea 47 encontramos un div que terminará el mapa en sí. Mire algo muy interesante: esta DI incluye todos los objetos de atributos en su definición. Esto significa que todas las propiedades en los atributos (por ejemplo, ‘Data-Lat’: Latin 34) se representarán como atributos HTML (por ejemplo, suponiendo que la amplia variable sea 2,48171, LAT aparecerá en el HTML final como datos -Lat = “2.48171”). Date-lat = “2.48171”). Por línea 49, se agrega un pequeño DIC que contiene las coordenadas del marcador.
En la línea 59, el contenido de RichText que definimos en Edit.Js.
Entonces, en esencia, el método de guardado genera un HTML que contiene todos los atributos que son relevantes para reproducir un mapa en el front-end. Entonces, ¿qué podría salir mal? Bueno, si tuviera que abrir el front-end ahora, todo lo que ves sería lo siguiente:
Captura de pantalla donde se debe ver un mapa. Oh, espera … ¿Qué está pasando? Un bloque vacío que solo tiene contenido de Richtext. ¿Qué sucedió? Es necesario cambiar el complemento para reproducir un mapa de Google creado con nuestro bloque Gutenberg para mostrar un mapa de Google en front-end es necesario para cargar la biblioteca de Google Maps y un script para usarlo para construir el mapa en sí. Esto es extremadamente simple y si alguna vez ha desarrollado para WordPress, debe saber cómo hacerlo. Lo primero que debemos hacer es crear un script que pueda crear un mapa de Google utilizando los datos que ingresamos en HTML. Este guión está en activos/src/js/public/public.js. Eche un vistazo más de cerca para comprender cómo funciona:

En el turno 9, buscamos todos los nodos que contienen un mapa (filtrado de acuerdo con una de las clases que hemos incluido en el método Guardar) y, para cada uno de ellos, llamamos al método initGooglEmap. Este método se basa en dos funciones que hacer el trabajo. Por un lado, extraiga las coordenadas de un posible marcador con la función de extracto de marposionection de la línea 55 y, por otro lado, extraiga todas las propiedades del mapa (las coordenadas del centro, el nivel de zoom, la lista de visibles Botones, etc.) La función de ExtractMapOptions de la línea 26. Tenga en cuenta que ambas funciones simplemente están dedicadas a leer los valores de los atributos de datos que puse en el método Guardar.
Finalmente, creamos un mapa (línea 18) y agregamos un marcador (línea 21) utilizando las clases de mapa y marcador, respectivamente, proporcionado por la biblioteca de Google Maps.
Ahora que tenemos este script, solo necesitamos dos cambios adicionales en nuestro proyecto:
Por un lado, necesitamos cambiar el archivo de configuración webpack webpack.config.js, para que publique.js que acabamos de crear. Puede sonar difícil, pero en realidad es fácil: mire los cambios que hicimos en ese archivo en esta confirmación.
Por otro lado, debemos cambiar el complemento para poner este nuevo script (¡y Google Maps!) En front-end. Nuevamente, un cambio muy simple que puedes ver en este compromiso.
Una vez que se han realizado todos estos cambios, este es el resultado final:
Captura de pantalla de un mapa de Google con el complemento Nolio Maps en el front-end. Sé en qué piensas: ¿por qué, en lugar de hacer todo esto manualmente, no usé el componente React que usamos en Edit.JS? ¿Esto no ahorraría algo de tiempo?
De hecho, el uso del componente React que vimos en la publicación anterior nos habría ahorrado de algunos problemas … pero hay una trampa: se basa en React, lo que significa . Y eso parece demasiado, ¿no te parece? Hoy al final, permítame discutir brevemente un aspecto que sea muy importante, de lo contrario, su complemento no funcionará: la clave API Google Maps. La tecla API de Google Maps Para usar Google Maps, debe tener una tecla API. Cómo conseguirlo es algo que Antonio nos explicó hace unos días. Ahora, ¿cómo lo usamos? Una opción sería codificar nuestra tecla API en el complemento. Si usted es el único que usa el complemento, eso haría el truco. Pero si tiene la intención de distribuir su complemento a usuarios reales, es una muy mala idea, porque no todos los servicios de Google son gratuitos: algunos se pagan y los costos pueden ser bastante caros si todos usan su clave. ¿Qué hacer en estos casos? La idea es muy simple: agregue solo una opción de configuración en el complemento para que las personas introduzcan su propia clave API. En nuestro caso, si agrega un mapa de clave API libre, verá el siguiente mensaje de advertencia:


Mensaje de advertencia que se muestra al usuario cuando no hay clave API disponible.
instándole a agregar la tecla API. Por lo general, crearía una página especial para administrar la configuración de su complemento. Pero para un complemento tan fácil y simple como el que creamos, pensé que es más fácil si optamos por una solución diferente. En WordPress hay una pantalla de opciones en /wp-admin/options.php que se ve así:
Cómo agregar la clave API de configuración de WordPress. Es una especie de “interfaz simpatiza” para editar (casi) todas las opciones que se han registrado en WordPress y están en la tabla WP_OPTIONS. Por lo tanto, todo lo que nuestro complemento tiene que hacer es asegurarse de que esta opción siempre exista en la base de datos (incluso cuando todavía no hay clave establecida) y tendremos una “interfaz hermosa” para que el usuario se quede con la tecla API sin hacer nada. . ! To achieve this, use Init Hook (see line 73 of this Commit) with a function (line 134) that always sets a value of the key option. Si la opción aún no existe, esta función establecerá su valor en el valor predeterminado (una cadena vacía) y guardará la opción. Si ya ha existido, el nuevo valor será el mismo que ya tenía y, por lo tanto, la función de actualización no hará nada. ¡Un truco inteligente y efectivo! En conclusión, en esta publicación superamos la última barrera de nuestro proyecto: cómo guardar el mapa y cómo mostrarlo en el front-end. Básicamente, todo lo que necesitaba era un DIT con toda la información relevante sobre el mapa (su centro, las opciones de mostrar los botones, el marcador, etc.) y un pequeño script para reconstruirla en el front-end.

Espero que este tutorial le agradezca y sirva como ejemplo para emprender sus propios proyectos. Como puede ver, si comienza un nuevo proyecto con una buena base, como la que creamos en Nelio con el plan de desarrollo de Gutenberg, será mucho más fácil materializar sus ideas en proyectos reales. Si tiene alguna pregunta, cuéntanos en la sección de comentarios a continuación. ¡Suerte! Imagen presentada por Artem Bali en Unsplash.