How to npm init/install/run build properly in a wordpress plugin?

user_1088949 0
Viewed 1785

It may be a dumb question but I feel that I'm floundering around attempting to edit the wordpress plugin that I downloaded from github repo: https://github.com/WordPress/gutenberg-examples.

Right now, I'm following the block tutorial from https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/.

So what I did:

  1. download the pre-built plugin in zip folder
  2. upload it to wordpress site that I created in docker (https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/)
  3. open the zip folder and move it to my plugins directory
  4. open, for example, "01-basic-esnext" folder inside the gutenberg-examples folder and edit in block.build.js. The changes I made would be shown in the block editor in the wordpress post that I created.

However, what I'm confused about is the npm stuff that's mentioned in "Development" section.

For each of the examples that include an esnext example the following commands are required to build the plugins:

To install the node packages

npm install

To build the production version of the plugin

npm run build

To build a development version, change to the local directory of the block you are working on, and run npm start to watch for changes and automatically rebuild as you develop.

cd 01-basic-esnext/
npm start

Before that, the "Development" section already mentioned building a docker/wordpress environment for the plugin right inside the gutenberg-examples folder.

However, the way I set up my stuff is different. I already have a docker running in my wordpress folder like what I followed in https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/ and this plugin is already in my plugins directory. I can easily edit the files in visual studio code and see the changes in my local wordpress site.

So should I be doing something to install the npm stuff or leave it alone?

npm docker node.js wordpress
1 Answers

npm is used for these WordPress plugins because the -esnext versions of the examples get built from Javascript modules. The build process runs on npm and nodejs. That means, if you work on that -esnext code, that you're living in a hybrid world -- you have php and apache running your development web server, and you have nodejs and npm handling your builds.

The WordPress team carefully rigged a docker setup to support the process of edit / run for you. So if you use your own docker setup, you won't get the benefit of theirs.

When you have finished your development effort, you can use npm run build to build a .zip file which you can then install in your own WordPress instances using the Upload Plugin button at the top of the Add Plugins page.

Code is poetry, for sure. But development environments are not.

user_2056080
Related