@kcroyweb/vite-plugin-wp-helper

Vite plugin to make WordPress block development possible with a regular JS/TS setup within vite.

Installation

You can install the package using npm, pnpm, or yarn:

# npm
npm install @kcroyweb/vite-plugin-wp-helper --save-dev

# pnpm
pnpm add -D @kcroyweb/vite-plugin-wp-helper

# yarn
yarn add @kcroyweb/vite-plugin-wp-helper --dev

Usage

Add the plugin to your vite.config.js or vite.config.ts file:

// vite.config.js
import { defineConfig } from 'vite';
import { wpHelper } from '@kcroyweb/vite-plugin-wp-helper';

export default defineConfig({
  plugins: [
    wpHelper({
      srcBlockDir: 'src/blocks',
    }),
  ],
});

How it Works

This plugin is designed to simplify the build process for WordPress blocks within a Vite environment. It automates several tasks that are typically handled by @wordpress/scripts.

During the build process (vite build), the plugin will:

1. Scan the srcBlockDir directory for any block.json files.
2. For each block.json found, it will build the corresponding index.js/ts, editor.js/ts, and view.js/ts entry points using Vite.
3. It automatically handles externalizing WordPress dependencies (like @wordpress/blocks, react, etc.) and maps them to the correct wp global variables.
4. It generates a .asset.php file for each JavaScript entry point, containing the dependency list and a version hash, which is required for enqueuing scripts in WordPress.
5. It processes style.css and editor.css files with PostCSS and places the output alongside the block's other assets.
6. The final compiled block assets and the updated block.json file are placed in the output directory.

Options

srcBlockDir

• Type: string
• Required: true

The source directory where your WordPress blocks are located. The plugin will recursively search this directory for block.json files.

outDir

• Type: string
• Default: 'dist'

The output directory where the compiled block assets will be placed.

License

This project is licensed under the ISC License.