Tutorial Gutenberg, estación de trabajo para programar bloques

Hoy vamos a hablar sobre cómo programar nuestro primer bloque de Gutenberg. Y, ¿qué mejor manera de empezar que conociendo un poco los lenguajes que usaremos para programar nuestros bloques?

Lo primero que debemos saber son los lenguajes con los que se programan bloques de Gutenberg en condiciones. El nuevo editor de WordPress trabaja con ReactJS, un lenguaje basado en Javascript. Es por ello que, desde luego, deberíamos de conocer este lenguaje o al menos estar decididos a aprenderlo.

Luego, deberíamos de saber también sobre HTML y Sass, ya que estos conformarán la estructura y aspecto de todo nuestro bloque. Y, por último, sería conveniente saber manejarnos con npm, un sistema paquetes de código bastante útil. Este último recurso nos ayudará a compilar todo nuestro código en un sólido plugin.

Programar bloques de Gutenberg nunca fue tarea fácil, pero te animamos a intentarlo.

Preparando nuestro espacio de trabajo

Una vez claros los lenguajes que usaremos, toca ahora conocer las herramientas con las desarrollaremos nuestro primer bloque. Primero, deberemos de instalarnos el npm mediante este enlace. Una vez instalado, continuaremos descargando una herramienta desarrollada por nosotros mismos para hacer más liviano el proceso de gestionar bloques. Se llama brok-guten-block, y es un repositorio de GitHub público que puede descargar y usar cualquiera para el uso que desee. Para poder descargar el repositorio simplemente iremos a este enlace y haremos click en «clone or download».

Una vez tengamos el zip, y estando en local, deberemos de llevárnoslo hasta la carpeta plugins de nuestro WordPress. Una vez hecho esto, solo tendremos que descomprimir la carpeta y activar el plugin en nuestro administrador.

Toca ahora configurar nuestro espacio de trabajo. Simplemente abriremos una terminal de comandos dentro de la carpeta de brok-guten-block y teclearemos el siguiente comando: npm install. Este comando configurará nuestro plugin instalando todas las dependencias mínimas y necesarias para empezar a programar bloques de Gutenberg.

Cualquier duda que tengas en estos pasos podremos resolverla a través de los comentarios, no tengas miedo de preguntar, no mordemos.

Comandos de consola para gestionar nuestros bloques

Una vez haya terminado el proceso anterior, podremos servirnos de los siguientes tres comandos para gestionar nuestros bloques:

• npm run create «nombre-del-bloque»: Este comando lo usaremos para crear un bloque con el nombre que queramos. El comando está programado para configurar un bloque dentro de nuestro plugin y ahorrarnos todo ese trabajo.
• npm run remove «nombre-del-bloque»: Este comando lo usaremos para borrar cualquier bloque que hayamos creado con solo indicar su nombre. El comando está programado para desconfigurar correctamente el bloque de nuestro plugin.
• npm run export: Este comando lo usaremos para exportar todos nuestros bloques dentro de un plugin y así poder transportarlo a otra instalación de WordPress.

Una vez hecho todo esto, ya tendremos todo preparado para poder empezar a programar nuestro primer bloque a mano. Como crear bloques de Gutenberg puede llegar a ser inmenso, vamos a cortar en este artículo y publicaremos próximamente uno nuevo donde empezaremos a programar.

Esperamos que os haya gustado y parecido interesante, de hecho, compartidlo si ha sido el caso. También podéis dejar un comentario debajo y dejarnos vuestras conclusiones, las estaremos esperando. Un saludo, y nos vemos en el próximo artículo, hasta otra.