NO te pierdas las novedades de este repositorio de plugins

WordPress Plugin Boilerplate OOP + Gutenberg

Un plugin base bien organizado y orientado a objetos para que puedas crear tus propios plugins para WordPress.

“Fork” con muchas mejoras basado en el WPPB de Tom McFarlin

Dispone de varias mejoras para el desarrollo respecto el original, como nuevas carpetas para includes y Gutenberg, Loader with singleton, poder llamar a los hooks con objetos vacíos, añadir shortcodes… en general puedes ver descritas las mejoras en esta página.

Una de las mejoras más destacables es que desde el verano del 2018 también incorpora compatibilidad con Gutenberg basandose en parte del genial trabajo de Ahmad Awais que facilita enormemente la creación de bloques para el nuevo editor de WordPress 5.0.

También se incorpora la idea del generador ZIP y de ficheros de Antonella Framework.

Otras grandes mejoras son la incorporación de herramientas para desarrollo como Whoops y Kint, la posibilidad de hacer test, así como incorporar grunt, gulp y PHP CodeSniffer con los estándares de WordPress ( especialmente bueno para subir el plugin al repositorio oficial y ser validado a la primera 😀 ).

Puedes ver el desarrollo del mismo en Github donde se siguen añadiendo mejoras para abarcar distintas configuraciones entorno a Gutenberg.

Boilerplate

Se trata de un plugin base con la estructura necesaria para empezar a crear tu propio plugin bien organizado, siguiendo buenas prácticas y con potencial para crear cualquier desarrollo avanzado con WordPress.

OOP

Significa que está estructurado para seguir con PHP una programación orientada a objetos POO u OOP en inglés.

Gutenberg

Preparado para crear tus propios bloques para el nuevo editor de WordPress desde la versión 5.0 de diciembre de 2018 llamado Gutenberg. Se incluyen varios bloques de ejemplo y funciones preparadas para realizar varias configuraciones y así puedas usarlo como base de partida aunque con esto deja de ser tan propiamente un boilerplate. 🙂

Importante

Como boilerplate y plugin marca blanca, puedes cambiar los nombres base de las carpetas, funciones, etc para adaptarlo a tu empresa y necesidades sin miedo a ninguna actualización del mismo.

Puedes incluso usar el genererador automático a tu disposición.

Por otra parte tienes que saber que para poder ejecutar algunas de las características avanzadas presentadas desde la terminal necesitarás estar acostumbrado a trabajar con ello y tener tu equipo preparado con algunas aplicaciones y programas ya instalados; y que aquí no se explica.

Este plugin base para WordPress es un buen punto de partida para crear tus propios plugins siguiendo una buena estructura de trabajo y buenas prácticas recomendadas.

Es un “Boilerplate” que se basa en la API de plugins de WordPress, y trata de seguir los estándares de código WordPress Coding Standards y también los estándares de documentación.

Todas las clases, funciones y variables que se presentan como base de trabajo están documentadas para que tengas claro como utilizarlas, modificarlas y ampliarlas.

El Boilerplate utiliza un esquema de organización de archivos que te ayudará a separar las funcionalidades y el código para el back-end o zona de administración ( carpeta admin ) respecto de la parte visible de la web o front-end (carpeta public), así como el uso de librerias externas (carpeta includes) e incluso una parte diferenciada para crear bloques para Gutenberg (carpeta gutenberg).

Estructura de carpetas del plugin:

  • /gutenberg –> aquí situaremos todo lo relacionado con el nuevo editor de WordPress para poder crear bloques para Gutenberg
  • /core –> integra todas las llamadas para conectarnos con el core de WordPress mediante los hooks: acciones y filtros
  • /admin –> para todas las funciones con destino el admin
  • /public –> para todas las funciones a presentar en la parte pública o visible de la web
  • /includes –> para situar todas las funcionalidades útiles tanto para el back-end como para el front-end, donde por ejemplo situar las funciones de ayuda y/o librerias externas

Por otra parte, en el caso de que quieras crear por ejemplo un plugin para subir al repositorio oficial de WordPress.org, este plugin base también dispone de una carpeta para idiomas (carpeta languages) que incluye un fichero .pot como punto de partida para la internacionalización (i18n).

GUTENBERG:

La carpeta para trabajar con la creación de bloques para Gutenberg funciona de manera similar a https://github.com/ahmadawais/create-guten-block debido a que tiene sus dependencias en el package.json del plugin. Esto nos permite tener actualizaciones sin problemas de esta única dependencia cgb-scripts.

Puedes crear rápidamente nuevos bloques para Gutenberg basándote en los bloques de ejemplo proporcionados. Puedes copiar y pegar cada carpeta dentro de src que coincide cada una con un bloque:

  • Copiar desde –> wordpress-plugin-boilerplate \ gutenberg \ src \ basic
  • Pegar como -> wordpress-plugin-boilerplate \ gutenberg \ src \ nombre-bloque

IMPORTANTE: recuerda incluir las nuevas referencias a las nuevas subcarpetas en el archivo wordpress-plugin-boilerplate \ gutenberg \ src \ blocks.js y manten el nombre del archivo JS principal de cada nuevo bloque como index.js para una referencia más fácil desde el citado archivo blocks.js

Esta carpeta de trabajo dentro del plugin está preparada para que directamente ya puedas trabajar en cada nuevo bloque para Gutenberg con las últimas herramientas de desarrollo web como Sass, React, JSX y ES6.

Para que todo el código se compile correctamente ( y con ello hagamos el código compatible con todos los navegadores aunque usemos código avanzado ) hacia la carpeta de distribución situada en wordpress-plugin-boilerplate \ gutenberg \ dist es necesario tener en cuenta los siguientes pasos:

  1. Situa el terminal en la carpeta plugin-name \ gutenberg y ejecuta npm install
  2. npm-start para modo desarrollo: observa cualquier cambio cuando guardas un fichero, compila todo y te informa de cualquier error.
  3. npm run build para terminar el modo desarrollo y construir el codigo final para producción en la carpeta dist (la cual no debes tocar)

Todo el código compilado y comprimido que se situa dentro de la citada carpeta wordpress-plugin-boilerplate \ gutenberg \ dist ya está todo bien llamado/encolado (enqueue) por este plugin base que estamos presentado aquí. Puedes comprobarlo si miras el código de los siguiente ficheros:

  • wordpress-plugin-boilerplate \ core \ class-wordpress-plugin-boilerplate.php
  • wordpress-plugin-boilerplate \ gutenberg \ class-wordpress-plugin-boilerplate-gutenberg.php

Opciones avanzadas a tu disposición (opcionales):

Si te animas a usar la consola de comandos ( algo que puedes hacer fácilmente si usas por ejemplo Visual Studio Code como editor de código ya que la trae integrada), tienes en la raiz del plugin un fichero llamado “make” que te facilitará algunas tareas:

  • php make zip –> crea un zip del plugin
  • php make class NOMBRE-CLASE NOMBRE-CARPETA –> crea un nuevo fichero con el nombre dado dentro de la carpeta indicada y con una base de código listo para trabajar en OOP

También hay algunos otros sistemas integrados como base de trabajo que puedes obviar, usar como están o incluso mejorar según tus conocimientos y necesidades. Para ello necesitas ejecutar desde tu terminal primero npm install así como composer install y luego ya lanzar los siguientes comandos:

  • grunt –> genera el fichero .pot dentro de la carpeta languages, así como minifica los ficheros CSS y JS según la configuración dada en el fichero de la raiz del plugin llamado gruntfile.js
  • gulp –> inicia el modo test y ejecuta todos los test preparados en la carpeta tests de modo auto cada vez que se guarda un fichero php.

Nota: recuerda que para ejecutar algunas de las características presentadas desde la terminal necesitarás estar acostumbrado a trabajar con ello y tener tu equipo preparado con algunas aplicaciones y programas ya instalados.


PHP CodeSniffer con los estándares de WordPress:

Puedes verificar que el código que vas integrando dentro del plugin sigue todos los estándares de WordPress gracias a la integración en el mismo de squizlabs / php_codesniffer & wp-coding-standards / wpcs y que puedes incluir en tu desarrollo con solo teclear desde la terminal y en la raiz del plugin: composer-install

Tras la instalación de las oportunas dependencias citadas se configura ejecutando los siguientes comandos:

  • vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs
  • vendor/bin/phpcs --config-set default_standard WordPress

Finalmente puedes revisar el código y ver los errores en la consola al ejecutar los siguiente códigos de ejemplo:

  • vendor/bin/phpcs /ruta-al-fichero/nombre-fichero.php
  • vendor/bin/phpcs /ruta-a-la-carpeta/nombre-carpeta

IMPORTANTE: además puedes tratar de corregir los errores mostrados de una forma automática aplicando phpcbf en vez de phpcs del siguiente modo:

  • vendor/bin/phpcbf /ruta-al-fichero/nombre-fichero.php
  • vendor/bin/phpcbf /ruta-a-la-carpeta/nombre-carpeta

Visual Studio Code (software gratuito recomendado como editor)

Con algunos editores de código como VSC y modulos como vscode-phpcs o similares, puedes ir viendo de modo automático todos los errores en el código respecto los estándares recomendados en todo momento durante tu desarrollo del código.


DEV MODE – modo desarrollo:

Cuando estas programando con este plugin base y ejecutas composer install en la raiz del plugin se activan algunas características propias para desarrollo:

  • La barra superior de administración de WordPress que normalmente es negra, se cambia a un color llamativo y añade la etiqueta DEV MODE
  • En la pantalla principal del backend index.php, podrás ver un aviso con un resumen de todo lo que puedes hacer en este modo dev.
  • Dispones de una nueva Interfaz de errores bonita gracias a Whoops. Para verlo en acción solo comete un error fatal. 😀
whoops –
PHP errors for cool kids
  • Kint debbugin helper. Dentro de tu código en vez de usar el típico var_dump ($ variable); puedes usar simplemente d ($ variable); y obtendrás una salida de datos para depurar tu código increíble. 😀
Kint – debugging helper for PHP developers

Realizar tests

Respecto la estructura base del plugin, también mencionar que incluso si así lo quieres y/o necesitas tienes también una carpeta preparada para plantear tests.

En la carpeta test de pruebas tiene nuevos archivos para poder hacer pruebas en diferentes base de datos, las cuales puedes configurar con el archivo /wp-tests/wp-tests-config.php y el archivo bootstrap.php el cual ejecuta el código para cargar manualmente el entorno de pruebas.

Puedes ver un ejemplo para lanzar tests en el fichero test-sample.php

Revisa también en la raíz del plugin el archivo phpunit.xml para comprender toda la configuración al respecto y variar esta configuración para los tests. Por ejemplo aquí puedes eliminar la parte que pone bootstrap = "tests / bootstrap.php" si no deseas hacer pruebas con una base de datos adicional.

NOTA TESTS: la base de datos usada para los test de desarrollo se restablece y borra en cada prueba lanzada. Para poder usarla necesitas configurarla en el archivo /wp-tests/wp-tests-config.php así como previamente haberla creado en tu entorno de desarrollo.