Working With JavaScript

Developing JavaScript, using the files in your plugins, using plugins generated with Plugin Machine.

If you enable the blocks features, or add an admin page that uses React, Plugin Machine will add all the files and configuration you need for a WordPress-safe development and production builds. You will need to install dependencies and build files using npm or yarn. These steps are documented in the plugin readme.

Working With The Plugin

After you download the development build of your plugin, you can open the files in vsCode or any other IDE.  Once you download the development version of your plugin, if you enabled admin pages or blocks that require a build step, there will be instructions in the README for compiling the code.

Blocks

The code for the blocks is inside the “blocks” directory. There is one sub-directory per block. The blocks use API version 2 and use the WordPress scripts package for compilation.

All attributes and other block meta should be defined in block.json. Edit.js is used for the edit callback of the block and Save.js is used for the save callback of the blockThe index.js file imports the other files, and registers the block.

Admin Pages

The code for the blocks is inside the “admin” directory. There is one sub-directory per block. These pages use the same WordPress scripts package for compilation as the blocks.

Adding Entry Points

You can add additional JavaScript entry points to your plugin, by modifying the “entryPoints.js” file. That file, exports a JavaScript object with two arrays: “blocks” and “admin”. You can modify those arrays to add new entrypoints.

For example, if you add a new JavaScript file at “/admin/profile-menu/index.js”, and add “profile-menu” to the “admin” array in “entryPoints.js”, then you will be able to compile that entry point. Or, if you add a new JavaScript file at “/blocks/profile-block/index.js”, and add profile-block” to the “blocks” array in “entryPoints.js”, then you will be able to compile that entry point.