Modelo de plugin para el desarrollo actual en WordPress

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 a mi-ejemplo
• cambia wp-beb por mi-ejemplo
• cambia wp_beb por mi_ejemplo
• cambia WP_BEB por MI_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:

• Node.js v8.9.1 o posterior.
• npm v5.5.1 o posterior.
• Composer v1.8.1 o posterior.

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 watchCompila 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 Ejecuta phpcbf para intentar arreglar errores en los archivos PHP.
• npm run lint-css Ejecuta stylelint en archivos SCSS para detectar errores.
• npm run lint-css:fix Intenta arreglar errores en archivos SCSS.
• npm run lint-js Ejecuta eslint 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.

Pruébalo ya

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.