Playbook

Le composant @wordpress/scripts en bref

Plutôt que de passer des heures à configurer Webpack, Babel, ESLint, Prettier, et compagnie, ce package te file tout ça clé en main pour que tu puisses te concentrer sur ton dev WordPress. En gros, il te donne des commandes pour compiler, vérifier la qualité de ton code, formater le tout, et même faire des tests. Hyper pratique si tu veux créer des blocs Gutenberg ou des thèmes modernes sans te prendre la tête.

Le gros atout de @wordpress/scripts, c’est qu’il te libère de la configuration manuelle de tous ces outils dev. T’as une config prête à l’emploi qui tourne nickel pour WordPress, mais si t’as besoin d’aller plus loin, tu peux toujours personnaliser.

Cas d’usages

Lorsque tu crées ou maintiens un site WordPress, voilà où @wordpress/scripts peut vraiment t’aider :

  • Développement de blocs Gutenberg : si tu veux créer des blocs interactifs avec React, JSX, ou des fonctionnalités modernes, @wordpress/scripts te permet de te lancer rapidement sans avoir à configurer Babel ou Webpack manuellement. Tout est optimisé pour les blocs.
  • Création de thèmes WordPress modernes : si tu développes un thème moderne avec du JavaScript et que tu as besoin d’un processus de build efficace (compilation, minification, etc.), @wordpress/scripts te permet d’avoir un workflow en place rapidement. Ton code sera compilé et minifié sans effort.
  • Optimisation des performances : le package minifie automatiquement ton JavaScript pour la production, ce qui te permet de gagner en vitesse de chargement et en performance sans avoir à manipuler les configurations de Webpack.
  • Meilleure qualité de code : @wordpress/scripts inclut des outils comme ESLint et Prettier, qui aident à maintenir un code propre et cohérent. Tu peux exécuter des scripts de linting et formatting pour t’assurer que ton code respecte des bonnes pratiques.
  • Configuration rapide des tests unitaires : besoin d’écrire des tests pour t’assurer que ton code fonctionne comme prévu ? Tu peux utiliser wp-scripts test pour intégrer des tests unitaires dans ton projet sans avoir à configurer Jest manuellement.
  • Build automatique en développement : pendant que tu développes, wp-scripts start permet de surveiller tes fichiers et de les recompiler automatiquement dès qu’il y a un changement. C’est un gain de temps énorme pour un cycle de développement itératif.
  • Pour les dev JavaScript-driven : si tu travailles sur un plugin qui repose lourdement sur JavaScript (comme des sliders personnalisés, des intégrations API, ou des tableaux de bord interactifs), @wordpress/scripts te permet de gérer l’ensemble de la chaîne de développement front-end, du développement à la production.
  • Support de CSS moderne : même si le focus est sur le JavaScript, @wordpress/scripts prend également en charge le traitement des fichiers CSS avec PostCSS. Tu peux facilement compiler et minifier ton CSS pour tes projets WordPress.

Pour commencer avec @wordpress/script :

  1. Installe le package en tant que dépendance de développement :
npm install @wordpress/scripts --save-dev
  1. Ajouter les scripts à ton package.json.
"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start",
}
  1. Dans le répertoire /src, crée un fichier JavaScript index.js. Pour l’exemple, tu vas juste afficher un message dans la console :
console.log('Hello, world!');
  1. Compiler ton fichier pour la production.

Maintenant, tu peux compiler ton fichier avec wp-scripts build pour obtenir une version prête à l’emploi dans un fichier minifié.

npm run build

Après cette commande, un fichier build/index.js sera généré. Tu pourras inclure ce fichier dans ton thème ou ton plugin WordPress comme n’importe quel autre fichier JS.

  1. Intégrer dans WordPress

Dans ton plugin ou thème, il te suffit ensuite d’enregistrer le script dans WordPress :

function selina_enqueue_scripts() {
    wp_enqueue_script(
        'mon-plugin-script',
        plugin_dir_url( __FILE__ ) . 'build/index.js',
        array(),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'selina_enqueue_scripts' );

En quelques étapes simples, tu as intégré @wordpress/scripts pour gérer ton JavaScript et l’optimiser, sans te soucier des détails de configuration de Webpack ou Babel.

Tu peux maintenant te concentrer sur l’écriture de ton code !