Desarrollo Gutenberg con ejemplos: Google Maps (parte 1)

No sé si te has enterado, pero hace unos días publicamos un nuevo plugin en el directorio de plugins de WordPress.org: Nelio Maps. Tal y como el nombre desvela, se trata de un plugin de mapas que añade un nuevo tipo de bloque en el editor de WordPress. Con él, podemos añadir fácilmente un mapa de Google en nuestras página o entradas. Te dejo con una captura del plugin en cuestión:

Nelio Maps es uno de nuestros primeros plugins íntegramente diseñado para Gutenberg. A pesar de ser un plugin relativamente sencillo, se trata de un producto muy útil. Por un lado, porque cualquier usuario que quiera añadir mapas a su web ahora puede hacerlo instalando un plugin sencillo y ligero. Por otro lado, porque cualquier desarrollador que quiera ponerse a desarrollar en Gutenberg ahora tiene un ejemplo real de cómo crear un plugin «desde cero», simplemente leyendo esta entrada.

Como soy consciente de que el desarrollo de un plugin como este no es lo más sencillo del mundo, he organizado este tutorial en tres entradas diferentes. Hoy te explicaré cómo crear el plugin «desde cero» y dejar montado el esqueleto con el que trabajar. En la segunda entrada te explicaré cómo conseguir tener un mapa interactivo en el editor de bloques de WordPress y veremos todos los componentes que he creado para hacer un plugin con un acabado profesional. Y en la tercera y última entrada veremos cómo guardar el mapa en la base de datos y cómo podemos visualizarlo en el front-end de nuestra web.

Definición del tipo de plugin que queremos crear

Puede parecer una perogrullada, pero antes de embarcarnos con cualquier nuevo proyecto, lo primero que debemos realizar es definir qué es lo que queremos conseguir con nuestro proyecto. En función de las funcionalidades que queramos incluir, tendremos unas necesidades u otras. Así que vamos a definir qué tipo de plugin de mapas queremos implementar en este tutorial.

Estos son los requisitos del proyecto:

1. Queremos poder añadir un mapa (o más de uno) a una página de nuestra web
2. El mapa tiene que poder centrarse en cualquier punto del globo
   1. O bien arrastrando y soltando el mapa
   2. O bien buscando la ubicación en un cuadro de búsqueda
3. El tamaño del mapa tiene que poder modificarse, tanto en ancho como en alto
4. El mapa tiene que poder presentarse con diferentes estilos (en blanco y negro, con una paleta de colores diferente, etc)
5. El mapa tiene que poder incluir un marcador señalando una ubicación concreta
6. Si existe un marcador, el mapa tiene que estar acompañado por un cuadro de texto con información adicional sobre dicho marcador.

Ambicioso, ¿verdad? Pues venga, ¡manos a la obra!

Cómo crear nuestro plugin Gutenberg «desde cero»

Si sigues nuestro blog, habrás visto que hace unos días Antonio publicó una entrada explicando cómo crear plugins usando un modelo que hemos creado en Nelio. Si no has leído su entrada, te recomiendo que empieces por ahí, porque nuestro punto de inicio será, precisamente, el plugin boilerplate wp-beb que Antonio explica ahí.

Para empezar nuestro proyecto, lo primero que haremos será realizar una copia de este plugin boilerplate. Para ello, crea un nuevo proyecto en tu cuenta de GitHub y sigue las instrucciones que hay en la ayuda de GitHub para crear una copia de otro repositorio:

git clone --bare https://github.com/avillegasn/wp-beb.git
cd wp-beb.git
git push --mirror https://github.com/tu-usuario/tu-repo.git

Una vez tienes creado el proyecto, sigue las instrucciones del README.md, podrás compilar y ver el resultado del plugin de ejemplo en tu WordPress.

Nelio Unlocker

Pásate a WordPress manteniendo tus diseños y contenidos

Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.

Pruébalo ya

Cómo convertir la copia del plugin boilerplate en nuestro plugin

Tal y como aparece en la propia documentación del plugin boilerplate, lo primero que tenemos que hacer es cambiar el nombre en el código fuente. Es decir, hay que cambiar todas las apariciones de wp-beb (tanto en mayúsculas como en minúsculas, con guiones o con guiones bajos) por el nombre de nuestro plugin (en mi caso, nelio-maps).

Para ello, podemos usar el siguiente script:

en el que obviamente deberás cambiar los nelio maps de las líneas 5, 8, 9 y 10 por el nombre de tu plugin.

Por otro lado, ahora también es un buen momento para cambiar la documentación del plugin. Es decir, por un lado tienes que editar los ficheros README.md y readme.txt para que reflejen el propósito de tu nuevo plugin (sin olvidar hacer una mención al hecho de que estás usando nuestro boilerplate como base, claro). Y, por otro, deberás cambiar el comentario inicial del fichero principal.

Puedes ver cómo realicé todos estos cambios en el primer commit del proyecto Nelio Maps.

Cómo limpiar el proyecto modelo para quedarnos con lo que nos interesa

El plugin boilerplate de Nelio incluye, por defecto, un par de componentes: un nuevo bloque de demo y una extensión en la barra lateral de Gutenberg. Dado que a nosotros nos interesa únicamente crear un bloque (el de mapas), vamos a eliminar todo aquello que nos sobra (la barra lateral de Gutenberg).

Este paso es bastante sencillo, puesto que básicamente se basa en «borrar» cosas innecesarias del plugin. En concreto, deberemos:

1. Deshacernos de todo el contenido que aparece en la carpeta assets (que es donde se añadía esa barra lateral, su estilo y su icono).
2. Limpiar el fichero webpack.config.js, puesto que existen un par de reglas que usaban los ficheros de assets que acabamos de cargarnos.
3. Limpiar el fichero principal del plugin, puesto que encola una hoja de estilos y un fichero JavaScript que ya no existen.

Puedes ver todos los cambios en este commit. Si vuelves a compilar el código, verás que sigue existiendo el bloque llamado Demo, pero ya no está el plugin de Gutenberg que sí teníamos originalmente.

Resumen

En la entrada de hoy hemos visto cómo crear un plugin para Gutenberg. En primer lugar, hemos definido el tipo de proyecto que queremos realizar y hemos identificado qué necesitaremos para llevarlo a cabo. A continuación, hemos visto los pasos necesarios para adaptar el plugin boilerplate de Nelio a un nuevo proyecto. Es decir, hemos visto cómo clonar el proyecto y limpiarlo de polvo y paja.

Nos vemos la semana que viene con la segunda parte de este tutorial, donde modificaremos el bloque de demostración para que realice todas las funciones que hemos descrito al principio de nuestra entrada.

Imagen destacada de Brett Zeck en Unsplash.