Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress Gutenberg
Code

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

Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

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:

3. Ejecuta los Comandos Start & Build

Después de completar la configuración de la instalación, abre la carpeta de tu proyecto y ejecuta el script de inicio escribiendo el siguiente comando:

El MNP arranca el comando funciona su plugin en el modo de desarrollo. También hay un MNP ejecutar comando de compilación que le ayuda a ejecutar su plugin en el modo de producción. Siga leyendo para encontrar información acerca de tres diferentes funciones que puede realizar con el kit de herramientas de cgb.

Flujo de trabajo para create-guten-block

Cuando trabajes con este script, estarás trabajando con tres secuencias de comandos que te ayudarán a desarrollar, construir y expulsar tu plugin.

El Script npm start

Este comando se utiliza para compilar y ejecutar el bloque de Gutenberg mientras trabaja en modo de desarrollo. También relojes para cualquier cambio e informa con errores en el código.

npm start for cgb toolkit

El Script npm run build

Para trabajar de modo de producción, ejecuta este comando dentro de la carpeta dist. Aquí, verás los mensajes de construcción, los errores y las advertencias de la consola. Este comando se ejecuta sólo una vez e informa sobre el tamaño de los archivos gzip del código producido.

npm run build for cgb toolkit

El Script npm run eject

Si en algún momento quieres expulsar tu plugin de bloque de guten crear, ejecute este comando. Esto le permite personalizar el proyecto de acuerdo a sus necesidades. Sin embargo, es un proceso unidireccional y no se puede revertir.

Después de haber expulsado ( eject), tendrás que actualizar y mantener todas las dependencias del proyecto por tu cuenta.

Trabajar Con create-guten-block

Después de la instalación y configuración, puedes abrir el escritorio de WordPress y dirigirte a la sección Plugins. Aquí descubrirás que aparece un nuevo plugin llamado demo-block — CGB Gutenberg Block Plugin. Haz clic en el botón Activar ya puedes avanzar.

demo block with create-guten-block toolkit

Ahora dirígete a Entradas > Añadir nueva para abrir el editor Gutenberg. (recuerda que el plugin Gutenberg es un prerrequisito para el kit de herramientas create-guten-block).

Add new post in Gutenberg

Haz clic en el icono + para acceder a todos los bloques. Escribe CGB en el campo de búsqueda, y verás que se ha agregado un nuevo bloque Gutenberg.

Adding new gutenberg block

Pulsa sobre él y agrega un bloque Gutenberg en el editor de WordPress de la siguiente forma:

Back-end of a gutenberg block

Ahora presiona el botón Publicar para ver su aspecto en el front-end.

Front-end of a gutenberg block

¿Sorprendido? Yo lo estuve al darme cuenta de que Ahmad había aplicado un estilo distinto a los bloques Gutenberg en el front-end y el back-end. Puedes comprobarlo abriendo la carpeta src de tu plugin demo-block en tu editor de código.

Aquí, encontrarás dos archivos independientes: editor.scss que gestiona el CSS para el back-end y style.css (editor.css es agregado después de style.scss, lo que hace que su prioridad sea más alta). Ambos archivos han sido incluidos en el archivo principal block.js mediante el comando import.

Enqueued styles for cgb toolkit

Conclusión

A diferencia de otros starter kits y boilerplates, el kit de herramientas create-guten-block ofrece muchas otras características, para ser breves, aquí tienes un resumen de las principales:

  • Versiones
  • Fácil de actualizar
  • Configuraciones predeterminadas idóneas para crear un nuevo bloque Gutenberg
  • dependencia solo cgb-scripts

create-guten-block tiene licencia del MIT y está disponible de forma gratuita a través de GitHub.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.