JavaScript Build Setup For Development of WordPress Blocks – NodeJS

access_timepersonjunaidte14folderTech, Wordpress

JavaScript build setup helps to speed-up the development of WordPress blocks and creates the two main files i.e. build/index.js and build/index.asset.php which are used while developing the actual WordPress block inside plugin or functions.php of WordPress installation. The index.js file contain the compiled code (from ESNext and JSX syntaxt to plain JavaScript) for the actual WordPress block and index.asset.php file contains the dependencies and version information (generated from the used packages) to be injected while registering the WordPress block. Follow the steps below to configure the JavaScript Build Setup for WordPress block development.

  • Download and install NodeJS
  • To create a new WordPress block project, run the command npm init. Fill the necessary information. See following code (Creating package.json File Using npm init Command:) for reference
  • Run the command npm install –save-dev –save-exact @wordpress/scripts . @wordpress/scripts compiles the ESNext and JSX syntaxes used for the development of WordPress blocks into plain JavaScript code. The block code (in ESNext and JSX) will be written in src/index.js and the script will output the compiled code at build/index.js.
  • To create Test block, go into create a folder named as src and inside that folder create a new file named as index.js (code for test block will be inside this file). See reference code as following (Test Block Code – src/index.js)
  • To build/compile this code we need to add the command ( "build": "wp-scripts build" ) in scripts section in package.json file
  • Now we can run the command: npm run build to compile the Test Block code to plain JavaScript. The compiled code will be in build/index.js file. This file is then en-queued in admin side of WordPress to load the block in WordPress Gutenberg Editor. It also creates a file named build/index.asset.php which is used while creating the block in WordPress plugin and this file loads version and dependencies information automatically.
  • The command: "start": "wp-scripts start" can be defined in scripts section in package.json file. This command doesn’t shrink the source file and hence very helpful while developing the block. Moreover, it monitors the changes in the files and reload the updated version when we hit the save button without compiling the code again.
  • In conclusion, we can say that this JavaScript build setup helps to speed-up the development of WordPress blocks and creates the two main files i.e. build/index.js and build/index.asset.php which are used while developing the actual WordPress block inside plugin or functions.php of WordPress installation.

Creating package.json File Using npm init Command:

npm init

package name: (wpblocks)
version: (1.0.0)
description: Test WordPress Block
entry point: (index.js) build/index.js
test command:
git repository:
keywords:
author: Junaid Hassan
license: (ISC) GPL-2.0-only
About to write to E:\gitlab\wpblocks\package.json:

{
  "name": "wpblocks",
  "version": "1.0.0",
  "description": "Test WordPress Block",
  "main": "build/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Junaid Hassan",
  "license": "GPL-2.0-only"
}


Is this OK? (yes) yes

Test Block Code – src/index.js

import { registerBlockType } from '@wordpress/blocks';

registerBlockType( 'gutenberg-test-block/test-block', {
    title: 'Hello World Block',
    icon: 'smiley',
    category: 'layout',
    edit: () => <div>Hello World!</div>,
    save: () => <div>Hello World!</div>,
} );

Leave a Comment