Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Creating block plugins for WordPress with Node.js
    WordPress block plugins Node.js create block plugin WordPress development JavaScript build setup @wordpress/create-block


Creating block plugins for WordPress with Node.js


To create block plugins for WordPress using Node.js, follow these steps:

1. Install Node.js and npm:
- Ensure you have Node.js installed on your machine. If not, download and install it from the official Node.js website[1][2].

2. Set Up a Starter Block Plugin:
- Navigate to the `wp-content/plugins` directory of your local development install. Then, run the `npx @wordpress/create-block` command to scaffold a block plugin. This command generates all the necessary code to start a project and integrates a modern JavaScript build setup with no configuration required[3][4].

3. Configure the Block Plugin:
- The `create-block` command prompts you for inputs step-by-step. You can also use quick start mode to pass specific options directly in the command line, eliminating the need for interactive prompts[4].

4. Build and Run the Block Plugin:
- Run `npm start` to start a development server and automatically rebuild the block whenever any code change is detected. When you are ready to deploy your block, use `npm run build` to optimize your code and make it production-ready[4].

5. Integrate with WordPress:
- Activate the generated plugin in WordPress. This will make the block available in the Editor[4].

6. Customize and Extend the Block:
- Modify the boilerplate code to customize and extend the block as needed. This involves using modern JavaScript (ESNext and JSX) and leveraging the `wp-scripts` package for build and linting tasks[4].

By following these steps, you can create and manage custom block plugins for WordPress using Node.js and the `@wordpress/create-block` package.

Citations:
[1] https://wpdevelopment.courses/articles/wordpress-create-block/
[2] https://kinsta.com/courses/gutenberg-block-development/setting-up-a-block-plugin/
[3] https://www.npmjs.com/package/%40wordpress/create-block
[4] https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/
[5] https://www.youtube.com/watch?v=-aa4F4Dn9GY