WordPress Plugin Block Editor Boilerplate

El desarrollo en WordPress está bajo modernización. Hace unos días expliqué las tecnologías actuales que ya están presentes en la versión 5 de nuestro sistema de gestión de contenido. Ahora es el momento de enseñarle cómo desarrollar complementos para WordPress teniendo en cuenta las posibilidades del nuevo editor de bloques. Hoy describiré el estándar que usamos en Nelio para nuestros desarrollos de WordPress con una base de JavaScript. Tiene toda la base de código de nuestro complemento estándar de WordPress en GitHub, por lo que no tiene excusa para no modernizar y expandir los horizontes de sus desarrolladores.
El editor de bloques de WordPress Boilerplate La razón principal para crear un proyecto para servir como base para crear nuevos complementos de WordPress aparece en nuestra propia necesidad de unificar y estandarizar todos nuestros proyectos.

El desarrollo en WordPress ya no es solo PHP. Dejemos las cosas viejas porque es hora de modernizar sus habilidades.
Inspirado en WordPress Plugin Boilerplate, nuestra idea es hacer algo similar, pero enfocado en complementos que extienden el editor de bloques con una pila moderna utilizando compiladores, transpilos, Bundlers y, finalmente, herramientas de desarrollo de proyectos JavaScript.
Proceso de instalación y desarrollo El complemento Boilerplate que creé como base se puede descargar directamente de GitHub. Después de eso, puede moverlo a la carpeta Plugin (/WP-Contempel/Plugins/) de su instalación de WordPress: Git Clone https://github.com/avillegasn/wp-beb.git esto descargará la carpeta de complemento con todo el contenido. Luego debe cambiar el nombre de esta carpeta y su contenido para usar el nombre deseado. Por ejemplo, si su complemento se llamará my-plug: renate wp-beb archivos en my-plugin
Reemplace WP-Beb con My-Plugin
Reemplace WP_BEB con my_PLOGIN
Reemplace WP_BEB con my_PLOGIN
Una vez que haya hecho esto, para compilar el complemento y generar el código final, ejecute esto:
NPM Install && NPM Ej. Recuerde que tendrá que instalar las siguientes herramientas:
Node.js v8.9.1 o una versión posterior.
NPM v5.5.1 o una versión posterior.
Compositor V1.8.1 o una versión posterior.
El comando de instalación de NPM descarga las adicciones Node.js y PHP en las carpetas Node_Modules y, respectivamente, el proveedor. Cuando termine el proceso, tendrá una carpeta distinta con archivos compilados. Ahora es seguro activar el complemento en WordPress. Además del pedido anterior, Boilerplate ofrece los siguientes comandos adicionales:
NPM Ejecute los archivos de construcción de dev BRUNIFICACIÓN sin miniificación.
NPM Ejecute Watch Crear archivos y rastrear sus cambios.
NPM ejecuta los archivos de compilación y reduzca JS y CSS.
NPM Ejecute Lint-PHP Roll PhP_CodesNiffer en archivos PHP para detectar errores.
NPM Ejecute Lint-PHP: corrige el rollo PHPCBF para intentar solucionar los errores de PHP.
NPM ejecuta el rollo de lint-CSS Stylelint en archivos SCSS para detectar errores.
NPM Ejecute Lint-CSS: corrige a Trate de solucionar errores de los archivos SCSS.
NPM ejecuta Lint-JS Roll Eselt en archivos JS para detectar errores.
NPM ejecuta el proceso de revestimiento en los archivos PHP, SCSS y JS.
Actualización de NPM Ejecutar: adicciones al paquete de actualización de paquetes en Node.js.
Por lo general, ejecutará el reloj NPM Run mientras desarrolla el código para que los cambios se compilen y se agrupen en tiempo real. Sin embargo, para generar una versión final y estable, ejecutar la compilación de NPM.
Estructura de contenido y carpetas Nuestro editor de bloques de WordPress incluye los siguientes archivos y carpetas:
.Babelrc. Archivo de configuración de Babel.
.EdortorConfig. Archivo EditorConfig que ayuda a mantener estilos de codificación coherentes para varios desarrolladores que trabajan en el mismo proyecto en diferentes editores e ideas.
.Elizlignore. Utilizado para excluir ciertos archivos del proceso de listado.
.Esintrc. Archivo de configuración ESELT.
.gittributes. Archivo de texto que ofrece atributos a los nombres del GIT.
.gitignore. Se utiliza para excluir ciertos archivos del almacén. Composer.json. Describa las adicciones PHP del proyecto y puede contener otros metadatos.
Composer.lock. Se utiliza para bloquear más desarrolladores que trabajan en el mismo proyecto en las mismas versiones de adicción a PHP. index.php. Para ocultar la estructura interior de los archivos en el servidor, sea lo que sea.
Licencia.txt. Copia de la licencia LNU LPG V2.
Paquete-lock.json. Se utiliza para bloquear más desarrolladores que trabajan en el mismo proyecto en las mismas versiones de adicciones a NPM.
Paquete.json. El archivo manifiesto para el proyecto. El almacén de configuración central donde encontrará los nombres de los paquetes necesarios y los comandos CLI que puede usar para administrar el proyecto.phpcs.ruluset.xml. PHP_CODESNIFFER FILE DE CONFIGURACIÓN.
postcs.config.js. Archivo de configuración postcss.
Readme.md. El archivo que está leyendo actualmente.
readme.txt. TEMPLON PARA LE README LEGLEMBRE WORDPRESS ARCHIVO.
Webpack.config.js. Archivo de configuración para Webpack.
wp-beb.php. El archivo principal del complemento de WordPress.
Un director de activos que contienen recursos CSS, JS e Pictures.
Un director de idiomas que contiene los archivos de traducción para i18n.
Un director de paquete que contiene definiciones de bloque para expandir el editor de bloques de WordPress.
Además de todo esto, una vez que haya compilado el proyecto, obtendrá la distinción con los archivos compilados, el proveedor del director con adicciones y ejecutables para el PHP y el director Node_Modules con adicciones y ejecutables para NPM y JavaScript.
Agregue un nuevo bloque al editor de bloques de WordPress Lo interesante de esta calderera de editor de bloques de WordPress es su condición predeterminada. Una vez que haya descargado y compilado el complemento, active y descubrirá que es un complemento completamente funcional que agrega un nuevo bloque a su editor.
Bloque demostrativo que nuestro Boilerplata incluye de forma predeterminada en el editor de bloques. El bloque de demostración agregado por nuestra placa es solo un bloque de texto simple precedido por un Dashicon del corazón, como puede ver en la captura de pantalla anterior. El bloque también define dos estilos adicionales, que cambian los colores del texto dentro del bloque. Deben ayudarlo a comprender cómo crear bloques y estilos en Gutenberg. El código JavaScript que agrega este bloque al editor está en paquetes/bloques/demostración (ver aquí). Si desea eliminar este bloque, elimine solo el directorio de demostración y elimine su importación y uso del archivo PACKAGES/BLOCKS/Index.js. Además, el código para el bloque de demostración se divide en diferentes archivos, cada uno incluyendo una parte diferente de los argumentos utilizados por RegistroBockType. Por otro lado, si desea agregar un bloque adicional, duplicar paquetes/bloques/demostración y darle el nombre deseado para su bloque. Modifique los archivos JavaScript desde el interior como desee y recuerde importar el nuevo bloque en el paquete /blocks/index.js.
Extienda el editor de bloques con un complemento además del bloque de demostración que mencionamos anteriormente, nuestra caldera para el editor de bloques incluye la definición de un complemento Gutenberg. Tenga en cuenta que este “complemento” no es un complemento regular de WordPress, sino algo que extiende el editor de bloques en sí. “Un complemento dentro del complemento de WordPress”, si lo desea.

Complemento para el editor de bloques que agregamos de forma predeterminada. Puede ver el complemento en la captura de pantalla de arriba, ubicado en el lado derecho. Este complemento se activa haciendo clic en el icono superior derecho, cerca del botón de publicación.

El complemento incluye un selector de color (para ver cómo puede reutilizar fácilmente los componentes React que incluye Gutenberg) y un botón para insertar un bloque demostrativo en el editor (otro escenario interesante). Tiene el código de complemento en activos/src/js/admin (puede verlo aquí). Específicamente, el archivo plugin.js incluye la llamada de registroplu, y el archivo complemin-component.js define el componente responsable de reproducir el selector de color y el botón que mencioné anteriormente. Nuevamente, puede cambiar este complemento como desee. O puede eliminarlo, si lo desea. Para hacer esto, no olvide eliminar el archivo JavaScript Plugin.js colocado en la cola en el principal wp-beb.php (ver aquí), así como el archivo CSS apropiado (aquí). ¡Demos una foto! Esperamos que la Boilerplate del editor de bloques de WordPress lo ayude a deshacerse de su miedo y comenzar a programar extensiones para WordPress Block Editor. Pruébalo y cuéntanos sobre tu experiencia. ¡Estaremos encantados de leer sus comentarios! Imagen presentada por el equipo Icons8 en Unsplash.