Odiado por unos y amado por otros, está claro que el nuevo editor de bloques de WordPress no deja indiferente. Ya hace más de un mes que está entre nosotros y cada vez más plugins y temas son compatibles con él.
Como desarrollador de plugins, he de decir que adaptar nuestros productos a Gutenberg no ha sido algo que se haga en un par de días. En Nelio llevamos bastante tiempo siguiendo la evolución y desarrollo del nuevo editor de bloques para poder mantener las mismas funcionalidades de nuestros plugins sin prácticamente cambios.
Uno de los puntos clave para poder adaptar Nelio Content a Gutenberg era poder añadir botones en los bloques de texto para seguir haciendo lo mismo que ya hacíamos con TinyMCE (el editor clásico). Te recuerdo que una de las funciones más interesantes de Nelio Content es permitir seleccionar frases dentro del contenido para compartirlas en tus redes sociales directamente, o bien para marcarlas y que luego nuestro algoritmo se encargue de seleccionar las más relevantes y monte una serie de mensajes de promoción automáticos. Ya te lo expliqué anteriormente en esta otra entrada.
Para añadir botones adicionales en TinyMCE, WordPress tiene una documentación bastante completa al respecto aquí. Pero, ¿y en Gutenberg cómo lo hacemos? ¿Se puede? ¿Cómo añadimos un botón en Gutenberg?
Está claro que mantener esta funcionalidad es clave para seguir proporcionando un producto de la calidad de Nelio Content, no sólo para nuestros clientes sino también para nosotros mismos, ya que somos los primeros interesados en seguir utilizando la funcionalidad de marcado de frases en Gutenberg.
Por este motivo, me decidí a abrir un issue en el GitHub del proyecto Gutenberg explicando la problemática y pidiendo ayuda al respecto en enero del 2018 (hace casi un año, en el momento de publicar esta entrada). Allí pregunté por la posibilidad de añadir botones a los bloques de texto de Gutenberg para poder trabajar con el texto seleccionado en tales bloques.
La evolución del issue fue positiva y finalmente se añadió tal funcionalidad gracias a los Format Types de Gutenberg. Y como a día de hoy (mientras escribo esta entrada) la documentación al respecto todavía es bastante pobre, voy a explicarte cómo añadir un botón personalizado a los bloques de texto del editor de bloques, para que así no pierdas el tiempo y lo tengas más fácil que yo.
Tienes todo el código del plugin que añade un botón al editor en este repositorio de GitHub. Aunque es bastante sencillo, voy a explicar con más detalle las partes más importantes de este proyecto.
El archivo clave del proyecto es el que encontrarás en /src/js/gutenberg.js y que tienes a continuación:
La función registerFormatType es propia del core de WordPress y es la que te permite añadir un nuevo tipo de formato, junto al botón que lanza la acción. Como parámetros le pasas un nombre ('nelio/button') y un objeto JavaScript con argumentos. Entre esos argumentos, tienes el método edit, que es el que retorna un Element de React que en nuestro caso será el botón que queremos meter en el bloque.
Este botón, es un RichTextToolbarButton, que no es más que un componente React del propio editor Gutenberg que puedes encontrar definido aquí. A ese componente le pasamos un icono (que es un archivo SVG con el logo de Nelio, en este caso), el título del botón, y una función que se ejecutará cuando se hace clic en el botón.
Tal función acaba llamando a la función doTheJob, donde se coge el texto seleccionado y se pinta por consola. Ahí es donde tú puedes añadir el código JavaScript que quieras para tratar esa selección de texto.
En el atributo icon de RichTextToolbarButton se puede poner un string con el nombre de un Dashicon de WordPress en vez del SVG. Para que el SVG funcione, ten en cuenta que utilizamos el paquete svg-react-loader que convierte los archivos SVGs en elementos de React que se pueden usar tal y como has visto en el código anterior.
El código utiliza la sintaxis ES6+ para que sea más fácil de entender, pero para que funcione hay que transpilarlo con Babel, y para ello tenemos la configuración en webpack:
No entraré en detalle de para qué sirve cada línea del archivo de configuración de webpack anterior, pero si te fijas verás que usamos el loader de svg-react-loader para los archivos SVG y el loader de babel-loader para transpilar el JavaScript y convertirlo en código que funcione en cualquier navegador. Ya hablé anteriormente de todas estas cosas modernas en esta entrada.
El resultado es el archivo JavaScript gutenberg.js que aparece en /dist/js. Ahora lo que tenemos que hacer es cargar este archivo en la página de edición de WordPress para que se ejecute allí. Esto lo hacemos como siempre hemos hecho en WordPress, con un wp_enqueue_script.
Fíjate que el encolado del script lo hacemos en el hook de enqueue_block_editor_assets, que es el que nos asegura que se meterá el script solo en el editor de bloques de WordPress.
Si quieres probar el código, descárgate el proyecto de GitHub y mueve la carpeta a tu WordPress dentro de /wp-content/plugins. Allí, abre un terminal y ejecuta npm install. Tendrás que tener NodeJS instalado para que todo funcione y se instalen las dependencias necesarias para que nuestro código funcione.
Cuando tengas las dependencias y todo haya terminado correctamente, ejecuta en el terminal npm run build para que se genere el código definitivo (transpilando el JavaScript y demás). Ahora ya podrás ir a tu WordPress y activar el plugin que acabamos de meter. ¡Y a probarlo!
Al abrir una entrada para editar, verás que en los bloques de texto aparece el nuevo botón. Si seleccionas un trozo de texto y haces clic en el botón, verás que en la consola del navegador aparece el texto seleccionado. Esto ya es lo que esperábamos que sucediera tal y como vimos en el código anterior.
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
Para saber más…
Esto es sólo un ejemplo mínimo para meter un botón en un bloque de texto. Si quieres que el texto seleccionado se modifique al hacer clic en el botón, te animo a revisar el código de este plugin donde se añaden varios botones con diferentes formatos más complejos.
Por otro lado, para aquellos de vosotros que quieran todavía profundizar más en la materia, recomiendo que miréis el código del plugin GhostKit, que modifica la interfaz por defecto de Gutenberg añadiendo diferentes elementos adicionales. Además, es un código que está muy bien estructurado y que se entiendo con cierta facilidad.
En algún momento tendremos una documentación oficial y detallada sobre todos los aspectos tratados en esta entrada, pero por el momento nos toca leer código para aprender a implementar este tipo de modificaciones del editor de bloques de WordPress. ¡Ánimo!
Imagen destacada de Ashim D’Silva en Unsplash.
Deja una respuesta