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

Hace unos días publiqué un nuevo complemento en el director de complementos WordPress.org: Nelio Maps. Como revela el nombre, es un enchufe de mapa que agrega un nuevo tipo de bloque al editor de WordPress. Con él, podemos agregar fácilmente un mapa de Google a nuestras páginas o publicaciones. Así es como se ve:

El complemento Nolio Maps le permite insertar y personalizar un mapa de Google en sus páginas y publicaciones.
Nelio Maps es uno de nuestros primeros complementos que están completamente diseñados para Gutenberg. A pesar del hecho de que es un enchufe relativamente simple, es un producto muy útil. Por un lado, porque cualquier usuario que quiera agregar mapas a su sitio web ahora puede hacerlo instalando un complemento simple y fácil. Por otro lado, debido a que cualquier desarrollador que quiera desarrollarse en Gutenberg ahora tiene un ejemplo real sobre cómo crear un complemento “cero”, simplemente leyendo esta publicación.
Debido a que soy consciente de que el desarrollo de un complemento como este no es lo más fácil del mundo, organicé este tutorial en tres partes diferentes. Hoy explicaré cómo crear el complemento “desde cero”, para que llegemos con el esqueleto que usaremos para construir el producto final. En la segunda publicación, explicaré cómo obtener un mapa interactivo en el editor de bloques de WordPress y veremos todos los componentes que creamos para hacer el complemento. Finalmente, en la tercera y última publicación veremos cómo guardar el mapa en la base de datos y cómo podemos mostrarlo en Frontand.
Definir nuestro proyecto y el complemento que queremos puede parecer una verdad, pero antes de lanzarnos con cualquier proyecto nuevo, lo primero que debemos hacer es definir lo que queremos hacer con el proyecto. Dependiendo de las funcionalidades que queremos incluir, tendremos un conjunto diferente de requisitos. Entonces, para definir qué tipo de complemento para los mapas que queremos implementar en este tutorial. Estos son los requisitos del proyecto: deberían poder agregar un mapa (o más) a sus páginas o publicaciones.
Debería ser posible enfocar el mapa en cualquier lugar
ya sea tirando del mapa con el mouse
o buscando ubicación en un cuadro de búsqueda.
El tamaño del mapa debe ser ajustable tanto el ancho como la altura
El mapa debe incluir diferentes estilos (en blanco y negro, paletas de colores personalizadas, etc.)
El usuario debe poder agregar un anotador al mapa.
Si hay un anotador, el mapa debe ir acompañado de un cuadro de texto con información de marcado adicional.
Ambicioso, ¿verdad? ¡Bueno, comencemos!
Cómo crear un complemento Gutenberg “desde cero” Si estaba viendo nuestro blog, probablemente vio que hace unos días Antonio ha publicado una publicación que explica cómo crear complementos usando un complemento de Boilerplate que creamos en Nolio. Si aún no ha leído su publicación, le recomiendo que la lea primero, porque nuestro complemento dependerá del complemento WP-BEB Boilerplate que lo explica allí. Para comenzar nuestro proyecto, lo primero que haremos es el espejo del complemento Boilerplate de Neli. Primero, cree un nuevo almacén en su cuenta de GitHub. Luego siga los pasos descritos en las páginas de ayuda de GitHub para reflejar nuestra placa:
Git Clone — Bare https://github.com/avillegasn/wp-beb.git cd wp-beb.git git git push —- Arror https://github.com/your-username/your-repo. Git Una vez que su proyecto esté listo, siga las instrucciones encontradas en ReadMe.md para compilar el proyecto y, por lo tanto, puede verlo en su sitio web de WordPress. Cómo transformar el complemento Boilerplate en su complemento tal como aparece en la documentación estándar del complemento, lo primero que debemos hacer es cambiar el nombre del proyecto en el código fuente. Es decir, debe cambiar todas las ocurrencias de wp-beb (letras de mayúsculas y minúsculas, con guiones o guiones subrayados) con el nombre de nuestro complemento (en mi caso, no mapas). Para esto, podemos usar el siguiente guión:

Tenga en cuenta que deberá reemplazar la línea de mapas de Nolio en las líneas 5, 8, 9 y 10 con cualquier nombre de su complemento en el otro, ahora es un buen momento para cambiar la documentación del complemento. Por un lado, debe editar los archivos ReadMe.md y ReadMe.txt para reflejar el propósito de su nuevo complemento (sin olvidar que usa nuestros BoilerPlata como base, por supuesto). Por otro lado, debe cambiar el primer comentario en el archivo PHP principal, porque son los datos que WordPress usa para mostrar la pantalla del complemento.
Puede ver cómo realizamos todos estos cambios en el primer comité del proyecto Neli Maps. Cómo limpiar la placa de complemento de cosas innecesarias El complemento estándar de Nelio incluye algunos componentes: (a) un bloque demostrativo y (b) un complemento Gutenberg. Debido a que solo estamos interesados ​​en crear un bloque (mapa), eliminaremos todo lo que quede (complemento Gutenberg). Este paso es bastante simple, porque se basa prácticamente en la “eliminación” de las cosas innecesarias en el complemento. Específicamente, debe: deshacerse de todo el contenido que aparece en la carpeta de activos (que es el lugar donde se agregó el complemento Gutenberg, su estilo e icono).
Limpie el archivo webpack.config.js, porque hay algunas reglas que han usado los archivos en los activos que acabamos de eliminar.
Limpie el archivo principal del complemento, porque coloca una hoja de estilo y un archivo JavaScript que ya no existe.
Puedes ver todos los cambios en este cometido. Si compila el código nuevamente, verá que el bloque de demostración todavía existe, pero el complemento Gutenberg que apareció en la esquina superior derecha de la pantalla no existe.
Resumen En la publicación de hoy vimos cómo crear un complemento para Gutenberg. En primer lugar, definimos el tipo de proyecto que queremos crear e identificamos sus requisitos. A continuación, vi los pasos necesarios para adaptar el complemento Boilerplate de Nolio a un nuevo proyecto. Quiero decir, vimos cómo clonar el proyecto de calderas de Nelio y limpiarlo para satisfacer nuestras necesidades particulares. Nos vemos la próxima semana con la segunda parte de este tutorial, donde cambiaremos el bloque de demostración para realizar todas las funciones que describimos al comienzo de esta publicación.