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

¡Hola! Regresamos con nuestro tutorial para desarrollar en Gutenberg. La semana pasada comencé un proyecto que agregó un bloque de mapas a WordPress. En esa primera publicación, definimos los requisitos que debe cumplir nuestro complemento y hemos preparado el esqueleto de lo que será el producto final, comenzando con la fantástica calderera complementaria que creé en Nelio. Hoy viene la segunda parte del tutorial sobre cómo crear el bloque de mapas. En esta publicación veremos cómo agregar un mapa de Google Maps al editor de WordPress y cómo implementar una interfaz de usuario que nos permita manipular su comportamiento.
Un vistazo rápido al estado actual del proyecto … En el estado actual del proyecto tenemos un bloque de demostración simple de demostración en paquetes/bloques/demostración/. Este pequeño bloque es el que viene como un ejemplo en el complemento de Nelio y se ve así:

Bloque demostrativo que nuestro Boilerplata incluye de forma predeterminada en el editor de bloques. Obviamente, eso no es lo que queremos. No estamos interesados ​​en un ícono del corazón seguido de un texto, pero algo como esto:

Captura de pantalla del bloque de mapa incluida en los mapas Nelio. Quiero decir, queremos un bloque de mapa de Google con un anotador opcional. ¿Cómo podemos movernos del ejemplo del bloque original que nuestra placa tenía en este otro bloque, más fuerte? Bueno, ¡eso es lo que responderemos hoy!
Pero antes de eso, permítanme invertir unos minutos para explicar lo que tenemos ahora y cómo iremos más allá. Creo que si comprende el estado actual del proyecto, será más fácil seguir lo que sucederá. Comprender el bloque de demostración … Como dije ya, el bloque de demostración se define en paquetes/bloques/demostración/. En esta carpeta encontrará los estilos del bloque, su icono y algunos archivos con el código que implementa su funcionamiento. Veamos los archivos más importantes. Por un lado, está el archivo principal: index.js. Este archivo exporta tres variables: el nombre del bloque (nombre), la definición del bloque (configuración) y los estilos que acepta el bloque (estilo). Estas tres variables son las que se usan en paquetes/bloques/index.js para registrar el bloque en Gutenberg (con RegisterBockType) y, por lo tanto, lo ponemos a disposición de los usuarios finales. Lo creamos. En la configuración de configuración, vemos tres propiedades importantes: atributos, editar y guardar. Cada una de estas propiedades tiene su propio archivo JavaScript (en aras de la simplicidad y facilidad de comprensión), cada una llamada así por la propiedad apropiada. Echemos un vistazo rápido:
El archivo Attributes.js define todas esas propiedades de nuestro bloque que son dinámicas y, por lo tanto, deben ser modificadas por nuestros usuarios. En el caso de nuestro bloque de demostración, el único atributo que existe es el texto que escribió el usuario, pero el bloque de mapas tendrá muchas más opciones: las coordenadas del centro de mapa, el nivel de zoom predeterminado que debe usar el mapa (si los botones (si hay) debe ser visible para interactuar con el mapa, etc. El edit.js es el que define cómo se muestra el bloque en el editor de WordPress y qué configuraciones se ofrecen al usuario (tanto en la barra de herramientas como en la barra lateral de la configuración del bloque). En la demostración, Editar simplemente incluye el componente RichText de WordPress para escribir el contenido. Como veremos, el bloque de mapas será más complejo e incluirá configuraciones adicionales.
Finalmente, Save.js define el método que convertirá el bloque que editamos a Gutenberg en HTML para que se presente en el front-end. Nuevamente, en la demostración vemos que esta función simplemente guarda el contenido de un RichText usando RichText.
Creación del bloque de mapa basado en el bloque de demostración incluido en el complemento Boilerplate una vez que entendemos exactamente cómo funciona el bloque de demostración, es hora de preguntarnos: ¿cómo creamos el nuestro? Bueno, muy fácil: como Toni nos dijo hace unos días, solo tenemos que duplicar los paquetes/bloques/demostración/en paquetes/bloques/nelio-map/y comenzamos a cambiar todo lo que es necesario. Lo sé, es más fácil decirlo que hacer.
Comencemos con algo fácil: atributos.js. Este archivo contiene todas las propiedades que deben ser modificadas por nuestros usuarios finales. En la publicación anterior especificamos qué requisitos deberían cumplir con nuestro complemento y, por lo tanto, enfatizamos qué cosas deben modificarse. Bueno, echando un vistazo a los atributos. El siguiente punto a cambiar es toda la edición del bloque Gutenberg. Para hacer esto, debemos sumergirnos en el edit.js. Si mira con cuidado, verá que no es mucho más complicado que lo que teníamos en nuestro bloque de demostración original. Lo más importante es el método de renderizar el bloque (línea 33), donde recuperamos los atributos que solo tenemos. definido de un objeto llamado esto. Utilizaremos estas propiedades para jugar su bloque y configuración, por supuesto. Esto es lo que tenemos:
Una barra de herramientas de BarControls de herramientas (línea 66), que definimos en un archivo externo llamado Barra de herramientas (no se preocupe, veremos su contenido en un minuto).
La configuración del bloque que aparecen en la barra lateral del editor (línea 68), que encontramos en un componente llamado inspector que definimos en el inspector.js.
El contenido del bloque en sí, que tiene dos estados:
Si no tengo una tecla API Google Maps disponible, mostramos una notificación del usuario (línea 122).
Si tenemos esta clave, mostramos el mapa usando MapBlock (línea 83). El mapa puede incluir un marcador (línea 97), que solo es visible cuando la opción se activa y también puede ir acompañado de un DI (línea 104) con información adicional al respecto. Los mapas de Google como un componente reaccionamos si queremos poner un Google Map En nuestro editor, necesitamos usar un componente que nos permita usar Google Maps Maps. Dado que Gutenberg se basa en React, lo lógico es averiguar si hay un componente de Google Maps. Y, por supuesto, ¡hay uno!
Como puede leer en la documentación del proyecto, primero debemos agregar el componente a nuestro proyecto. Simplemente instale y agregue adicción ejecutando el siguiente comando: NPM instale react-google-map-save-dev, que agrega una nueva entrada al paquete paquete.json y descargue el paquete a node_modules. Cómo crear un componente de WordPress que encapsule un componente React si continuamos observando la documentación de este proyecto para Google Maps, veremos que recomienda que empacemos el componente GoogleMap con nuestro propio componente. Una vez que esté encapsulado, tendremos que usar nuestro componente en nuestro complemento.
Bueno, sigamos su ejemplo y creemos un componente llamado MapBlock en nuestro propio archivo map-block.js. ¡Y eso es! Ahora hemos preparado un componente de mapa que podemos usar en nuestro bloque Gutenberg. Cómo agregar configuraciones de bloque al Inspector del Editor de WordPress El siguiente paso es configurar cómo debe verse este mapa en el editor y agregar algunas configuraciones para cambiar su apariencia. Para hacer esto, debemos agregar varias secciones de configuraciones a la barra lateral de Gutenberg. Como ya hemos avanzado, hacemos esto con un componente que llamamos inspector y que definimos en el archivo inspector.js. Si observa este archivo, verá ese mismo modelo que siempre: definimos un componente con un método de renderizado. Este método extrae los atributos relevantes de esto. En este caso particular, devuelve una instancia de InspectorControls (esto le dice a WordPress que este contenido va a la barra lateral) con varias secciones de Panelboro. Veamos cada sección en detalle. Configuración básica para mapas El primer panel de paneles que encontramos (línea 47) no tiene título y, por lo tanto, siempre aparece como una sección que no se puede cerrar:
Configuración básica del bloque de mapa en mapas Neli. Elija el tamaño y el nivel de zoom con estos dos selectores.
La sección define un par de randecontrol, cuyo resultado puede ver en la captura de pantalla anterior. Estos dos comandos nos permiten cambiar la altura del mapa y su nivel de zoom. Otra sección interesante y simple es la que se encuentra en la línea 121. Aquí agregamos algunas opciones para activar o desactivar los botones que deben mostrarse en el mapa cuando se muestre en el frente: Establezca qué mapa será visible en el frente. .
Para hacer esto, simplemente debemos usar el componente predeterminado de checkPass de WordPress.

Cómo agregar una sección de estilo personalizada para nuestro bloque de mapa Otra sección interesante de nuestro bloque es la sección de estilo (línea 68). Puede ver el resultado final en la siguiente captura de pantalla:
Puede cambiar la apariencia del mapa utilizando la sección de estilos en la configuración del bloque.

Es una sección especial porque el componente que usamos (mapstyles) no es algo que exista de forma predeterminada en WordPress, sino algo que creamos para este bloque en particular. Como puede ver en el enlace anterior, es un componente que carga un conjunto de estilos predefinidos en un componente del tipo de inspección Image (que, de hecho, en WordPress no existe, puede encontrarlo en paquetes/componentes/imagen de imagen /). Cuando el usuario selecciona cualquiera de los estilos incluidos en ImagePicker, el componente Mapstyles invoca la función OnChange que se ha dado (consulte la línea 76 del inspector.js) Pasando dos valores: el nombre del estilo seleccionado y asociado. Finalmente, observe que una de las opciones que incluye Mapstyles es un estilo personalizado:
Además de los 5 estilos predeterminados incluidos en el bloque, existe la posibilidad de agregar el estilo de mapa propio usando un JSON. Cuando se selecciona, el componente reproduce un cuadro de texto adicional (línea 45), de modo que el usuario pueda ingresar su propio estilo En formato JSON. En caso de que no lo supieras, ¡los mapas de Google Maps pueden ser muy personalizados! Cómo agregar un anotador en nuestro mapa La siguiente sección que tenemos es la que controla nuestro marcador (línea 81). Esta sección nos permite mostrar u ocultar el anotador (línea 86) y, cuando está activo, nos da algunas configuraciones adicionales:

El bloque le permite agregar un anotador al mapa para indicar un cierto punto.
Como puede ver, un cuadro de búsqueda parece buscar ubicaciones en Google Maps (que hemos implementado, nuevamente, con un componente personalizado llamado direcciones) y la capacidad de mostrar u ocultar el bloque de texto en el que colocar información adicional sobre el marcador . Por cierto, observe que el componente directorio se basa en un componente llamado StandalonesearchBox, que también forma parte del proyecto React. ¡Qué placer es reutilizar el trabajo de los demás! Cómo configurar la barra de herramientas de un bloque Lo último que necesitamos discutir es la barra de herramientas. Si comprende cómo funciona la barra lateral, la barra de herramientas es fácil.
La barra de herramientas ofrece acceso rápido a las opciones más importantes en el mapa de mapas Neli.

La barra de herramientas de nuestro complemento está representada por la barra de herramientas de componente definidas en la barra de herramientas.js. Aquí simplemente agregamos un componente para definir la alineación del bloque (BlocknientToolBar, en la línea 42), un par de menús caídos para centrar el mapa (línea 50) y para modificar la ubicación del marcador (línea 79) y algunos botones adicionales a Cambie la ubicación del cuadro de texto en el que podemos poner información adicional sobre el marcador (líneas 107 y 120). Con la búsqueda integrada de la ubicación, puede buscar cualquier empresa o dirección sin dejar el editor de bloques.
En conclusión hoy vimos cómo crear toda la interfaz de edición de nuestro bloque de mapas. Como puede ver, es un proceso que puede parecer complicado a primera vista, pero se vuelve bastante natural. Finalmente, el secreto es comenzar a partir de un ejemplo bien organizado (como nuestro complemento Boilerplate) y desarrollar la interfaz paso a paso, reutilizando los componentes que WordPress ofrece o ya existe, o incluso creando la suya. Nos vemos la próxima semana con la última parte de este tutorial, donde veremos cómo guardar nuestro mapa y cómo verlo en el front-end. Imagen presentada por RawPixel en unssplash.