Crear bloque de Gutenberg personalizado – Parte 1: Configuración del entorno de desarrollo

En la primera parte de esta serie de tutoriales sobre cómo crear bloques personalizados de Gutenberg, debemos configurar nuestro entorno de desarrollo. Necesitamos un lugar donde podamos escribir nuestro código en sintaxis ES6/ESNext y compilarlo sobre la marcha. Es posible escribir bloques de Gutenberg personalizados usando la sintaxis de ES5 sin configurar Webpack y Babel. Pero el código será realmente engorroso de leer y escribir. Si no está seguro de por qué necesitamos hacer todo esto, o cuál es la diferencia, lea mi publicación que explica esto. Puedo garantizarte que cuando regreses estarás convencido de dar este paso adicional para escribir mejor código.

Supongo que ya tiene un WordPress local ejecutándose en una pila LAMP o similar. Y que estás escribiendo un tema o un plugin. En cuanto a mí, estoy poniendo mi código en un tema que he desarrollado awp-starter-theme, ubicado en mi carpeta de temas de WordPress. Quiero separar mi desarrollo de Gutenberg de todos los demás archivos de temas, así que creo un subdirectorio gutenberg-devdentro de la carpeta raíz de mi tema. Esa será la carpeta de mi proyecto y la carpeta a la que me referiré para el resto de la serie de tutoriales.

Ya he escrito una guía detallada sobre cómo configurar un entorno de desarrollo para Gutenberg, así que voy a seguir rápidamente los pasos aquí. Si nunca ha hecho esto antes, le recomiendo leer la publicación vinculada a continuación, ¡ya que contiene más información de la que encontrará aquí!

Configurar el proyecto con webpack

Usando la terminal (iOS terminal o Windows cmd funcionan bien) navegue a la carpeta de su proyecto (en mi caso awp-starter-theme/gutenberg-dev). Iniciamos un nuevo proyecto pidiéndole a npm que genere un package.jsoncon contenido genérico.

Creando paquete.json

npm init -y

A continuación, instalaré los scripts de WordPress que nos ayudarán mucho con la configuración con este comando (que agregará la subcarpeta node_modulesy package-lock.jsontambién):

npm install --save-dev --save-exact @wordpress/scripts

Abra el package.jsonarchivo en la carpeta de su proyecto en un editor y busque la scriptspropiedad. Lo reemplazamos con dos scripts del paquete de WordPress que acabamos de instalar:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
},

El script de "construcción" compilará mis archivos. Pero como tiene que ejecutarse manualmente cada vez que se realiza un cambio, preferiremos usar el script de "inicio" mientras desarrollamos. Luego iniciará un "modo de observación" donde escucha a los cambios realizados en cualquiera de sus archivos de script y los vuelve a compilar cada vez que guarda los cambios.

Configuración del paquete web

El siguiente paso es crear un archivo de configuración de paquete web. Hago esto porque no quiero usar la fuente predeterminada y los nombres de archivo y carpetas de salida. Quiero decidir por mí mismo dónde están mis archivos fuente y dónde deberían terminar los archivos compilados.

Con la ayuda del @wordpress/scriptspaquete que instalamos, podemos heredar la configuración del paquete web de WordPress y anular solo las partes que queremos cambiar.

En nuestra carpeta de proyecto, cree un nuevo archivo llamado webpack.config.jsy ábralo en un editor. Agrega este contenido:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
const path = require('path');
module.exports = {
    ...defaultConfig,
    entry: {
        'block-awhitepixel-myfirstblock': './src/block-awhitepixel-myfirstblock.js'
    },
    output: {
        path: path.join(__dirname, '../assets/js'),
        filename: '[name].js'
    }
}

Lo que esto hace es definir mi archivo de entrada (actualmente solo uno) en la entrypropiedad, ubicada en una subcarpeta srcen mi carpeta de proyecto, llamada block-awhitepixel-myfirstblock.js. Obviamente, nombra tus archivos como quieras, pero recuerda cambiar tanto la clave como el valor. Porque en la outputpropiedad le pido a webpack que compile mis archivos de entrada con la clave de entrada como nombre de archivo. En la pathpropiedad, pido colocar todos los archivos compilados un paso fuera de la carpeta de mi proyecto y dentro de la assets/jscarpeta del tema. Ajuste los nombres de archivo y la ubicación para que se ajusten a su proyecto. Consulte mi guía detallada si está confundido.

Cree una subcarpeta src/en la carpeta del proyecto y aquí es donde colocaremos todos los archivos fuente. (Ajuste si cambió la entryubicación en webpack.config.js). Cree un archivo block-awhitepixel-myfirstblock.jsaquí y déjelo vacío por ahora.

Hay un paso más, y esto va para nosotros que queremos usar las funciones más nuevas en ESNext. Lamentablemente, a la configuración predeterminada de WordPress Babel le falta esto. Y como quiero usar funciones como las funciones de flecha, también necesito configurar Babel.

Configurando Babel

Primero necesitamos instalar algunos paquetes para nuestra configuración de Babel escribiendo este comando:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Cuando haya terminado, cree un nuevo archivo .babelrcen nuestra carpeta de proyecto. Aquí es donde pondremos nuestra configuración de Babel:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties"
        ]
    ]
}

¡Y eso es todo para la configuración de nuestro entorno de desarrollo!

Construir comandos

A lo largo del desarrollo, deberá compilar sus archivos Javascript. En nuestro package.json, agregamos dos scripts solo para esto.

Siempre que queramos desarrollar en nuestros archivos Javascript, ejecutamos esto en la terminal:

npm run build

Este comando realizará la compilación cada vez que lo ejecute en la terminal. Pruébelo, y debería ver que genera el archivo block-awhitepixel-myfirstblock.js(junto con uno o dos otros archivos de "activos") en su carpeta de salida definida que definió en webpack.config.js. En mi caso aparece en awp-starter-theme/assets/js/.

Usar el comando anterior funciona bien, pero se vuelve molesto repetirlo cada vez que realiza cambios en sus archivos. Probablemente prefiera ejecutar este comando en su lugar:

npm run start

Esto configurará su terminal en "modo de observación", detectando cualquier cambio guardado en sus archivos Javascript y compilándolos sobre la marcha. Cada vez que sus archivos contengan errores, la terminal arrojará los mensajes de error. Presione CTRL + C para detener el proceso de visualización.

Como referencia, la carpeta de mi proyecto ahora se parece a la imagen. Prefiero separar todos los archivos de configuración y especialmente la subcarpeta node_modules/(que contiene literalmente decenas de miles de archivos) del resto del código de mi tema. Facilita la configuración de reglas para ignorar, por ejemplo, compiladores SCSS o git ignore. Ya configuramos la configuración del paquete web para compilar los archivos finales directamente awp-starter-theme/assets/js/junto con otros archivos Javascript para mi tema.

Ahora estamos listos para la siguiente parte donde comenzaremos con el registro de nuestro primer bloque personalizado.