Cómo agregar un botón al editor de Gutenberg

Fea por algunos amados por muchos, está claro que el nuevo editor de bloques de WordPress no lo deja indiferente. Ha estado en nosotros durante más de un mes y más complementos y temas son compatibles con él. Como desarrollador de arados, debo decir que adaptar nuestros productos a Gutenberg no era algo que se pueda hacer en unos días. En Nelio seguimos la evolución y el desarrollo del nuevo editor de bloques durante algún tiempo para poder mantener las mismas funcionalidades de nuestros complementos sin cambios significativos. Uno de los puntos clave para poder adaptar el contenido de Nelio a Gutenberg fue la capacidad de agregar botones a los bloques de texto para continuar haciendo lo mismo que hicimos con TinyMce (editor clásico). Le recuerdo que una de las características más interesantes del contenido de Neli es permitirle seleccionar frases del contenido para compartirlas directamente en sus redes sociales, o para marcarlas y luego nuestro algoritmo seleccionará los más relevantes y configurará un serie. de mensajes promocionales automáticos. Te he explicado en esta publicación.

Destacar la parte de las oraciones con el contenido de Nelio es una de las características clave. Así es como lo haces con el editor clásico. Para incluir botones adicionales en TinyMce, WordPress tiene una documentación bastante completa. Pero, ¿cómo lo hacemos en Gutenberg? ¿Cómo agregamos un botón en bloques de texto enriquecido en WordPress? Está claro que mantener esta funcionalidad es esencial para continuar proporcionando un producto de calidad, como el contenido de Nelio, no solo para nuestros clientes, sino también para nosotros mismos, porque también estamos interesados ​​en usar el resaltado de oraciones de Gutenberg. En este motivo, esta razón, Decidí abrir un número en el Proyecto Github del Proyecto Gutenberg para explicar el problema y pedir ayuda en enero de 2018 (hace casi un año, al momento de publicar esta publicación). Allí pedí la oportunidad de agregar botones a los bloques de texto de Gutenberg para trabajar con el texto seleccionado en dichos bloques. La evolución del problema fue positiva y, finalmente, tal funcionalidad se agregó debido a los tipos de formato de Gutenberg. Debido a que la documentación sigue siendo bastante débil (mientras escribe esta publicación), explicaré cómo agregar un botón personalizado a los bloques del editor de bloques, para que no pierda el tiempo y tenga un momento más fácil que yo.
Encontrará todo el código de complemento que agrega un botón al editor en este almacén de GitHub. Aunque es bastante simple, explicaré más detalles las partes más importantes de este proyecto. El archivo clave del proyecto es el que encontrará en /src/js/gutenberg.js y tiene a continuación:
La función RegistratType de registro es específica para el núcleo de WordPress y es la que le permite agregar un nuevo tipo de formato, junto con el botón que desencadena la acción. Transmita un nombre (‘Nelio/Button’) y un objeto JavaScript con argumentos como parámetros. Entre estos argumentos, tiene el método de edición, que es el que devuelve un elemento reaccionado, que en nuestro caso será el botón que queremos poner en el bloque. Este botón es un richtextTotolButton, que no es más que un componente reaccionar Un editor de Gutenberg mismo que puedes encontrar definido aquí. Este componente necesita un icono (que es un archivo SVG con el logotipo de Neli, en este caso), el título del botón y una función que se ejecutará al presionar el botón. Esta función alcanza la función DotheJob, donde se toma e imprime el texto seleccionado en la consola del navegador. Este es el lugar donde puede agregar cualquier código JavaScript que desee administrar el texto seleccionado.
En el atributo del icono RichTexToToolBarButton, puede poner una cadena con el nombre de un DashPress de Dashingon en lugar de SVG. Para que el SVG funcione, tenga en cuenta que usamos el paquete SVG-React-Loader que convierte los archivos SVG en elementos React, que estos componentes necesitan.
El código utiliza la sintaxis ES6+ para que sea más fácil de entender, pero para que funcione debe procesarlo con Babel, y para eso tenemos esta configuración en Webpack:

No entraré en detalles de lo que es cada línea del archivo de configuración de Webpack anterior, pero si lo mira, verá que usamos SVG-React-Loader para archivos SVG y Babel-Loader para procesar JavaScript y convertir en código que funciona en cualquier navegador. Ya hemos hablado de todas estas tecnologías modernas en esta publicación. El resultado es el archivo JavaScript gutenberg.js que aparece en /distrito. Ahora, lo que debemos hacer es cargar este archivo en la pantalla de edición de WordPress, usando (como siempre) wp_enquee_cript: Tenga en cuenta que el script está en la cola en gook enquee_block_editor El editor de bloques de WordPress se usa. Si desea probar el código, descargue el proyecto GitHub y mueva la carpeta a WordPress a /WP-Content /Plugins. Allí, abra un terminal y ejecute la instalación de NPM. Debe tener NodeJS instalados para que todo funcione y puede incluir las adicciones necesarias que requiere nuestro código. Cuando tenga adicciones, ejecute NPM Ejecutar Build en el terminal para generar el código final (procesamiento de JavaScript, etc.). Ahora puede ir a WordPress y activar el complemento que acabo de agregar.
El botón personalizado que acabo de agregar en un bloque de texto enriquecido en Gutenberg. Cuando abra una publicación de edición, verá el nuevo botón que aparece en los bloques de texto. Si selecciona un fragmento en el texto y hace clic en el botón, verá el texto seleccionado que aparece en la consola del navegador. Esto es lo que esperábamos que sucediera, como vimos en el código anterior. Para obtener más información … este es solo un ejemplo mínimo de cómo poner un botón en un bloque de texto. Si desea que se modifique el texto seleccionado al hacer clic en el botón, le recomiendo que revise este código de complemento donde se agregan más botones con formatos diferentes y más complejos. Mucho el tema, le recomiendo que mire el código de complemento Ghostkit, que cambia La interfaz predeterminada de Gutenberg agregando diferentes elementos adicionales. También es un código muy bien estructurado y fácil de entender. En un momento tendremos una documentación oficial y detallada que cubre todos los aspectos de esta función Gutenberg, pero por ahora debemos leer el código para averiguar cómo implementar estos tipos de editor de bloques de WordPress. ¡Suerte! Imagen presentada por Ashim d’Alva en Unsplash.