Create Gutenberg Block with NPX Node Enviroment

by: myfreeonlinetoolsPosted on:

Require for Create Gutenberg Block with NPX (Node)

  1. Code editor
  2. Node.js development tools
  3. Local WordPress environment

Firstly, go to your WordPress plugin directory, and then open it on the terminal (CMD), and then type code. It’s open at Vishal Studio.

Open the Vishal Studio terminal and paste the code below.

npx @wordpress/create-block@latest gutenberg-create-block-npx --variant=dynamic
cd gutenberg-create-block-npx

Onces all folder are created in gutneberg-create-block-npx folder then open src folder and open block.json file in your editor and update

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "create-block/create-gutenber-npx-block",
    "version": "0.1.0",
    "title": "Create Gutenberg NPX Block",
    "category": "widgets",
    "icon": "smiley",
    "description": "Create NPX Gutenberg Block",
    "example": {},
    "supports": {
        "html": false
    },
    "textdomain": "create-gutenber-npx-block",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "render": "file:./render.php",
    "viewScript": "file:./view.js"
}

Ref Blog: https://developer.wordpress.org/block-editor/getting-started/tutorial/