wp-build-tools

Name: wp-build-tools
Author: mralaminahamed

25stars3forks

How to install wp-build-tools?

mralaminahamed/wp-dev-skills/wp-build-tools

$npx -y skills add mralaminahamed/wp-dev-skills --skill wp-build-tools

Installs into the current project.

Summary

Use when setting up, configuring, or debugging the JavaScript/CSS build pipeline for a WordPress plugin — @wordpress/scripts, webpack (webpack.config.js, entry points, externals), Vite, block editor asset compilation with block.json, enqueueing built assets with .asset.php depend

Files · 1

View on GitHub

SKILL.md

1	# WordPress Plugin Build Tools
2
3	> Model note: Config setup and `.asset.php` enqueue patterns are mechanical — `haiku` covers most cases. Debugging webpack entry-point conflicts or reusing a dependency plugin's bundled library may need `sonnet`.
4
5	Configure and operate the JS/CSS build pipeline for WordPress plugins: `@wordpress/scripts` (webpack-based), Vite alternative, asset manifest handling, and correct enqueuing with the generated `.asset.php` dependency file.
6
7	## When to use
8
9	- "Set up `@wordpress/scripts`", "configure webpack for my plugin".
10	- "Build blocks and admin scripts", "compile Sass for a plugin".
11	- "Why isn't my JS loading?", "fix asset enqueue with versioned hash".
12	- "Switch from @wordpress/scripts to Vite".
13	- "Set up separate entry points for front-end vs admin vs block editor".
14
15	Not for: Block registration, `block.json` structure, or Gutenberg API — use the official `wp-block-development` skill. PHP-side REST API — use `wp-rest-api`.
16
17	## Method
18
19	### 1. Install @wordpress/scripts
20
21	```bash
22	npm install --save-dev @wordpress/scripts
23	```
24
25	`package.json`:
26	```json
27	{
28	"scripts": {
29	"build": "wp-scripts build",
30	"start": "wp-scripts start",
31	"lint:js": "wp-scripts lint-js",
32	"lint:css": "wp-scripts lint-style"
33	}
34	}
35	```
36
37	Default entry point: `src/index.js` → `build/index.js` + `build/index.asset.php`.
38
39	### 2. Multiple entry points
40
41	Create `webpack.config.js` at plugin root to override the default entry:
42
43	```js
44	const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
45
46	module.exports = {
47	...defaultConfig,
48	entry: {
49	'admin': './src/admin/index.js',
50	'frontend': './src/frontend/index.js',
51	'block-editor': './src/blocks/index.js',
52	'style-admin': './src/admin/admin.scss',
53	},
54	};
55	```
56
57	Outputs:
58	```
59	build/
60	├── admin.js + admin.asset.php
61	├── frontend.js + frontend.asset.php
62	├── block-editor.js + block-editor.asset.php
63	└── style-admin.css (no .asset.php for pure CSS entry)
64	```
65
66	### 3. Enqueue assets correctly
67
68	The `.asset.php` file contains the dependency array and a content hash — always use it.
69
70	```php
71	function my_plugin_enqueue_admin_assets() {
72	$asset_file = plugin_dir_path( __FILE__ ) . 'build/admin.asset.php';
73	if ( ! file_exists( $asset_file ) ) return;
74
75	$asset = include $asset_file;
76
77	wp_enqueue_script(
78	'my-plugin-admin',
79	plugin_dir_url( __FILE__ ) . 'build/admin.js',
80	$asset['dependencies'], // auto-includes wp-element, wp-i18n, etc.
81	$asset['version'], // content hash — cache busted on change
82	true // in footer
83	);
84
85	wp_enqueue_style(
86	'my-plugin-admin-style',
87	plugin_dir_url( __FILE__ ) . 'build/style-admin.css',
88	[],
89	$asset['version']
90	);
91
92	// Pass PHP data to JS
93	wp_localize_script( 'my-plugin-admin', 'myPluginData', [
94	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
95	'nonce' => wp_create_nonce( 'my_plugin_action' ),
96	'apiUrl' => rest_url( 'my-plugin/v1/' ),
97	] );
98	}
99	add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue_admin_assets' );
100	```
101
102	For block assets registered via `block.json` — do NOT manually enqueue; WP handles it:
103	```php
104	register_block_type( __DIR__ . '/build/my-block' ); // reads block.json automatically
105	```
106
107	### 4. Sass / PostCSS
108
109	`@wordpress/scripts` supports Sass out of the box (via webpack sass-loader). No extra config needed for `.scss` files imported in JS:
110
111	```js
112	// src/admin/index.js
113	import './admin.scss';
114	```
115
116	For standalone `.scss` entry (CSS-only build):
117	```js
118	// webpack.config.js entry
119	entry: {
120	'admin-styles': './src/admin/admin.scss',
121	}
122	```

People who liked this also viewed

6 picks

Type

wp-build-tools

25stars3forks

View on GitHub

How to install wp-build-tools?

mralaminahamed/wp-dev-skills/wp-build-tools

$npx -y skills add mralaminahamed/wp-dev-skills --skill wp-build-tools

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WordPress Plugin Build Tools
2
3	> Model note: Config setup and `.asset.php` enqueue patterns are mechanical — `haiku` covers most cases. Debugging webpack entry-point conflicts or reusing a dependency plugin's bundled library may need `sonnet`.
4
5	Configure and operate the JS/CSS build pipeline for WordPress plugins: `@wordpress/scripts` (webpack-based), Vite alternative, asset manifest handling, and correct enqueuing with the generated `.asset.php` dependency file.
6
7	## When to use
8
9	- "Set up `@wordpress/scripts`", "configure webpack for my plugin".
10	- "Build blocks and admin scripts", "compile Sass for a plugin".
11	- "Why isn't my JS loading?", "fix asset enqueue with versioned hash".
12	- "Switch from @wordpress/scripts to Vite".
13	- "Set up separate entry points for front-end vs admin vs block editor".
14
15	Not for: Block registration, `block.json` structure, or Gutenberg API — use the official `wp-block-development` skill. PHP-side REST API — use `wp-rest-api`.
16
17	## Method
18
19	### 1. Install @wordpress/scripts
20
21	```bash
22	npm install --save-dev @wordpress/scripts
23	```
24
25	`package.json`:
26	```json
27	{
28	"scripts": {
29	"build": "wp-scripts build",
30	"start": "wp-scripts start",
31	"lint:js": "wp-scripts lint-js",
32	"lint:css": "wp-scripts lint-style"
33	}
34	}
35	```
36
37	Default entry point: `src/index.js` → `build/index.js` + `build/index.asset.php`.
38
39	### 2. Multiple entry points
40
41	Create `webpack.config.js` at plugin root to override the default entry:
42
43	```js
44	const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
45
46	module.exports = {
47	...defaultConfig,
48	entry: {
49	'admin': './src/admin/index.js',
50	'frontend': './src/frontend/index.js',
51	'block-editor': './src/blocks/index.js',
52	'style-admin': './src/admin/admin.scss',
53	},
54	};
55	```
56
57	Outputs:
58	```
59	build/
60	├── admin.js + admin.asset.php
61	├── frontend.js + frontend.asset.php
62	├── block-editor.js + block-editor.asset.php
63	└── style-admin.css (no .asset.php for pure CSS entry)
64	```
65
66	### 3. Enqueue assets correctly
67
68	The `.asset.php` file contains the dependency array and a content hash — always use it.
69
70	```php
71	function my_plugin_enqueue_admin_assets() {
72	$asset_file = plugin_dir_path( __FILE__ ) . 'build/admin.asset.php';
73	if ( ! file_exists( $asset_file ) ) return;
74
75	$asset = include $asset_file;
76
77	wp_enqueue_script(
78	'my-plugin-admin',
79	plugin_dir_url( __FILE__ ) . 'build/admin.js',
80	$asset['dependencies'], // auto-includes wp-element, wp-i18n, etc.
81	$asset['version'], // content hash — cache busted on change
82	true // in footer
83	);
84
85	wp_enqueue_style(
86	'my-plugin-admin-style',
87	plugin_dir_url( __FILE__ ) . 'build/style-admin.css',
88	[],
89	$asset['version']
90	);
91
92	// Pass PHP data to JS
93	wp_localize_script( 'my-plugin-admin', 'myPluginData', [
94	'ajaxUrl' => admin_url( 'admin-ajax.php' ),
95	'nonce' => wp_create_nonce( 'my_plugin_action' ),
96	'apiUrl' => rest_url( 'my-plugin/v1/' ),
97	] );
98	}
99	add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue_admin_assets' );
100	```
101
102	For block assets registered via `block.json` — do NOT manually enqueue; WP handles it:
103	```php
104	register_block_type( __DIR__ . '/build/my-block' ); // reads block.json automatically
105	```
106
107	### 4. Sass / PostCSS
108
109	`@wordpress/scripts` supports Sass out of the box (via webpack sass-loader). No extra config needed for `.scss` files imported in JS:
110
111	```js
112	// src/admin/index.js
113	import './admin.scss';
114	```
115
116	For standalone `.scss` entry (CSS-only build):
117	```js
118	// webpack.config.js entry
119	entry: {
120	'admin-styles': './src/admin/admin.scss',
121	}
122	```

People who liked this also viewed

6 picks

Type