Creación de bloques para Gutenberg con create-guten-block

Gutenberg es el nuevo editor de WordPress, y todo el mundo está hablando de él. Ha introducido toda una nueva forma de escribir contenido en WordPress. De manera que no sólo los desarrolladores se pueden beneficiar de su diseño modelado a base de bloques, sino que los usuarios finales también serán capaces de crear gracias a él diseños de página dinámicos.

Sin embargo, construir bloques personalizados con Gutenberg puede ser complicado para los desarrolladores que quieran integrarlo en sus proyectos. Este tutorial te presentará una increíble herramienta – create-guten-block– con la cual podras crear bloques para Gutenberg en cuestión de minutos.

De manera que, ¡empecemos!

Introducción a create-guten-block

create-guten-block (cgb) es una herramienta que no necesita configuraciones extra y que sirve para crear bloques para WordPress Gutenberg. Creado por Ahmad Awais—mi marido, desarrollador y evangelista del open-source que contribuye habitualmente para el Núcleo de WordPress—la herramienta reduce considerablemente la dificultad de crear bloques Gutenberg. No necesita ninguna configuración, y crea bloques sin efecto «lock-in» y con una única dependencia.

Para crear un bloque Gutenberg, primero necesitarás crear un plugin WordPress. Para conseguirlo, empezarás configurando Webpack, React, ES6/7/8Next, ESLint, Babel, etc., y después podrás empezar finalmente a crear el código para tu bloque. También tendrás que continuar actualizando las configuraciones de tu herramienta así como los paquetes y las bibliotecas.

Esto ralentizará el desarrollo, de manera que Ahmad a ocultado toda esta configuración en un paquete optimizado denominado cgb-scripts, que encontrarás en la carpeta raíz del bloque. Esta será la única dependencia, como ya mencioné antes.

Así que, en lugar de actualizar todo por separado y regularmente, el paquete cgb-scripts se irá actualizando, y de esta forma siempre podrás actualizarlo sin hacer ningún cambio en tu código. Esto es lo que más me gusta de esta solución.

Para abreviar la historia…

create-guten-block es la mejor opción para los desarrolladores que buscan una herramienta sin complicadas configuraciones con la que crear bloques para WordPress Gutenberg en cuestión de minutos, configurando Webpack, React, Modern JavaScript, ESLint, Babel, etc. — proyecto en GitHub.

Características

Profundicemos ahora en algunas de las características más relevantes de la herramienta.

Un entorno de desarrollo moderno

create-guten-block ofrece un entorno de desarrollo actual con el cual desarrollar un plugin para WordPress Gutenberg. Viene con características como:

• CSS auto-prefijado
• React JSX, y sintaxis ES6+
• Proceso de construcción de desarrollo/producción WebPack
• Construcción de JS, CSS, e imágenes para la producción con source-maps

Una única dependencia

El mantenimiento y las actualizaciones de todas las anteriores herramientas están gestionadas mediante una única dependencia: el paquete cgb-scripts. De manera que, a pesar de usar Webpack, Babel, ESLint, y otros increíbles proyectos, gracias a este paquete que estará actualizada en todo momento, todavía podrás disfrutar de una experiencia de desarrollo sin complicaciones.

Ninguna configuración

Mientras uses la herramienta create-guten-block, no necesitarás configurar nada. La mayoría de las cosas que necesitarás para el entorno de desarrollo y producción están ya preconfiguradas.

No hay efecto «lock-in»

Un aspecto que posiblemente preocupe a los desarrolladores antes de empezar a usar el paquete de herramientas cgb es qué hacer si un proyecto necesita alguna personalización, ya que estas herramientas están preconfiguradas para funcionar de una forma concreta. La buena noticia es que en cualquier momento podrás «extraer» tu proyecto y personalizarlo—pero entonces tendrás que mantener la configuración tú mismo.

Para extraer tu proyecto, ejecuta un sólo comando y toda la configuración y las dependencias de construcción se trasladarán directamente a tu proyecto, y podrás continuar allí donde lo dejases.

Primeros pasos

Empezar a trabajar con las herramientas de create-guten-block es muy sencillo. Simplemente instálalo y después ejecútalo para crear un plugin de bloques Gutenberg para WordPress. Pero antes de eso, hay algunos requisitos que debes configurar. Por lo tanto, asegúrate de que tener lo siguiente:

• Una instalación de WordPress en local.
• Un tema WordPress de base.
• Una copia instalada y activada del plugin Gutenberg.

A continuación, sigue estos sencillos pasos:

1. Instala Node.js y NPM

Necesitas tener node.js y npm instalados. Si ya están instalados, salta al siguiente paso. De lo contrario, descarga Node.js e instálalo. Para verificar la instalación, escribe los siguientes comandos.

2. Instala create-guten-block

Ahora, instalarás create-guten-block dentro de tu directorio local de WordPress  /wp.local/wp-content/plugins/. Además, tienes que proporcionar un nombre para el plugin que deseas crear. Ejecuta el siguiente comando y espera algún tiempo ya que puede tardar unos minutos en instalarse.

Este comando crea un directorio llamado demo-block dentro de la carpeta actual. También se crea la estructura de carpetas necesaria e instala las dependencias de desarrollo.

Crea una estructura de carpetas como esta: