Cómo crear bloques para gutenberg con create-guten-block

Una vez hemos visto el post introductorio a Gutenberg, el nuevo editor de WordPress, vamos con CREATE-GUTEN-BLOCK, una herramienta para crear bloques para Gutenberg. En este artículo, mencionaré algunas configuraciones básicas para crear un bloque y así poder hacer, en un futuro, tareas más complejas. Partiremos después de haber generado un bloque con el comando “npx create-guten-block my-block“. La información para instalar esta herramienta se puede encontrar en el github del autor y los parámetros de los que hago uso son de la documentación oficial del WordPress.

El tutorial está orientado para usuarios con experiencia en la creación de plugins para WordPress, Node, JavasSript y CSS.

Tutorial

1. Creación de nuestro plugin block:

Creamos nuestro bloque con los siguientes comandos.

2. Estructura de nuestro bloque:

Tendremos la siguiente estructura (solo mostraré los archivos más destacados para este tutorial). Solo haremos uso de los archivos que se encuentran en la carpeta src/block.

3. Personalización de la presentación de nuestro bloque

Por defecto, el generador nos configura un bloque con el identificador de nuestro bloque y datos del autor de la herramienta. Así que ahora nos toca darle una apariencia más personal tocando los siguientes archivos:

3.1. Configuración del plugin

3.2. Configuración del bloque

4. Configuración de estilos para un bloque

En esta sección configuraremos clases por bloque y así poder definir diferentes apariencias para cada una de ellas. Para ello haremos uso del atributo styles de la siguiente manera:

Para dar estilos a las clases que hemos creado, tendremos que editar los archivos sccs y con el fin de mantener una buena organización de la estructura haremos unos pequeños cambios en el siguiente orden:

Common.scss: Aquí mantenemos los parámetros que compartiremos a lo largo del proyecto.

Luego existen dos archivos scss: src/block/editor.scsssrc/block/style.scss. En el archivo editor.scss se puede añadir estilos que solo se visualizarán en la zona de administración y en el style.scss son los estilos que afectarán tanto en la zona de administración como en la zona pública. Por ejemplo, si modificamos el archivo style.scss, se podrá visualizar los parámetros configurados en el editor (recordemos que los estilos configurados, se añade “is-style-” al inicio):

Este es el resultado:

Styles block gutenberg

5. Creación de campos

Por defecto, el generador nos brinda información estática de un bloque, es decir un texto html que se muestra tanto en el editor como en la zona pública. Sin embargo, habrá un momento en nuestra vida en el que necesitemos personalizar alguna información. Para ello intentaremos crear inputs básicos de la manera más sencilla, con el parámetro “attributes“.

Para empezar, declararemos la variable el (una herramienta para crear elementos) y los campos title y content, por ejemplo:

Luego, dentro del parámetro edit, creamos los inputs correspondientes a cada atributo creado así como las funciones que se encargarán de guardar cualquier cambio detectado en los campos con sus atributos.

Por último, haciendo uso también de la variable el, generaremos el html que se guardará de la siguiente manera:

También añadiremos nuevos estilos en el archivo editor.scss para los campos creados:

El resultado final se vería de la siguiente manera en la zona admin:

Block Gutenberg Edit

 

En conclusión, después de haber trabajado un poco con Gutenberg, me parece un buen editor. Al principio puede confundir al desarrollador pero una vez que se explora en su interior, resulta bastante sencillo a la hora de parametrizar.

Hasta este punto he hablado sobre los aspectos más basicos para poder crear bloques con Gutenberg. Espero que os sea de utilidad. En próximos tutoriales, mostraré cómo trabajar con campos más complejos como imágenes o textos enriquecidos.



¿Te gusta este post? Es solo un ejemplo de cómo podemos ayudar a tu empresa...
Sobre Victor Vargas

Desarrollador de aplicaciones web y móviles. Mi experiencia se extiende en el desarrollo de módulos, plugins, scripts y temas para diversas plataformas como Wordpress, Prestashop, Magento, MediaWiki, CRM, Odoo, etc.

1 Comentario

¿Por qué no comentas tú también?

Queremos tu opinión :)