Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Creating block plugins for WordPress with Node.js


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