El desarrollo en WordPress se está modernizando a pasos agigantados. Si hace unos días te hablé de las tecnologías actuales que ya están presentes en la versión 5 de nuestro gestor de contenidos, hoy toca enseñarte cómo desarrollar plugins para WordPress teniendo en cuenta las posibilidades del nuevo editor de bloques.
Para ello, te voy a describir el modelo o plantilla (boilerplate, en inglés) que estamos utilizando en Nelio para nuestros desarrollos en WordPress con base JavaScript.
Tienes todo el código de nuestro plugin boilerplate para WordPress liberado en GitHub, así que ya no tienes excusa alguna para no modernizarte y ampliar tus horizontes como desarrollador.
WordPress Block Editor Boilerplate
La idea principal de crear un proyecto que sirva de base para la creación de nuevos plugins para WordPress surge de nuestra propia necesidad como desarrolladores de tener una organización de archivos común y estable, además de poder unificar y estandarizar todos nuestros proyectos.

Inspirados en el conocido WordPress Plugin Boilerplate, nuestra idea es hacer algo parecido pero centrado en plugins que extiendan el editor de bloques con un stack de desarrollo más moderno utilizando compiladores, transpiladores, empaquetadores y, en definitiva, herramientas de desarrollo comunes hoy en día para proyectos JavaScript.
Instalación y proceso de desarrollo
El modelo de plugin que hemos creado como base se puede descargar directamente desde GitHub y mover al directorio de plugins (/wp-content/plugins/
) de tu instalación WordPress.
Si tienes un terminal a mano y estás en el directorio, es tan sencillo como ejecutar el siguiente comando (suponiendo que tienes GIT instalado):
git clone https://github.com/avillegasn/wp-beb.git
Esto descargará la carpeta del plugin con todo el contenido. Tendrás que renombrar tanto esta carpeta como los contenidos para utilizar el nombre que quieras. Por ejemplo, si tu plugin se va a llamar 'mi-ejemplo'
:
- renombra los archivos de
wp-beb
ami-ejemplo
- cambia
wp-beb
pormi-ejemplo
- cambia
wp_beb
pormi_ejemplo
- cambia
WP_BEB
porMI_EJEMPLO
Una vez has hecho esto, para compilar el plugin y generar el código final tienes que hacer lo siguiente:
npm install && npm run build
Ten en cuenta que previamente necesitarás tener instalados las siguientes herramientas:
Cuando acabe el proceso ya tendrás una nueva carpeta dist
con los archivos compilados y ahora ya podrás activar el plugin sin problemas en tu WordPress.
El comando npm install
descargará las dependiencias de Node.js y PHP en los directorios node_modules
y vendor
, respectivamente.
Además del comando anterior, nuestro modelo de plugin proporciona los siguientes comandos adicionales:
npm run watch
Compila los archivos y repite el proceso automáticamente en cuanto detecta un cambio en los archivos JavaScript y CSS.npm run build
Compila y minifica los archivos JS y CSS.npm run lint-php
Ejecuta PHP_CodeSniffer en los archivos PHP para detectar errores.npm run lint-php:fix
Ejecutaphpcbf
para intentar arreglar errores en los archivos PHP.npm run lint-css
Ejecutastylelint
en archivos SCSS para detectar errores.npm run lint-css:fix
Intenta arreglar errores en archivos SCSS.npm run lint-js
Ejecutaeslint
en archivos JS para detectar errores.npm run lint-js:fix
Intenta arreglar errores en archivos JS.npm run lint
Ejecuta un proceso de linting en archivos PHP, SCSS y JS.npm run update:packages
Actualiza los paquetes de dependencias de Node.js.
Lo habitual es que ejecutes npm run watch
mientas estés desarrollando código para que se vayan compilando los cambios automáticamente. Una vez quieras generar el código final, con npm run build
lo tienes hecho.

Nelio Unlocker
Pásate a WordPress manteniendo tus diseños y contenidos
Mejora hoy mismo el SEO de tu web y acelera su velocidad de carga convirtiendo tus páginas a estándares HTML, CSS y WordPress. No necesitas conocimientos técnicos y solo pagarás por aquello que necesites.
Contenidos y estructura de archivos
Nuestro WordPress Block Editor Boilerplate incluye los siguientes archivos y directorios:
.babelrc
. Archivo de configuración de Babel..editorconfig
. Archivo EditorConfig que tu editor de código puede entender para que algunos estilos de formato del código sean consistentes para todos los desarrolladores que participen en el proyecto..eslintignore
. Usado para excluir algunos archivos del proceso de linting de ESLint..eslintrc
. Archivo de configuración de ESLint..gitattributes
. Archivo de texto que asigna atributos a rutas de archivo en Git..gitignore
. Usado para excluir ciertos archivos del repositorio.composer.json
. Describe las dependencias PHP del proyecto y puede contener también metadatos adicionales.composer.lock
. Usado para que los diferentes programadores que participen en el proyecto tengan las mismas versiones de las dependencias PHP.index.php
. Sirve para ocultar la estructura de archivos en el servidor.LICENSE.txt
. Copia de la licencia GNU GPL v2.package-lock.json
. Usado para mantener las mismas versiones de las dependencias NPM para todos los desarrolladores que participen en el proyecto.package.json
. Manifest para el proyecto. Repositorio central de la configuración donde encontrarás los nombres de los paquetes requeridos y los comandos que puedes utilizar (y que ya te expliqué antes).phpcs.ruleset.xml
. Archivo de configuración de PHP_CodeSniffer.postcss.config.js
. Archivo de configuración de PostCSS.README.md
. El archivo con la explicación del proyecto e instrucciones adicionales sobre este.readme.txt
. Plantilla del típico readme para un plugin WordPress.webpack.config.js
. Archivo de configuración para webpack.wp-beb.php
. Archivo principal del plugin para WordPress.- Directorio
assets
que contiene el CSS, JS y recursos de imagen. - Directorio
languages
que contiene los archivos de traducción del plugin (i18n). - Directorio
packages
que contiene definiciones de los bloques adicionales que añadimos al editor de bloques de WordPress.
A parte de todo esto, una vez compilas el proyecto aparece el directorio dist
con los archivos compilados, el directorio vendor
con dependencias y ejecutables para PHP, y el directorio node_modules
con dependencias y ejecutables para NPM y JavaScript.
Añadir un nuevo bloque al editor de bloques de WordPress
Lo interesante del WordPress Block Editor Boilerplate que te estoy presentando es la manera de usarlo. Una vez lo tengas descargado y compilado, al activarlo verás que incluye un único bloque Demo en el editor.

El bloque de demo incluye dos estilos adicionales al bloque, que no es más que un texto precedido del dashicon de un corazón, como puedes ver en la captura anterior.
El código JavaScript que añade este bloque en el editor lo encontrarás en packages/blocks/demo
(míralo aquí). Si quieres eliminarlo, sólo tienes que borrar el directorio demo
, borrar su importación y uso en el archivo packages/blocks/index.js
y listo.
Además, el código está bien dividido en diferentes archivos, cada uno de estos incluyendo una parte diferente de los parámetros que la función registerBlockType
necesita.
Por otro lado, si lo que quieres es añadir un bloque adicional, duplica el directorio packages/blocks/demo
y ponle el nombre que quieras para tu bloque. Modifica los archivos JavaScript que hay dentro como desees y recuerda importar el archivo principal del nuevo bloque en packages/blocks/index.js
.
Extender el editor de bloques con un plugin
Además del bloque de demo que antes te he comentado, nuestro boilerplate para el editor de bloques incluye la definición de un plugin de Gutenberg.
Ten en cuenta que aunque se llame plugin, no es un plugin de WordPress de los de toda la vida, sino un plugin que extiende el editor de bloques. Sí, un plugin dentro del plugin de WordPress.

Puedes ver el plugin en la captura de pantalla anterior, situado en la parte derecha. Este plugin se activa haciendo clic en el icono de la parte superior derecha, al lado del botón de publicar.
El plugin incluye un selector de color (para que veas cómo puedes reutilizar de forma sencilla los componentes React que Gutenberg incluye) y un botón para insertar un bloque demo al editor de forma programática (otro caso de uso interesante).
Tienes el código del plugin dentro de assets/src/js/admin
(puedes verlo aquí). Concretamente, el archivo plugin.js
incluye la llamada registerPlugin
y el archivo plugin-component.js
define el componente que se encarga de renderizar el selector de color y el botón que te explicaba antes.
De nuevo, puedes modificar este plugin como desees. Incluso borrarlo si así lo quieres. En tal caso, recuerda eliminar el encolado del archivo JavaScript plugin.js
que encontrarás en el archivo principal wp-beb.php
(ver aquí) así como del correspondiente archivo CSS (aquí).
¡Atrévete a probarlo!
Esperamos que nuestro WordPress Block Editor Boilerplate te ayude a quitarte el miedo y a lanzarte a programar extensiones para el editor de bloques de WordPress de forma sencilla.
Pruébalo y cuéntanos tu experiencia. Estaremos encantados de leer tus comentarios al respecto.
Imagen destacada de Icons8 team en Unsplash.
Deja una respuesta