Desarrollo avanzado de WordPress: cómo crear tu próximo proyecto con wp-scripts

El trabajo de desarrollo de WordPress para las agencias es, en el mejor de los casos, competitivo. Requiere una eficiencia y coherencia máximas en los proyectos de varios clientes.

Independientemente de lo experimentado que seas como desarrollador, la gestión de toda una cartera de temas y plugins personalizados sigue requiriendo un esfuerzo constante cuando se trata de agilizar el flujo de trabajo. Entra en wp-scripts: un potente conjunto de utilidades que puede revolucionar la forma en que tu agencia aborda el desarrollo de WordPress.

Esta completa guía examina las capacidades de wp-scripts, y explora técnicas para tus procesos de construcción. A lo largo de toda la guía, se tratará la compilación y empaquetado optimizados, el linting automatizado, las pruebas unitarias y mucho más — todo ello te interesará si tienes que hacer malabarismos con varios proyectos de WordPress de gran envergadura.

El concepto de «proceso de construcción»

Antes de ver los detalles de wp-scripts, vamos a entender el concepto más amplio de tu proceso de construcción de desarrollo web. Consiste en una serie de tareas automatizadas que ayudan a convertir tu código fuente en una aplicación o sitio web listo para producción.

Por ejemplo, hay muchos trabajos que se benefician de la automatización de esta manera:

• Compilar JavaScript moderno en código compatible con el navegador.
• Transpilar lenguajes de preprocesador CSS (Sass, por ejemplo) a CSS estándar.
• Minificar y optimizar activos como JavaScript, CSS y medios.
• Ejecutando linters para detectar posibles errores y hacer cumplir las normas de codificación.
• Ejecutando pruebas unitarias para garantizar una mejor funcionalidad del código.

Estos son buenos aspectos a automatizar para cualquier flujo de trabajo de desarrollo, pero para las agencias, el proceso es igual de crucial. Para empezar, puedes mantener la coherencia en varios proyectos (y en tu equipo).

También puedes desarrollar y desplegar a través de ciclos más rápidos y mantener todos tus proyectos aprovechando esa coherencia, incluso los más complejos. Para el usuario final, el rendimiento optimizado que obtengas repercutirá en su experiencia general.

Normalmente, tu agencia puede «improvisar» procesos de creación personalizados utilizando herramientas como Gulp, Grunt, o incluso procesos manuales. Sin embargo, estos enfoques a menudo pueden dar lugar a incoherencias entre proyectos, por no mencionar una importante sobrecarga de mantenimiento.

wp-scripts: un cambio revolucionario en el flujo de trabajo para el desarrollo de WordPress dentro de una agencia

En el contexto de WordPress, un proceso de construcción también puede ofrecer una racionalización significativa para el desarrollo de temas y plugins. Te permite utilizar herramientas y prácticas modernas y, al mismo tiempo, garantizar la compatibilidad de la plataforma.

El paquete @wordpress/scripts – wp-scripts a lo largo de este post — es una colección de archivos de configuración y scripts que te ayudan a simplificar el proceso de construcción de los proyectos de WordPress.

El equipo de Make WordPress Core desarrolla y mantiene el paquete, que forma parte integral de los editores de bloques y de sitios. Lo mejor de todo es que también puedes utilizarlo para desarrollar temas y plugins personalizados.

Para abordar el desarrollo de WordPress a escala dentro de una agencia, wp-scripts será una parte central del flujo de trabajo. Es más que una simple herramienta de construcción; es una solución integral para los proyectos modernos de WordPress que se ajusta a la necesidad de un flujo de trabajo de desarrollo sofisticado.

La funcionalidad clave de wp-scripts

A medida que las prácticas más modernas de JavaScript se introducen en el ecosistema de WordPress, necesitamos herramientas de construcción más estandarizadas para darles cabida. Un conjunto unificado de herramientas de construcción en forma de wp-scripts beneficia a todo el ecosistema de desarrollo de WordPress.

Como tal, wp-scripts ofrece una serie de funcionalidades que hacen que el desarrollo de WordPress sea más eficiente:

• Configuración ‘Cero-configuración’. Puedes empezar sin necesidad de complejas configuraciones de webpack.
• Compatibilidad con JavaScript moderno. Tu código ES6 se transpilará para que sea compatible con los navegadores, y te proporcionará una mayor confianza en su precisión.
• Procesamiento de CSS incorporado. Si utilizas preprocesadores de CSS como Sass, obtendrás soporte desde el principio
• Herramientas de calidad del código. El paquete integra ESLint y Prettier para un estilo y calidad de código consistentes.
• Utilidades de prueba. Dispones de Jest dentro del paquete para realizar pruebas unitarias y facilitar la ejecución.
• Recarga en caliente. Si tienes la posibilidad de recargar tus cambios en tiempo real, puedes acelerar el tiempo de desarrollo.

Combinado, wp-scripts ofrece muchas ventajas clave para las agencias que gestionan varios proyectos de WordPress. Por ejemplo, puedes estandarizar tu entorno de desarrollo en todos los proyectos y replicar el proceso de construcción también en cualquier proyecto nuevo. El paquete te permitirá centralizar tus dependencias de herramientas de compilación, lo que hace que las actualizaciones y los parches de seguridad sean más manejables.

En general, puedes preocuparte menos por los problemas de compatibilidad, reducir el tiempo de configuración y erradicar muchos de los errores típicos que se cometen a lo largo de un proceso de construcción menos ágil.

Comparación de wp-scripts con un proceso de desarrollo de WordPress típico

El desarrollo típico de WordPress suele implicar el uso de la cola manual para scripts y estilos. Además, es probable que escribas JavaScript vainilla o jQuery, y que dependas de herramientas de construcción de terceros — o que no haya ningún proceso de construcción.

En cambio, wp-scripts proporciona un enfoque moderno e integrado en casi todas las áreas:

Elemento	Desarrollo típico	wp-scripts
JavaScript	A menudo JavaScript vainilla o jQuery	Compatibilidad con ES6 y React
CSS	CSS directo o preprocesadores básicos	Soporte para procesamiento Sass y PostCSS
Proceso de construcción	Una configuración manual o personalizada utilizando Gulp o Grunt	Configuración cero utilizando webpack, integrado en el paquete.
Calidad del código	Linting manual o herramientas independientes integradas con tu editor de código	ESLint y Prettier están integrados en wp-scripts
Pruebas unitarias	Si no es un paso olvidado, suele haber una configuración independiente	El paquete integra pruebas Jest

En general, wp-scripts ofrece mayor flexibilidad gracias a su integración con herramientas que quizá ya no utilices. Por ejemplo, el esfuerzo de configurar PostCSS, webpack o Jest puede ser algo que te saltes por falta de tiempo.

Cómo configurar tu entorno de desarrollo para incorporar wp-scripts

Utilizar wp-scripts tiene sus propios requisitos, pero es probable que ya utilices esas herramientas. Si lo necesitas, instala Node.js y npm junto con un entorno de desarrollo local de WordPress. DevKinsta será una buena solución, gracias a que se ejecuta en Docker y es compatible con los entornos staging de Kinsta.

Si ya utilizas el paquete create-block para desarrollar plugins de Bloques de WordPress, esto instala wp-scripts junto con sus otros activos. A partir de aquí, puedes empezar a configurar un proyecto de desarrollo de paquetes.

Configurar un nuevo proyecto de WordPress con wp-scripts

El trabajo que emprendas estará dentro del directorio wp-content de tu instalación de WordPress. El subdirectorio específico estará relacionado con el tipo de proyecto que crees: wp-content/themes para temas y wp-content/plugins para plugins.

En cualquier caso, la carpeta de tu proyecto debe incluir una serie de archivos y directorios:

• Un archivo package.json.
• Un directorio build.
• Un directorio src que también incluya un archivo index.js.

Para crear un archivo package.json, navega hasta el directorio de tu proyecto utilizando tu Terminal o una aplicación de línea de comandos. Ejecutar el comando npm init te llevará a través de un proceso de configuración interactivo, y tu «punto de entrada» debería ser build/index.js:

A continuación, instala wp-scripts como dependencia de desarrollo:

npm install @wordpress/scripts --save-dev

Deberías ver también un par de directorios y archivos autogenerados: node_modules y package-lock.json. En cualquier caso, ahora tienes que hacer referencia a los scripts predefinidos dentro del archivo package.json:

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

Es probable que vuelvas a menudo a este archivo para añadir más scripts cuando sea necesario. Por ejemplo:

…

"lint:js": "wp-scripts lint-js",
"lint:css": "wp-scripts lint-style",
"lint:pkg-json": "wp-scripts lint-pkg-json",
"test": "wp-scripts test-unit-js"
…

Puede que también tengas que poner en cola los activos de tu tema o plugin aquí y luego guardar los cambios.

Comprender y utilizar webpack con wp-scripts

Para empaquetar activos ocultos, wp-scripts utiliza webpack. No necesitas configurarlo, aunque comprender su función puede ayudarte a aprovechar wp-scripts de una manera más eficaz. Webpack tiene muchas responsabilidades en cuanto a su configuración:

• Ayuda a resolver las dependencias entre tus módulos JavaScript.
• Puede transpilar JavaScript moderno a código compatible con el navegador.
• Te ayudará a procesar y optimizar tus estilos.
• Podrá generar mapas de fuentes para depurar más fácilmente.
• Te ayudará a crear paquetes minificados listos para producción.

Ya tienes una configuración predeterminada de webpack en wp-scripts. Esto funciona bien para la mayoría de los proyectos de WordPress. En algunos casos, sin embargo, puede que necesites crear configuraciones personalizadas.

Configuración avanzada de webpack para agencias

Aunque la configuración predeterminada de webpack es ideal para la mayoría de los proyectos de desarrollo, hay ocasiones en las que necesitas crear una configuración para tus necesidades específicas. Por ejemplo, puedes tratar con estructuras de temas complejas o arquitecturas de plugins únicas. Aquí es donde te resultará útil un archivo webpack.config.js en la raíz de tu proyecto:

const defaultConfig = require("@wordpress/scripts/config/webpack.config");

const path = require('path');


module.exports = {
  ...defaultConfig,
  entry: {
    main: path.resolve(__dirname, 'src/js/main.js'),
    admin: path.resolve(__dirname, 'src/js/admin.js'),
    // Add more entry points as needed
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Add custom loaders or plugins here
};

Esta configuración permite múltiples puntos de entrada, lo que es particularmente útil para temas o plugins que requieren scripts separados para diferentes partes del admin o frontend de WordPress. De este modo, puedes ampliar tu configuración predeterminada y mantener las ventajas de wp-scripts.

Aspectos básicos del uso de wp-scripts

Con un entorno de desarrollo adecuado y la estructura de archivos y carpetas correcta, puedes empezar a utilizar wp-scripts. Hay unos cuantos comandos básicos y fundamentales que ocuparán la mayor parte de tu tiempo.

El comando start vigila tus archivos en busca de cambios, recompila activos sobre la marcha y proporciona recarga en caliente para una experiencia de desarrollo más fluida:

npm run start

Utilízalo al principio de un proyecto para iniciar un servidor de desarrollo, aunque no optimizará el código compilado dentro de tu archivo build/index.js.

Cuando necesites desplegar tu proyecto, el comando build compilará tus activos para producción:

npm run build

Una vez que lo ejecutes, realizará algunas tareas. Por ejemplo, transpila tu JavaScript, compila tu Sass y SCSS a CSS, minifica todos tus activos y genera mapas de fuentes. Al final, lo enviará todo al archivo build/index.js. El proceso de construcción también crea un archivo build/index.asset.php para gestionar el cache busting

El paquete wp-scripts también proporciona varios comandos de linting para ayudarte a mantener una alta calidad del código:

• npm run lint:js. Utilízalo para limpiar tus archivos JavaScript.
• npm run lint:css. Esto limpia tus archivos CSS o Sass.
• npm run lint:pkg-json. Valida tu archivo package.json.

Para las pruebas unitarias, sólo tienes que llamar a npm run test, que utiliza Jest para ejecutar tu conjunto de pruebas.

Explorando las utilidades básicas de wp-scripts

Las tareas básicas de construcción pueden llevarte mucho tiempo, y los comandos típicos necesitarán mucha automatización. Sin embargo, wp-scripts proporciona un conjunto de sofisticadas utilidades que atenderán las complejas necesidades de tu desarrollo de WordPress:

• Compilación avanzada. Con configuraciones optimizadas, puedes transpilar el JavaScript moderno —incluidos los Módulos ECMAScript (ESM) y Javascript XML (JSX) — y compilar Sass.
• Agrupación inteligente. Puedes aprovechar la división de código (code splitting) y la depuración de módulos innecesarios (tree shaking) de webpack para optimizar la entrega de tus recursos.
• Linting exhaustivo. Puedes aplicar estándares de codificación en los archivos JavaScript, CSS y package.json.
• Pruebas integradas. Con Jest, puedes ejecutar pruebas unitarias e informes de cobertura.
• Servidor de desarrollo. Puedes utilizar la recarga en caliente para un desarrollo rápido en múltiples proyectos.

Puedes ampliar la funcionalidad predeterminada de cada uno para aprovechar un proceso de desarrollo de WordPress más personalizado, independientemente de si trabajas con temas o plugins.

Manejo de JSX y JavaScript moderno

Muchos proyectos de WordPress trabajan con elementos modernos de JavaScript, como componentes React, funciones de flecha, desestructuración, async/await, y mucho más. Incluso algunos aspectos del código base, como el Editor de Bloques, utilizan JavaScript moderno para construir su funcionalidad.

Sin embargo, los navegadores no entienden de forma nativa estas sintaxis avanzadas, por lo que es necesario más trabajo para transpilarlas y compilarlas.

JSX te permite escribir código similar al HTML dentro de tu JavaScript, lo que facilita la descripción del aspecto que deben tener tus interfaces y otros elementos. Para empezar, esto puede mejorar la legibilidad y la capacidad de mantenimiento. También puedes acceder a potentes componentes React para crear interfaces de usuario (IU) dinámicas.

wp-scripts utiliza el compilador de JavaScript Babel para transpilar tu JavaScript y JSX modernos en código que los navegadores puedan entender. Se encarga de toda la configuración compleja y necesaria, lo que te permite centrarte en escribir código.

Puedes aprovechar esto a través de tu archivo src/index.js . Echa un vistazo a este pequeño ejemplo de cómo podrías implementar JSX y JavaScript moderno utilizando wp-scripts:

import { render } from '@wordpress/element';

// Modern JavaScript feature: Arrow function
const HelloWorld = () => {
    // Modern JavaScript feature: Template literal
    const greeting = `Hello, ${wp.data.select('core/editor').getCurrentPost().title}!`;    

    // JSX
    return (
        <div className="hello-world">
            <h1>{greeting}</h1>
            <p>This is a React component in WordPress!</p>
        </div>
    );
};

// Modern JavaScript feature: Optional chaining
const rootElement = document.getElementById('hello-world-root');
if (rootElement?.innerHTML) {
    render(<HelloWorld />, rootElement);
}

También tienes que poner en cola el script dentro del archivo functions.php de tu tema, o dentro del archivo principal de tu plugin:

function enqueue_hello_world_script() {
    wp_enqueue_script(
        'hello-world-script',
        get_template_directory_uri() . '/build/index.js',
        ['wp-element'],
        filemtime(get_template_directory() . '/build/index.js'),
        true
    );
}

add_action('wp_enqueue_scripts', 'enqueue_hello_world_script');

Una vez que ejecutes el comando npx wp-scripts build, wp-scripts transpilará tu JavaScript y JSX modernos para crear un archivo build/index.js compatible con el navegador.

Comprobaciones de calidad del código y linting sofisticado

El paquete wp-scripts incluye varias herramientas que te ayudarán a mantener la calidad del código y a imponer un estilo coherente en todos tus proyectos: Junto con ESLint y Prettier, también puedes acceder a stylelint para CSS y SCSS linting.

El primer paso es añadir los scripts de linting a tu archivo package.json:

"scripts": {
  "lint:js": "wp-scripts lint-js",
  "lint:css": "wp-scripts lint-style",
  "lint": "npm run lint:js && npm run lint:css"
}

A continuación, crea archivos de configuración personalizados en el directorio raíz de tu proyecto. Por ejemplo, ESLint requiere que trabajes dentro del archivo .eslintrc.js. Este ejemplo (en parte) impone el uso de literales de plantilla para cadenas en tu código JavaScript:

…
module.exports = {
  extends: [
    'plugin:@wordpress/eslint-plugin/recommended',
  ],
  rules: {
    // Custom rules here
    'no-console': 'error',
    'react-hooks/exhaustive-deps': 'warn',
    'prefer-template': 'error',
  },
};
…

Para stylelint, edita el archivo .stylelintrc.js:

…
module.exports = {
  extends: [
    '@wordpress/stylelint-config/scss',
  ],
  rules: {
    // Custom rules here
    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',
    'max-nesting-depth': 3,
  },
};
…

Si mantienes una gran base de código en varios proyectos, tener un estilo de código coherente es crucial. De este modo, puedes ampliar las configuraciones por defecto de ESLint y stylelint para hacer cumplir las normas de codificación de tu agencia.

A partir de aquí, puedes ejecutar npm run lint para poner en marcha este proceso, ampliado con el tipo de linter específico. Por ejemplo, si tienes código que establece alguna concatenación típica…

const name = "World";
console.log("Hello " + name + "!");

…al ejecutar npm run lint:js se marcará un error y se te sugerirá que utilices en su lugar un literal de plantilla:

const name = "World";
console.log(`Hello ${name}!`);

Esta es una forma inestimable de limpiar el código de tu tema o plugin de WordPress y te da la posibilidad de adaptar el conjunto de reglas a tus necesidades y normas específicas.

Pruebas unitarias

Las pruebas unitarias son cruciales para garantizar la fiabilidad y la capacidad de mantenimiento de tu código. La herramienta que utiliza wp-scripts como framework de pruebas es Jest.

Cuando ejecutas el comando test, Jest busca archivos con las extensiones .test.js o .spec.js, o archivos en un directorio __tests__. A continuación, ejecuta las pruebas definidas en estos archivos e informa de los resultados.

Primero tienes que hacer referencia al script de prueba dentro de tu archivo package.json:

…
"scripts": {
  "test": "wp-scripts test-unit-js"
}
…

Si lo necesitas, crea un archivo como src/utils.js:

…
export function capitalizeString(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

export function sum(a, b) {
  return a + b;
}
…

A partir de aquí, crea un archivo de prueba, como src/__tests__/utils.test.js:

import { capitalizeString, sum } from '../utils';

describe('capitalizeString', () => {
  it('capitalizes the first letter of a string', () => {
    expect(capitalizeString('hello')).toBe('Hello');
  });
  it('returns an empty string if given an empty string', () => {
    expect(capitalizeString('')).toBe('');
  });
});

describe('sum', () => {
  it('adds two numbers correctly', () => {
    expect(sum(2, 3)).toBe(5);
  });
  it('handles negative numbers', () => {
    expect(sum(-1, 1)).toBe(0);
  });
});

Una vez que ejecutes el comando npm run test, wp-scripts encontrará y ejecutará automáticamente todos los archivos con la extensión .test.js. También puedes ampliar la configuración predeterminada de Jest para dar soporte a cualquier necesidad avanzada de pruebas, como la cobertura de pruebas:

// jest.config.js
const defaultConfig = require('@wordpress/scripts/config/jest-unit.config');
module.exports = {
  ...defaultConfig,
  setupFilesAfterEnv: ['<rootDir>/tests/setupTests.js'],
  collectCoverageFrom: [
    'src/**/*.js',
    '!src/tests/**/*.js',
    '!src/vendor/**/*.js',
  ],
  coverageThreshold: {
    global: {
      branches: 80,
      functions: 80,
      lines: 80,
      statements: 80,
    },
  },
};

Esta configuración añade un archivo de configuración personalizado, especifica los archivos que se incluirán en los informes de cobertura y establece umbrales de cobertura para garantizar una cobertura de pruebas completa en todos tus proyectos. Cuando ejecutes estas pruebas, Jest proporcionará una salida que mostrará las pruebas que pasan y las que fallan.

Ampliar las capacidades de tus pruebas unitarias de este modo puede ofrecer una mejora significativa de la calidad y fiabilidad de tus temas y plugins de WordPress, y agilizar todo tu proceso de desarrollo.

Cómo integrar wp-scripts en tus flujos de trabajo

El alcance del uso de wp-scripts es tan amplio como necesites. Para ilustrarlo, repasemos algunos enfoques rápidos que podrías adoptar al utilizar wp-scripts para automatizar tareas habituales.

Crear plantillas de proyecto reutilizables

Es probable que tengas que iniciar nuevos proyectos con frecuencia — incluso a diario. Crear una plantilla de proyecto personalizada mediante la preconfiguración de wp-scripts preconfigurado puede ahorrarte mucho tiempo de configuración.

Puedes empezar con un proyecto base: un nuevo tema o plugin de WordPress que incluya tu configuración de wp-scripts:

mkdir my-agency-base-theme
cd my-agency-base-theme
npm init -y
npm install --save-dev @wordpress/scripts

A continuación, configura la estructura del proyecto y crea los directorios y archivos necesarios:

mkdir src build
touch src/index.js src/style.scss
touch functions.php style.css

En este punto, configura wp-scripts y actualiza el archivo package.json con los comandos pertinentes:

{
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
    "lint:js": "wp-scripts lint-js",
    "lint:css": "wp-scripts lint-style",
    "test": "wp-scripts test-unit-js"
  }
}

Puedes ampliar esto para crear configuraciones para webpack, ESLint y stylelint.

Para hacer de esto una plantilla reutilizable a la que sea fácil acceder, lo ideal es un repositorio de GitHub. Por ejemplo, considera un origen remoto de https://github.com/your-agency/theme-template.git.

Cuando comiences un nuevo proyecto, puedes ejecutar un comando sencillo:

npx create-wordpress-theme@latest my-new-theme --template your-agency/theme-template

Esto clonará tu repositorio de plantillas y creará un nuevo tema con tu configuración predefinida wp-scripts.

Puedes personalizar aún más la plantilla añadiendo código boilerplate específico de la agencia, como funciones o componentes de uso común. Es importante mantener actualizado este repositorio de plantillas, utilizando la última versión de wp-scripts e implementando cualquier mejora del flujo de trabajo que decidas.

Control de versiones y colaboración

Cuando se trata de wp-scripts y de trabajar con el control de versiones, puedes hacer más. Aunque, a menudo, debes aplicar algunas prácticas comunes para asegurarte de que mantienes alta la calidad del código:

• Incluye package.json y package-lock.json en el control de versiones. Esto garantiza que todos los miembros del equipo utilizarán las mismas dependencias.
• Asegúrate de incluir en tu archivo .gitignore artefactos de construcción como /build y /node_modules.
• Asegúrate de hacer referencia a todos los scripts que necesites en tu archivo package.json antes de hacer commit.
• Considera la posibilidad de utilizar un archivo .nvmrc para especificar la versión correcta de Node.js para tu proyecto.

Puedes optar por implementar hooks pre-commit a través de herramientas como Husky. Esta es una buena forma de ejecutar un linter antes de cada commit, como ejemplo:

…
"husky": {
    "hooks": {
        "pre-commit": "npm run lint:js && npm run lint:css"
    }
}
…

De este modo, puedes asegurarte de que haces lint y pruebas automáticamente antes de commits y envíos. Es otra forma de mantener la calidad del código en todo tu equipo.

Integración continua y despliegue continuo (CI/CD)

Integrar wp-scripts en tu proceso CI/CD puede agilizar el proceso de despliegue tanto de temas como de plugins. GitHub Actions son sólo una forma de integrar esto en tu configuración de wp-scripts.

El primer paso es crear un archivo de flujo de trabajo dedicado dentro de un directorio de flujos de trabajo de tu repositorio:

name: CI/CD

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - name: Cache dependencies
      uses: actions/cache@v2
      with:
        path: ~/.npm
        key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
    - name: Install dependencies
      run: npm ci
    - name: Run linters
      run: |
        npm run lint:js
        npm run lint:css
    - name: Run tests
      run: npm run test
    - name: Build
      run: npm run build
    - name: Deploy
      if: github.ref == 'refs/heads/main'
      run: |
        # Add your deployment script here
        # For example, using rsync to a remote server:
        # rsync -avzc --delete ./build/ [email protected]:/path/to/wp-content/themes/your-theme/

El paso de despliegue variará en función de tu host. Puedes utilizar rsync, integrarte con servicios como DeployHQ o Buddy, o bien optar por una simple integración cURL. Si tu despliegue requiere contraseñas o claves, debes añadirlas como secretos a la configuración de tu repositorio de GitHub.

Este flujo de trabajo ejecuta linters, pruebas y construye tu proyecto en cada push y pull request. Lo mejor de todo es que sólo se despliega cuando envías cambios a la rama principal.

Crear una herramienta de interfaz de línea de comandos (CLI) personalizada

Si necesitas herramientas personalizadas, wp-scripts puede ayudarte. Por ejemplo, puede que quieras desplegar una herramienta CLI personalizada que se adapte a las necesidades de tu agencia.

En algunos casos, tu herramienta necesitará algunas dependencias:

npm install @wordpress/scripts commander chalk

Aquí, Commander analiza los argumentos de la línea de comandos, y Chalk mejora la presentación visual del texto de salida.

A partir de aquí, puedes empezar a codificar la herramienta aprovechando wp-scripts. Aquí tienes un ejemplo de cómo quedaría ese archivo:

#!/usr/bin/env node
const { program } = require('commander');
const { spawn } = require('child_process');
const path = require('path');
const chalk = require('chalk');

const wpScripts = path.resolve(__dirname, './node_modules/.bin/wp-scripts');

const runWpScripts = (script, args) => {
  console.log(chalk.blue(`Running wp-scripts ${script}...`));
  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });
  result.on('exit', (code) => {
    if (code !== 0) {
      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));
    }
  });
};

program
  .version('1.0.0')
  .description('Custom WordPress development CLI for Agency XYZ');

program
  .command('build')
  .description('Build the project')
  .action(() => runWpScripts('build'));

program
  .command('start')
  .description('Start the development server')
  .action(() => runWpScripts('start'));

program
  .command('lint')
  .description('Lint JavaScript and CSS files')
  .action(() => {
    runWpScripts('lint-js');
    runWpScripts('lint-style');
  });

program
  .command('test')
  .description('Run unit tests')
  .action(() => runWpScripts('test-unit-js'));

program
  .command('deploy')
  .description('Deploy the project')
  .action(() => {
    console.log(chalk.green('Deploying project...'));
    // Add your deployment logic here
    // For example:
    // spawn('rsync', ['-avz', 'build/', 'user@server:/path/to/wordpress/wp-content/themes/your-theme/']);
  });

program.parse(process.argv);

Si añades el campo bin a tu archivo package.json, podrás convertir la herramienta CLI en un ejecutable:

…
{
  "name": "agency-wp-cli",
  "version": "1.0.0",
  "bin": {
    "agency-wp": "./cli.js"
  },
  // ... other fields
}
…

Para enlazar la CLI para una instalación local, sólo tienes que ejecutar npm link. Ahora puedes probar la CLI en tu aplicación Terminal:

agency-wp build
agency-wp lint
agency-wp deploy

Deberías publicar la herramienta en un registro npm privado para que otros miembros del equipo puedan instalarla cuando lo deseen:

npm publish --registry=https://your-private-registry.com

Cuando la necesiten, sólo tendrán que ejecutar npm install --save-dev agency-wp-cli para instalar su herramienta. Desde aquí, puedes hacer referencia a la CLI dentro de package.json:

{
  "scripts": {
    "build": "agency-wp build",
    "start": "agency-wp start",
    "lint": "agency-wp lint",
    "test": "agency-wp test",
    "deploy": "agency-wp deploy"
  }
}

Crear y utilizar una herramienta como ésta garantiza que todos los miembros de tu agencia utilicen los mismos comandos y procesos. Esto puede reducir las incoherencias y agilizar aún más tu flujo de trabajo de desarrollo de WordPress.

Optimización del rendimiento

Cuando gestionas varios sitios de WordPress con mucho tráfico, la optimización del rendimiento se vuelve crucial para tu rendimiento. Hay varias técnicas avanzadas que wp-scripts puede ayudarte a implementar.

División avanzada del código

Por ejemplo, la división de código te permite dividir tu paquete JavaScript en trozos más pequeños, que puedes cargar bajo demanda. Esto puede aumentar tus tiempos de carga iniciales, especialmente en aplicaciones grandes.

En primer lugar, modifica tu archivo webpack.config.js para activar la división del código:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  entry: {
    main: './src/index.js',
    admin: './src/admin.js',
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].[contenthash].js',
  },
  optimization: {
    ...defaultConfig.optimization,
    splitChunks: {
      chunks: 'all',
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name(module) {
            const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
            return `vendor.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  },
};

A lo largo de tu código JavaScript, utilizas importaciones dinámicas para dividirlo en trozos más pequeños:

// Instead of: import { heavyFunction } from './heavyModule';

button.addEventListener('click', () => {
  import('./heavyModule').then(module => {
    module.heavyFunction();
  });
});

También tienes que poner en cola cada fragmento dentro de tus archivos de WordPress:

function enqueue_split_scripts() {
  $asset_file = include(get_template_directory() . '/build/index.asset.php');  

  wp_enqueue_script('main', get_template_directory_uri() . '/build/main.js', $asset_file['dependencies'], $asset_file['version'], true);
  wp_enqueue_script('admin', get_template_directory_uri() . '/build/admin.js', $asset_file['dependencies'], $asset_file['version'], true);
}
add_action('wp_enqueue_scripts', 'enqueue_split_scripts');

Esto debería reducir los tiempos de carga y tampoco lleva demasiado tiempo implementarlo.

Tree shaking

En el contexto de JavaScript, «tree shaking» es la forma de deshacerse del código no utilizado. Tanto wp-scripts como webpack realizan el «tree shaking» en las construcciones de producción, pero puedes optimizarlo aún más. La aplicación es más compleja de lo que explicamos aquí, pero en cualquier caso, debes asegurarte de que utilizas la sintaxis de importación y exportación de ES6:

// Good for tree shaking
export function usedFunction() { /* ... */ }

// Bad for tree shaking
module.exports = {
  usedFunction: function() { /* ... */ },
};

A continuación, especifica los archivos con «side effects» (efectos secundarios) …

{
  "name": "your-package",
  "sideEffects": ["*.css", "*.scss"]
}

…o márcalos como libres de side effects:

{
  "name": "your-package",
  "sideEffects": false
}

Algunas bibliotecas de mayor tamaño no admiten tree shaking, al igual que muchas otras. En estos casos, debes utilizar un plugin específico para el trabajo:

npm install --save-dev babel-plugin-transform-imports

Esto también significará que deberás actualizar también tus archivos de configuración de babel para una instalación óptima y sin errores.

Optimización de activos

El proceso de construcción de wp-scripts minimizará los archivos CSS y JavaScript por ti, y tú también puedes llevar esto más allá. Por ejemplo, puedes instalar un plugin específico de optimización de imágenes:

npm install --save-dev imagemin-webpack-plugin

Una vez que lo añadas a tu archivo de configuración de webpack, podrás utilizar sugerencias de recursos añadiendo el código adecuado a tu archivo functions.php o al archivo principal del plugin:

function add_resource_hints( $urls, $relation_type ) {
  if ( 'preconnect' === $relation_type ) {
    $urls[] = 'https://fonts.googleapis.com';
    $urls[] = 'https://fonts.gstatic.com';
  }
  return $urls;
}

add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

Una tarea como ésta muestra la flexibilidad que tienes con wp-scripts, en la medida en que puedes adaptarlo a las necesidades de tu agencia o proyecto.

Analizar el tamaño del paquete

Comprender la composición de tu paquete es crucial para la optimización. Con wp-scripts, puedes hacerlo fácilmente con la bandera --analyze.

npm run build -- --analyze

El primer paso es añadir el script correspondiente a tu archivo package.json:

{
  "scripts": {
    "analyze": "wp-scripts build --analyze"
  }
}

Una vez que ejecutes el comando analyze, generará un informe que muestra el tamaño de cada módulo de tu paquete. Esta sencilla implementación te ayuda a identificar áreas de optimización.

Implementación del CSS crítico

El CSS crítico de tu sitio es lo mínimo que necesita tu página para cargar el contenido de la parte superior de la página. Al poner este CSS inline puedes mejorar el tiempo de carga percibido.

Para conseguirlo se necesita el plugin Critical CSS Webpack:

npm install --save-dev critical-css-webpack-plugin

La siguiente tarea es actualizar tu archivo de configuración de webpack para que haga referencia al plugin:

const CriticalCssPlugin = require('critical-css-webpack-plugin');
const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
  ...defaultConfig,
  plugins: [
    ...defaultConfig.plugins,
    new CriticalCssPlugin({
      base: 'dist/',
      src: 'index.html',
      target: 'styles/critical.css',
      extract: true,
      inline: true,
      minify: true,
      dimensions: [
        {
          height: 500,
          width: 300,
        },
        {
          height: 900,
          width: 1300,
        },
      ],
    }),
  ],
};

Para poder utilizarlo, tienes que añadir un fragmento a tu archivo header.php:

<style>
  <?php echo file_get_contents(get_template_directory() . '/build/styles/critical.css'); ?>
</style>

Esto básicamente extrae y pone inline el CSS crítico para un renderizado inicial más rápido. Genera CSS crítico para tamaños de ventana específicos, lo que puede mejorar el tiempo de carga percibido de tus temas.

Resumen

Para el desarrollo de una agencia, wp-scripts puede ser una poderosa herramienta que mejore significativamente tu flujo de trabajo, tanto para proyectos de temas como de plugins. Al proporcionar un proceso de creación estandarizado, compatibilidad moderna con JavaScript y herramientas integradas de pruebas y linting, wp-scripts te permite centrarte en crear proyectos de WordPress de alta calidad mientras automatizas algunas de las tareas más importantes.

Aprovechar wp-scripts no sólo te ayuda a mantenerte al día con las prácticas modernas de desarrollo. Es una forma de situarte a la vanguardia del desarrollo de WordPress, listo para afrontar los retos y oportunidades que se le presenten a tu agencia.

¿Ofrece wp-scripts la funcionalidad y el alcance que necesitas para los proyectos de desarrollo de tu agencia? ¡Comparte tus opiniones con nosotros en la sección de comentarios más abajo!