{"id":368732,"date":"2023-02-28T12:39:33","date_gmt":"2023-02-28T12:39:33","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=368732"},"modified":"2024-11-28T11:52:18","modified_gmt":"2024-11-28T11:52:18","slug":"how-to-create-custom-gutenberg-block-in-wordpress","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/","title":{"rendered":"How to create a custom Gutenberg Block in woocommerce"},"content":{"rendered":"\n<p id=\"9324\">WordPress recently introduced&nbsp;<code>@wordpress\/scripts<\/code>&nbsp;npm package. It is a collection of reusable scripts for <a href=\"https:\/\/webkul.com\/woocommerce-development\/\">WordPress Development<\/a>.<\/p>\n\n\n\n<p id=\"9324\">We will learn about how to create a Custom Gutenberg block  using&nbsp;ES6,&nbsp;JSX&nbsp;and&nbsp;@wordpress\/scripts&nbsp;package.<\/p>\n\n\n\n<p id=\"9324\"><br>Since most browsers cannot support or run&nbsp;<code>ES6<\/code>&nbsp;and&nbsp;<code>JSX<\/code>, we need to use tools&nbsp;<code>Babel<\/code>&nbsp;to transform these syntaxes, to the code that browsers can understand.<\/p>\n\n\n\n<p id=\"9324\">Also by using a build tool like&nbsp;<code>Webpack<\/code>, we can organize our code into smaller modules and then bundle them together into a single download.<\/p>\n\n\n\n<p id=\"250c\">The&nbsp;<a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/scripts\" rel=\"noreferrer noopener\" target=\"_blank\">@wordpress\/scripts<\/a>&nbsp;package abstracts these libraries away to standardize and simplify development, so you won\u2019t need to handle the details for configuring those libraries.<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Before Starting Development<\/h3>\n<\/div><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We need WordPress development environment<\/li>\n\n\n\n<li>JavaScript build tools (node\/npm) if using React\/JSX<\/li>\n<\/ul>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Create directory for Gutenberg Block in plugins directory<\/h3>\n<\/div><\/div>\n\n\n\n<p>Create a new directory in wordpress\/wp-content\/plugins with name myFirst-block and install&nbsp;<code>@wordpress\/scripts<\/code>&nbsp;package using npm inside of it.<\/p>\n\n\n\n<p>The<code>&nbsp;\u2014 save-exact<\/code>&nbsp;installs the exact version of the&nbsp;<code>@wordpress\/scripts<\/code>&nbsp;package<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">cd wordpress\/wp-content\/plugins\nmkdir myFirst-block\ncd myFirst-block\n\nnpm init\nnpm i --save-dev --save-exact @wordpress\/scripts<\/pre>\n\n\n\n<p>This will install all required packages and dependencies inside a node_modules directory. Please note that src\/index.js will be its entry point and output build file will be in build\/index.js <\/p>\n\n\n\n<p>So also create two directories in myFirst-block directory as <strong>src<\/strong> and <strong>build<\/strong><\/p>\n\n\n\n<p>This is a CLI and exposes a binary called&nbsp;<code><strong>wp-scripts<\/strong><\/code>&nbsp;so we can call it directly. So we will add these script in the package.json<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&quot;scripts&quot;: {\n  &quot;start&quot;: &quot;wp-scripts start&quot;,\n  &quot;build&quot;: &quot;wp-scripts build&quot;\n},<\/pre>\n\n\n\n<p>When we run<\/p>\n\n\n\n<p>npm run start then wp-scripts will run in watch mode So if we make changes in src\/index.js then it will automatically create build file for it real time<\/p>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Create plugin file to Register Block in plugin<\/h3>\n<\/div><\/div>\n\n\n\n<p>We need to register our block server-side to ensure that the script is enqueued when the editor loads, Now we create a plugin file to enquee styles and scripts build\/index.js to our block<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">&lt;?php\n\/*\nPlugin Name: myFirst-block\nAuthor: webkul\n*\/\nfunction myFirst-block() {\n\n\t$styleURI = plugin_dir_url( __FILE__  ).&#039;\/src\/style.css&#039;;\n\t\/\/Enquee style\n\twp_enqueue_style( \n\t\t&#039;myFirst-block-style&#039;, \n\t\t$styleURI, \n\t );\n\n\t\/\/ Register JavasScript File build\/index.js\n\twp_register_script(\n\t\t&#039;myFirstblock&#039;,\n\t\tplugins_url( &#039;build\/index.js&#039;, __FILE__ ),\n\t\tarray( &#039;wp-blocks&#039;, &#039;wp-element&#039;, &#039;wp-editor&#039; ),\n\t);\n\n\t\/\/ Register editor style src\/editor.css\n\twp_register_style(\n\t\t&#039;myFirst-block-editor-style&#039;,\n\t\tplugins_url( &#039;src\/editor.css&#039;, __FILE__ ),\n\t);\n\n\t\/\/ Register block\n\tregister_block_type( &#039;gutenreact\/myFirst-block&#039;, array(\n\t\t&#039;editor_script&#039; =&gt; &#039;myFirstblock&#039;,\n\t\t&#039;editor_style&#039; =&gt; &#039;myFirst-block-editor-style&#039;,\n\t) );\n\n}\n\nadd_action( &#039;init&#039;, &#039;myFirst-block&#039; );<\/pre>\n\n\n\n<p>Now we need to create index.js file in src directory, this will be our entry point.<\/p>\n\n\n\n<p>In index.js we can register a block with <code>registerBlockType()<\/code> function, registerBlockType will take two arguments.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Block name : This is a unique identify string for our Block.<\/li>\n\n\n\n<li>Object(Array) : This is a configuration object of our Block. Object&nbsp;[&nbsp;{ key: value }&nbsp;]<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ Registering my first block with a unique name\nregisterBlockType( &#039;myCustomBlock\/my-first-block&#039;, {} );<\/pre>\n\n\n\n<p><strong>namespace<\/strong>&nbsp;is the name of our theme or plugin.<br>This name is used on the comment delimiters as&nbsp;<code>&lt;!-- wp:namespace\/block-name --&gt;&nbsp;<\/code>when the post is saved into the database.<\/p>\n\n\n\n<p>Now we are going to register our first block using <code>registerBlockType()<\/code> function. Here myFirst-block is my plugin directory my-first-block is my block name.<\/p>\n\n\n\n<p>Now we need to put the title, description, icon, and category, Here myCustomBlock is my namespace of plugin.<\/p>\n\n\n\n<p id=\"5397\">The&nbsp;<code>edit<\/code>&nbsp;function is use for editor.<\/p>\n\n\n\n<p id=\"77fd\">The&nbsp;<code>save<\/code>&nbsp;function is for frontend and define how the attributes will combine and render a final markup.<\/p>\n\n\n\n<p>Lets bundle it<\/p>\n\n\n\n<p>Create css and js file in myFirst-block\/src for styles and scripts.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/src\/editor.css\n.wp-block-myCustomBlock-my-first-block {\n    color: cornflowerblue;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/src\/style.css\n.wp-block-myCustomBlock-my-first-block {\n    color: tomato;\n}<\/pre>\n\n\n\n<p>Our block will shown in gutenberg modules<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1200\" height=\"640\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png\" alt=\"Gutenberg Custom Block\" class=\"wp-image-369177\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-300x160.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-250x133.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-768x410.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten.png 1529w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"828\" height=\"200\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-block.png\" alt=\"guten-block\" class=\"wp-image-369178\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-block.png 828w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-block-300x72.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-block-250x60.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-block-768x186.png 768w\" sizes=\"(max-width: 828px) 100vw, 828px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<div class=\"wk-index-wrap\"><div class=\"block-wrap\">\n<h3 class=\"wp-block-heading index-title\">Create advance block for card component<\/h3>\n<\/div><\/div>\n\n\n\n<p>We are going to use <code>useBlockProps<\/code>&nbsp;React hook on the block wrapper element, useInnerBlocksProps for adding default components of gutenbrg into our custom block.<\/p>\n\n\n\n<p>Here we will use useInnerBlocksProps for giving support of adding other Blocks inside our custom Block ex: Button, Text, Heading etc.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ src\/index.js\nimport { registerBlockType } from &#039;@wordpress\/blocks&#039;;\nimport { useBlockProps, RichText, MediaUpload,  InnerBlocks } from &#039;@wordpress\/block-editor&#039;;\n\nregisterBlockType(&#039;gutenreact\/webkul-cards&#039;, {\n    title: &#039;Webkul Card Section&#039;,\n    icon: &#039;columns&#039;,\n    category: &#039;widgets&#039;,\n    attributes: {\n        content: {\n            type: &#039;string&#039;,\n            source: &#039;html&#039;,\n            selector: &#039;p&#039;,\n        },\n        description: {\n            type: &#039;string&#039;,\n            source: &#039;html&#039;,\n            selector: &#039;p&#039;,\n        },\n        imgUrl: {\n            type: &#039;string&#039;,\n        },\n    },\n    edit: (props) =&gt; {\n        const {\n            attributes: { content, description, imgUrl },\n            setAttributes,\n        } = props;\n        const blockProps = useBlockProps();\n        const onChangeContent = (newContent) =&gt; {\n            setAttributes({ content: newContent });\n        };\n        const onChangeDescription = (newDescription) =&gt; {\n            setAttributes({ description: newDescription });\n        };\n        const onImageSelect = (newImgUrl) =&gt; {\n            setAttributes({ imgUrl: newImgUrl.sizes.full.url });\n        };\n        const ALLOWED_BLOCKS = &#091; &#039;core\/buttons&#039; ];\n        return (\n            &lt;div className=&#039;webkul-card&#039;&gt;\n                &lt;MediaUpload onSelect={onImageSelect}\n                    render={\n                        ({ open }) =&gt; {\n                            return imgUrl ? &lt;img onClick={open} src={imgUrl} \/&gt; : &lt;button onClick={open}&gt; Upload Image &lt;\/button&gt;\n                        }\n                    }\n                    title=&quot;Insert Image&quot;\n                \/&gt;\n                &lt;RichText {...blockProps}\n                    tagName=&#039;h3&#039;\n                    onChange={onChangeContent}\n                    placeholder=&#039;title&#039;\n                    value={content} \/&gt;\n                &lt;RichText {...blockProps}\n                    tagName=&#039;p&#039;\n                    onChange={onChangeDescription}\n                    placeholder=&#039;Short description&#039;\n                    value={description} \/&gt;\n                &lt;InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } \/&gt;\n            &lt;\/div&gt;\n        )\n\n    },\n    save: (props) =&gt; {\n        const blockProps = useBlockProps.save();\n        return (\n            &lt;div className=&#039;webkul-card&#039;&gt;\n                &lt;img src={props.attributes.imgUrl} \/&gt;\n                &lt;RichText.Content {...blockProps}\n                    tagName=&#039;h3&#039;\n                    value={props.attributes.content} \/&gt;\n                    &lt;RichText.Content {...blockProps}\n                    tagName=&#039;p&#039;\n                    value={props.attributes.description} \/&gt;\n                 &lt;InnerBlocks.Content \/&gt;\n            &lt;\/div&gt;\n        )\n    }\n});<\/pre>\n\n\n\n<p>We can also have a validator function ALLOWED_BLOCKS in which we can allow only selected innerBlocks to add in our custom Block<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">const ALLOWED_BLOCKS = &#091; &#039;core\/image&#039;, &#039;core\/paragraph&#039; ];\n\/\/...\n&lt;InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } \/&gt;;<\/pre>\n\n\n\n<p>Here we give support of Image and Paragraph to our custom Block, you can give more Blocks. you can check core blocks <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/core-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">here<\/a>.<\/p>\n\n\n\n<p>Lets bundle it<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">npm run start<\/pre>\n\n\n\n<p>Now our card block is appear in gutenberg editor<\/p>\n\n\n\n<p>Now we write some css for frontend and editor<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/ src\/editor.css\n\n.webkul-card {\n    text-align: center;\n    background: #d5d5d5;\n    padding: 40px 20px;\n    border: 1px solid #000000;\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\">\/\/  src\/style.css\n\n.webkul-card {\n    text-align: center;\n    background: #d5d5d5;\n    padding: 40px 20px;\n}<\/pre>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"900\" style=\"aspect-ratio: 1848 \/ 900;\" width=\"1848\" controls src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block.webm\"><\/video><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img decoding=\"async\" width=\"1200\" height=\"554\" src=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-1200x554.png\" alt=\"guttenberg-custom-block-development\" class=\"wp-image-371159\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-1200x554.png 1200w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-300x138.png 300w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-250x115.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-768x354.png 768w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview-1536x709.png 1536w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guttenberg-custom-block-preview.png 1589w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" loading=\"lazy\" \/><\/figure>\n\n\n\n<p>If you need custom&nbsp;<a href=\"https:\/\/webkul.com\/website-development\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordP<\/a><a href=\"https:\/\/webkul.com\/wordpress-theme-development-services\/\" target=\"_blank\" rel=\"noreferrer noopener\">ress Development services<\/a>&nbsp;then feel free to&nbsp;<a href=\"https:\/\/webkul.com\/contacts\" target=\"_blank\" rel=\"noreferrer noopener\">reach us<\/a>&nbsp;and also explore our exclusive range of WordPress&nbsp;<a href=\"https:\/\/store.webkul.com\/woocommerce-plugins.html\">WooCommerce Extensions<\/a>.<\/p>\n\n\n\n<p>!!Have a Great Day Ahead!!<\/p>\n\n\n\n<p>Thank you<\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPress recently introduced&nbsp;@wordpress\/scripts&nbsp;npm package. It is a collection of reusable scripts for WordPress Development. We will learn about how to create a Custom Gutenberg block using&nbsp;ES6,&nbsp;JSX&nbsp;and&nbsp;@wordpress\/scripts&nbsp;package. Since most browsers cannot support or run&nbsp;ES6&nbsp;and&nbsp;JSX, we need to use tools&nbsp;Babel&nbsp;to transform these syntaxes, to the code that browsers can understand. Also by using a build tool like&nbsp;Webpack, <a href=\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":487,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1260],"tags":[1258,13679,1501],"class_list":["post-368732","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-wordpress","tag-wordpress-development-services","tag-wordpress-plugin"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create a custom Gutenberg Block in woocommerce - Webkul Blog<\/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:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create a custom Gutenberg Block in woocommerce - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"WordPress recently introduced&nbsp;@wordpress\/scripts&nbsp;npm package. It is a collection of reusable scripts for WordPress Development. We will learn about how to create a Custom Gutenberg block using&nbsp;ES6,&nbsp;JSX&nbsp;and&nbsp;@wordpress\/scripts&nbsp;package. Since most browsers cannot support or run&nbsp;ES6&nbsp;and&nbsp;JSX, we need to use tools&nbsp;Babel&nbsp;to transform these syntaxes, to the code that browsers can understand. Also by using a build tool like&nbsp;Webpack, [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-28T12:39:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-28T11:52:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png\" \/>\n<meta name=\"author\" content=\"Aakash Mittal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aakash Mittal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\"},\"author\":{\"name\":\"Aakash Mittal\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f6a335f7cfdd48b9e07eb92aad9e71e4\"},\"headline\":\"How to create a custom Gutenberg Block in woocommerce\",\"datePublished\":\"2023-02-28T12:39:33+00:00\",\"dateModified\":\"2024-11-28T11:52:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\"},\"wordCount\":667,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png\",\"keywords\":[\"wordpress\",\"wordpress development services\",\"wordpress plugin\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\",\"name\":\"How to create a custom Gutenberg Block in woocommerce - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png\",\"datePublished\":\"2023-02-28T12:39:33+00:00\",\"dateModified\":\"2024-11-28T11:52:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten.png\",\"width\":1529,\"height\":816,\"caption\":\"guten\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create a custom Gutenberg Block in woocommerce\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f6a335f7cfdd48b9e07eb92aad9e71e4\",\"name\":\"Aakash Mittal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/85104b09fa2e8218a2c6f1ed16783c3771661ee6d95beb34c125057d35a3202c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/85104b09fa2e8218a2c6f1ed16783c3771661ee6d95beb34c125057d35a3202c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Aakash Mittal\"},\"description\":\"Aakash Mittal is an expert in TailWind, Gulp, Webpack, and Grunt, with a strong proficiency in WooCommerce GenAI Services and WooCommerce API Development Services. He crafts seamless, high-performing solutions that drive innovation and efficiency, ensuring exceptional results for every project.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/aakashmittal-wp578\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create a custom Gutenberg Block in woocommerce - Webkul Blog","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:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to create a custom Gutenberg Block in woocommerce - Webkul Blog","og_description":"WordPress recently introduced&nbsp;@wordpress\/scripts&nbsp;npm package. It is a collection of reusable scripts for WordPress Development. We will learn about how to create a Custom Gutenberg block using&nbsp;ES6,&nbsp;JSX&nbsp;and&nbsp;@wordpress\/scripts&nbsp;package. Since most browsers cannot support or run&nbsp;ES6&nbsp;and&nbsp;JSX, we need to use tools&nbsp;Babel&nbsp;to transform these syntaxes, to the code that browsers can understand. Also by using a build tool like&nbsp;Webpack, [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-02-28T12:39:33+00:00","article_modified_time":"2024-11-28T11:52:18+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png","type":"","width":"","height":""}],"author":"Aakash Mittal","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Aakash Mittal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/"},"author":{"name":"Aakash Mittal","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f6a335f7cfdd48b9e07eb92aad9e71e4"},"headline":"How to create a custom Gutenberg Block in woocommerce","datePublished":"2023-02-28T12:39:33+00:00","dateModified":"2024-11-28T11:52:18+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/"},"wordCount":667,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png","keywords":["wordpress","wordpress development services","wordpress plugin"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/","url":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/","name":"How to create a custom Gutenberg Block in woocommerce - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten-1200x640.png","datePublished":"2023-02-28T12:39:33+00:00","dateModified":"2024-11-28T11:52:18+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/02\/guten.png","width":1529,"height":816,"caption":"guten"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-custom-gutenberg-block-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create a custom Gutenberg Block in woocommerce"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f6a335f7cfdd48b9e07eb92aad9e71e4","name":"Aakash Mittal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/85104b09fa2e8218a2c6f1ed16783c3771661ee6d95beb34c125057d35a3202c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/85104b09fa2e8218a2c6f1ed16783c3771661ee6d95beb34c125057d35a3202c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Aakash Mittal"},"description":"Aakash Mittal is an expert in TailWind, Gulp, Webpack, and Grunt, with a strong proficiency in WooCommerce GenAI Services and WooCommerce API Development Services. He crafts seamless, high-performing solutions that drive innovation and efficiency, ensuring exceptional results for every project.","url":"https:\/\/webkul.com\/blog\/author\/aakashmittal-wp578\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/487"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=368732"}],"version-history":[{"count":47,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368732\/revisions"}],"predecessor-version":[{"id":475871,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/368732\/revisions\/475871"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=368732"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=368732"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=368732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}