Pasar al contenido principal

Cómo Crear un Bloque para WordPress

Vamos a crear nuestro primer bloque para el Editor de Bloques de WordPress, alias Gutenberg. Vamos a crear un bloque simple que permita al usuario ingresar un mensaje y aplicarle estilos.

El tutorial incluye la configuración del entorno de desarrollo, las herramientas y el nuevo modelo de desarrollo.

Requisitos

Para tener un entorno de desarrollo funcional necesitamos:

  • Instalación funcional de WordPress
  • Node
  • NPM
  • Editor de código

Inicio Rápido

El paquete @wordpress/create-block existe para crear la estructura básica de un bloque. Revisa la documentación del paquete create-block para características adicionales. Se asume que ya tienes un entorno de desarrollo con Node y WordPress instalados.

En tu aplicación de terminal, en el directorio plugins escribe:

npx @wordpress/create-block primer-bloque

El comando arriba crea un directorio nuevo llamado primer-bloque, instala los archivos necesarios y construye el plugin de bloque. Si quieres ingresar al modo interactivo que te pide detalles, escribe el comando sin el nombre primer-bloque.

Aplicación de Terminal

Si ingresas al directorio del plugin, verás la estructura de código que conforma este bloque.

Aplicación de Terminal

La documentación aquí detallada es una traducción libre del manual para el editor de bloques (Gutenberg) en WordPress