{"id":1974,"date":"2026-01-21T11:24:33","date_gmt":"2026-01-21T05:54:33","guid":{"rendered":"https:\/\/myfreeonlinetools.com\/blog\/?p=1974"},"modified":"2026-01-21T11:54:44","modified_gmt":"2026-01-21T06:24:44","slug":"1974-2","status":"publish","type":"post","link":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/","title":{"rendered":"Create Gutenberg Block with NPX Node Enviroment"},"content":{"rendered":"<p>Require for Create Gutenberg Block with NPX (Node)<\/p>\n<ol>\n<li>Code editor<\/li>\n<li>Node.js development tools<\/li>\n<li>Local WordPress environment<\/li>\n<\/ol>\n<p>Firstly, go to your WordPress plugin directory, and then open it on the terminal (CMD), and then type code. It&#8217;s open at Vishal Studio.<\/p>\n<p>Open the Vishal Studio terminal and paste the code below.<\/p>\n<pre>npx @wordpress\/create-block@latest gutenberg-create-block-npx --variant<span class=\"token operator\">=<\/span>dynamic\r\n<span class=\"token builtin class-name\">cd<\/span> gutenberg-create-block-npx<\/pre>\n<p>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<\/p>\n<pre>\r\n{\r\n    \"$schema\": \"https:\/\/schemas.wp.org\/trunk\/block.json\",\r\n    \"apiVersion\": 3,\r\n    \"name\": \"create-block\/create-gutenber-npx-block\",\r\n    \"version\": \"0.1.0\",\r\n    \"title\": \"Create Gutenberg NPX Block\",\r\n    \"category\": \"widgets\",\r\n    \"icon\": \"smiley\",\r\n    \"description\": \"Create NPX Gutenberg Block\",\r\n    \"example\": {},\r\n    \"supports\": {\r\n        \"html\": false\r\n    },\r\n    \"textdomain\": \"create-gutenber-npx-block\",\r\n    \"editorScript\": \"file:.\/index.js\",\r\n    \"editorStyle\": \"file:.\/index.css\",\r\n    \"style\": \"file:.\/style-index.css\",\r\n    \"render\": \"file:.\/render.php\",\r\n    \"viewScript\": \"file:.\/view.js\"\r\n}\r\n<\/pre>\n<p>Ref Blog: https:\/\/developer.wordpress.org\/block-editor\/getting-started\/tutorial\/<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Require for Create Gutenberg Block with NPX (Node) Code editor Node.js development tools Local WordPress environment Firstly, go to your WordPress plugin directory, and then open it on the terminal [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[21,24],"tags":[],"class_list":["post-1974","post","type-post","status-publish","format-standard","hentry","category-tutorial","category-wordpress"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools\" \/>\n<meta property=\"og:description\" content=\"Require for Create Gutenberg Block with NPX (Node) Code editor Node.js development tools Local WordPress environment Firstly, go to your WordPress plugin directory, and then open it on the terminal [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\" \/>\n<meta property=\"og:site_name\" content=\"MyFreeOnlineTools\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-21T05:54:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-21T06:24:44+00:00\" \/>\n<meta name=\"author\" content=\"myfreeonlinetools\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"myfreeonlinetools\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\"},\"author\":{\"name\":\"myfreeonlinetools\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\"},\"headline\":\"Create Gutenberg Block with NPX Node Enviroment\",\"datePublished\":\"2026-01-21T05:54:33+00:00\",\"dateModified\":\"2026-01-21T06:24:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\"},\"wordCount\":91,\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"articleSection\":[\"Tutorial\",\"Wordpress\"],\"inLanguage\":\"en\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\",\"name\":\"Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools\",\"isPartOf\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\"},\"datePublished\":\"2026-01-21T05:54:33+00:00\",\"dateModified\":\"2026-01-21T06:24:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/myfreeonlinetools.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Gutenberg Block with NPX Node Enviroment\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#website\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"name\":\"MyFreeOnlineTools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#organization\",\"name\":\"MyFreeOnlineTools\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"contentUrl\":\"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png\",\"width\":387,\"height\":79,\"caption\":\"MyFreeOnlineTools\"},\"image\":{\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c\",\"name\":\"myfreeonlinetools\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g\",\"caption\":\"myfreeonlinetools\"},\"description\":\"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.\",\"sameAs\":[\"https:\/\/myfreeonlinetools.com\/\",\"https:\/\/www.facebook.com\/LearnSchoolOnline\/\",\"https:\/\/www.youtube.com\/learnschoolonline\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/","og_locale":"en_US","og_type":"article","og_title":"Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools","og_description":"Require for Create Gutenberg Block with NPX (Node) Code editor Node.js development tools Local WordPress environment Firstly, go to your WordPress plugin directory, and then open it on the terminal [&hellip;]","og_url":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/","og_site_name":"MyFreeOnlineTools","article_author":"https:\/\/www.facebook.com\/LearnSchoolOnline\/","article_published_time":"2026-01-21T05:54:33+00:00","article_modified_time":"2026-01-21T06:24:44+00:00","author":"myfreeonlinetools","twitter_card":"summary_large_image","twitter_misc":{"Written by":"myfreeonlinetools","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#article","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/"},"author":{"name":"myfreeonlinetools","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c"},"headline":"Create Gutenberg Block with NPX Node Enviroment","datePublished":"2026-01-21T05:54:33+00:00","dateModified":"2026-01-21T06:24:44+00:00","mainEntityOfPage":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/"},"wordCount":91,"publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"articleSection":["Tutorial","Wordpress"],"inLanguage":"en"},{"@type":"WebPage","@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/","url":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/","name":"Create Gutenberg Block with NPX Node Enviroment - MyFreeOnlineTools","isPartOf":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#website"},"datePublished":"2026-01-21T05:54:33+00:00","dateModified":"2026-01-21T06:24:44+00:00","breadcrumb":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/myfreeonlinetools.com\/blog\/1974-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/myfreeonlinetools.com\/blog\/1974-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/myfreeonlinetools.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Gutenberg Block with NPX Node Enviroment"}]},{"@type":"WebSite","@id":"https:\/\/myfreeonlinetools.com\/blog\/#website","url":"https:\/\/myfreeonlinetools.com\/blog\/","name":"MyFreeOnlineTools","description":"","publisher":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/myfreeonlinetools.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/myfreeonlinetools.com\/blog\/#organization","name":"MyFreeOnlineTools","url":"https:\/\/myfreeonlinetools.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","contentUrl":"https:\/\/myfreeonlinetools.com\/blog\/wp-content\/uploads\/2019\/11\/myfreeonlinetools-blue.png","width":387,"height":79,"caption":"MyFreeOnlineTools"},"image":{"@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/b1eb72e57c554e3b33cfeec477efcc3c","name":"myfreeonlinetools","image":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/myfreeonlinetools.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b870b17c6c7e3b75d7fe0b8bebfc9cf5?s=96&d=mm&r=g","caption":"myfreeonlinetools"},"description":"Live in Delhi, Working in Gurgaon as Web Designer and Graphic Designer. Developed and Design myfreeonlinetools for online free tools. Also having youtube channel Name with LearnSchoolOnline. Traveling, watching movies, coding are the hobbies.","sameAs":["https:\/\/myfreeonlinetools.com\/","https:\/\/www.facebook.com\/LearnSchoolOnline\/","https:\/\/www.youtube.com\/learnschoolonline"]}]}},"_links":{"self":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/comments?post=1974"}],"version-history":[{"count":10,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1974\/revisions"}],"predecessor-version":[{"id":1984,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/posts\/1974\/revisions\/1984"}],"wp:attachment":[{"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/media?parent=1974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/categories?post=1974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myfreeonlinetools.com\/blog\/wp-json\/wp\/v2\/tags?post=1974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}