WordPress introduced @wordpress/scripts npm package. It is a collection of reusable scripts for WordPress Development. We will learn about how to create a Custom Gutenberg block using ES6 , JSX and @wordpress/scripts package.
Since most browsers cannot interpret or run ES6 and JSX, we need to use tools Babel to transform these syntaxes, to the code that browsers can understand. Also by using a build tool like Webpack, we can organize our code into smaller modules and then bundle them together into a single download.

The @wordpress/scripts package abstracts these libraries away to standardize and simplify development, so you won’t need to handle the details for configuring those libraries.

You can also watch the previous videos Introduction to Gutenberg and Create Gutenberg using ES5 .

Setting up a custom Gutenberg block plugin:

We will use @wordpress/scripts npm package, which installs the required dependencies and handles default configuration for webpack and Babel.

So let’s create a directory called myguten-block and install @wordpress/scripts package using npm inside of it. The — save-exact installs the exact version of the @wordpress/scripts package

cd wordpress/wp-content/plugins
mkdir myguten-block
cd myguten-blocknpm initnpm i --save-dev --save-exact @wordpress/scripts

This will install all the required packages and dependencies inside a node_module directory. Please note that it uses src/index.js as its entry point and will output the bundled file called index.js inside build directory.
We will write our block related code inside src/index.js which webpack will bundle into build/index.js , and we can then enqueue build/index.js using our plugin.

So let’s also create two directories src and build

This is a CLI and exposes a binary called wp-scripts so you can call it directly. So let’s add these script in the package.json

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

When you run,

npm run start it will run webpack in watch mode, so if you make changes in your src/index.js file, it will automatically create a bundle for it real-time. This is used in the development environment.
npm run build command, it will create a bundled file called index.js inside build directory, which will be the transformed code, ready for production.

Register your block

You can register a block by registering a new block type definition using a function called registerBlockType It takes two arguments :

1-A block name ( A unique string to identify the block in a format namespace/block-name )
2-A block configuration object ( Contains a few properties that are required before the block can be registered. Object [ { key: value } ] )

namespace is the name of your theme or plugin.
This name is used on the comment delimiters as <!-- wp:namespace/block-name --> when the post is saved into the database.

Now let’s register our block by calling registerBlockType() . Here myguten-blockis the namespace ( our plugin directory name ) and test-block is the block name. Then we need to put the title, description, icon, and category.

The edit function describes the structure of the block and represents what the editor will render when the block is used on the dashboard.

The save function defines how the attribute will combine together to generate a final mark up that then serialized and saved into the database. It will decide how your content would look at the front end.

Let’s bundle this file by running webpack in watch mode by using npm run start

npm run start

Create CSS files

The src/editor.css file will contain styles for how our custom block will look in the editor

.wp-block-myguten-test-block {
    color: cornflowerblue;
}

The src/style.css will contain styles for how our custom block will look at the front end

 // src/style.css
.wp-block-myguten-test-block {
    color: tomato;
}

Create a plugin file and enqueue your file

While the block’s editor behaviors are implemented in JavaScript, you’ll need to register your block server-side to ensure that the script is enqueued when the editor loads.

So let’s create a plugin file and enqueue the bundled file build/index.js, our stylesheets src/editor.css and src/style.css

Note the two script dependencies:

• wp-blocks includes block type registration and related functions
• wp-element includes the WordPress Element abstraction for describing the structure of your blocks
• wp-editor includes components like RichText

Linting Tools

@wordpress-package also, help you enforce coding style guidelines for your JavaScript, CSS Files. Let’s add this script to your package.json file

"scripts": {
  "lint:js": "wp-scripts lint-js src/index.js",
  "lint:js-fix": "wp-scripts lint-js src/index.js --fix",
  "lint:css": "wp-scripts lint-style '**/*.css'",
}

Now when you run npm run lint:js and npm run lint:css, it will display all the errors and warnings for you JavaScript File and CSS files respectively. It also gives you option to fix those errors by adding a — fix flag for JS files

npm run lint:js

npm run lint:css

Check engines and license

It can check if you have the required node version installed and if you have the correct license.

"scripts": {
  "check-engines": "wp-scripts check-engines",
  "check-licenses": "wp-scripts check-licenses --prod --gpl2 --ignore=abab",
}

Let’s check our engines

npm run check-engines

npm run check-licenses

The license that should be defined under your package.json file must beGPL-2.0-or-later

Overriding @wordpress/scripts Webpack default config

The @wordpress/scripts already provides a default configuration for webpack Unless you really need it, you should not override these defaults. However, if you do want to override them, you can create your own webpack configuration file called webpack.config.js into the same directory where your package.json lives.

Example:

// webpack.config.js
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaultConfig,
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.svg$/,
        use: ["@svgr/webpack", "url-loader"]
      }
    ]
  }
};

If you want to add custom entry point and output point, you can define custom scripts like this: ( use the script name wp-scripts build and then entry-point file path and then output file path. Paths for custom entry points are relative to the project root.

"scripts": {
"build:dynamic-block": "wp-scripts build dynamic-block/block.js --output-path=dist"
 },