{"id":3342,"date":"2018-01-20T05:41:34","date_gmt":"2018-01-20T00:41:34","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=3342"},"modified":"2023-08-16T05:56:17","modified_gmt":"2023-08-16T12:56:17","slug":"create-guten-block-toolkit","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/","title":{"rendered":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &#038; More! \ud83d\ude80"},"content":{"rendered":"<div class=\"alert green\">For the latest documentation and steps on getting started, use the <span style=\"color: #ffffff;\"><a style=\"color: #ffffff;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">Create Guten Block GitHub repository \u2192<\/a> <\/span>as your primary source of information.<\/div>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f389.svg\" alt=\"\ud83c\udf89\" \/> Excited to release the <code>create-guten-block<\/code> toolkit today. In this post, I am going to share what is <code>create-guten-block<\/code> (<code>cgb<\/code>), what is the motivation &amp; philosophy behind building this dev-toolbox, and the story of how I am releasing it to the public after ~200 commits and ~90 version releases. Let&#8217;s start with intro first&#8230;<\/p>\n<h2 style=\"text-align: center;\" style=\"text-align: center;\" id=\"introducing-create-guten-block\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f64c.svg\" alt=\"\ud83d\ude4c\" \/> Introducing <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">Create Guten Block<\/a>!<a href=\"#introducing-create-guten-block\" class=\"heading-link\">#<\/a><\/h2>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3349\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon.png\" alt=\"\" width=\"512\" height=\"512\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon.png 512w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon-150x150.png 150w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon-300x300.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon-400x400.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon-50x50.png 50w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-icon-60x60.png 60w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/p>\n<blockquote><p><em>JUST A NOTE!<\/em><br \/>\n\ud83d\udc68\u200d\ud83d\udcbb I&#8217;m teaching thousands of devs how to become <a href=\"https:\/\/VSCode.pro\/\" target=\"_blank\" rel=\"noopener\">VSCode Power Users<\/a> \u2192<br \/>\n\u2705 This site is super fast?! <a href=\"https:\/\/kinsta.com\/?kaid=WMDAKYHJLNJX&amp;utm_source=TheDevCouple&amp;utm_medium=Partner\">It&#8217;s hosted with Kinsta on Google servers \u2192<\/a>\n<\/p><\/blockquote>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3351\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2.png\" alt=\"\" width=\"642\" height=\"37\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2.png 642w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-300x17.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-400x23.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-50x3.png 50w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/a><\/p>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<p><span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code><\/span> (<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f31f.svg\" alt=\"\ud83c\udf1f\" \/> at GitHub for updates<\/a>) is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, Modern JavaScript (ES6, ES7, ES8, \u2026) ESLint, Babel, etc.<\/p>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>Create Guten Block is not like other <a href=\"https:\/\/github.com\/ahmadawais\/wpgulp\">starter-kits<\/a> or <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-boilerplate\">boilerplates<\/a>. It&#8217;s a developer&#8217;s toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code. That&#8217;s actually why I built it.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f44b.svg\" alt=\"\ud83d\udc4b\" \/><\/p>\n<p style=\"text-align: center;\">Hey, don&#8217;t forget to star <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f31f.svg\" alt=\"\ud83c\udf1f\" \/> it at GitHub for updates<\/a>, to show appreciation, and do report back any <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc\">issues<\/a> you face.<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f680.svg\" alt=\"\ud83d\ude80\" \/> <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> <\/span>is:<\/p>\n<ul>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f95e.svg\" alt=\"\ud83e\udd5e\" \/> Versioned \u2713<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f920.svg\" alt=\"\ud83e\udd20\" \/> Updatable \u2713<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f5c3.svg\" alt=\"\ud83d\uddc3\" \/> Set of sane-defaults \u2713<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f40e.svg\" alt=\"\ud83d\udc0e\" \/> ONE single <code>cgb-scripts<\/code> dependency \u2713<\/li>\n<\/ul>\n<p>But what is it?!<\/p>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<p>Well, it&#8217;s a <code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\"><span style=\"color: #000000;\">create-guten-block<\/span><\/a><\/code> is a way for you to start building Gutenberg blocks without having to configure or setup anything. It&#8217;s a zero-config-js #0CJS toolkit with a single dependency in your projects \u2014 which will stay up to date.<\/p>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n<h2><a id=\"user-content-whats-included\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#whats-included\" aria-hidden=\"true\"><\/a>What\u2019s Included?<\/h2>\n<p>Your dev-environment will have everything you need to build a modern next-gen WordPress Gutenberg plugin:<\/p>\n<ul>\n<li>React, JSX, and ES6 syntax support.<\/li>\n<li>Webpack dev\/production build process behind the scene.<\/li>\n<li>Language extras beyond ES6 like the object spread operator.<\/li>\n<li>Auto-prefixed CSS, so you don\u2019t need <code>-webkit<\/code> or other prefixes.<\/li>\n<li>A build script to bundle JS, CSS, and images for production with source-maps.<\/li>\n<li>Hassle-free updates for the above tools with a single dependency <code>cgb-scripts<\/code>.<\/li>\n<\/ul>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f530.svg\" alt=\"\ud83d\udd30\" \/><\/p>\n<p style=\"text-align: center;\">The tradeoff is that <strong>these tools are preconfigured to work in a specific way<\/strong>. If your project needs more customization, you can <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-run-eject\">&#8220;eject&#8221;<\/a> and customize it, but then you will need to maintain this configuration.<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n<h2><a id=\"user-content-philosophy\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#philosophy\" aria-hidden=\"true\"><\/a>Philosophy<\/h2>\n<ul>\n<li><strong>One Dependency:<\/strong> There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.<\/li>\n<li><strong>No Configuration Required:<\/strong> You don&#8217;t need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.<\/li>\n<li><strong>No Lock-In:<\/strong> You can <code>eject<\/code> to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/orvy\/c\" alt=\"Why\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-why-create-guten-block\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#why-create-guten-block\" aria-hidden=\"true\"><\/a>Why <code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code>?<\/h2>\n<p>Well, it&#8217;s really hard to configure things like Webpack, React, ES 6\/7\/8\/Next, ESLint, Babel, etc. before you \u2014 <em>even start writing<\/em> \u2014 a <code>Hello World<\/code> Gutenberg block. Then there&#8217;s the fact that you have to maintain and constantly update your configuration with all the new tools and growth in the JavaScript community \u2014 that&#8217;s not an easy thing to do.<\/p>\n<p><code>create-guten-block<\/code> hides all this configuration away in an optimized package that we call <code>cgb-scripts<\/code>. This package is the only dependency in your projects. We keep <code>cgb-scripts<\/code> up to date while you go ahead and create the next best WordPress themes and plugins.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f991.svg\" alt=\"\ud83e\udd91\" \/><\/p>\n<p style=\"text-align: center;\">&#8220;I&#8217;ve heard from several people that they&#8217;ve consolidated their companies tool dependencies into a single package and this worked really well for them.&#8221; \u2014 <a href=\"https:\/\/twitter.com\/dan_abramov\">@Dan_Abramov<\/a><\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p>So, that&#8217;s what I dreamt about for the next couple of months. <em>How do I solve this problem for the WordPress community, eh?<\/em><\/p>\n<\/section>\n<div class=\"postcontents full\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3398\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block.jpg\" alt=\"create-guten-block cgb-scripts\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block.jpg 1920w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-300x169.jpg 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-768x432.jpg 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-1024x576.jpg 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-1680x945.jpg 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-860x484.jpg 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-680x383.jpg 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-400x225.jpg 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/create-guten-block-50x28.jpg 50w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/a><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>After building <a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/issues\/61\">WPGulp<\/a> and <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\">Gutenberg Boilerplate<\/a> and lot of other open source software that thousands of developers are using \u2014 I started receiving lots of feedback on how it&#8217;s limiting in its architecture which is complex \u2014 and by the way, these boilerplates went stale quite a few times.<\/p>\n<p>I knew this was not right.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f648.svg\" alt=\"\ud83d\ude48\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f649.svg\" alt=\"\ud83d\ude49\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f64a.svg\" alt=\"\ud83d\ude4a\" \/><\/p>\n<p style=\"text-align: center;\">Developers told me that they built Gutenberg blocks with ES5 because the amount of time required to configure, set up, and learn tools like Babel, Webpack, ESLint, Prettier, etc. wasn&#8217;t worth it. And I was like whaaaat?!<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p>So, yes! I went ahead and built a solution \u2014 a zero-config-js #0CJS WordPress developers&#8217; toolkit called <code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code>! Enough talk, let&#8217;s stop it right here and actually explore the toolkit.<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/osd3\/c\" alt=\"Start\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-getting-started\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#getting-started\" aria-hidden=\"true\"><\/a>GETTING STARTED!<\/h2>\n<p>It&#8217;s really easy to get started with <code>create-guten-block<\/code>. Just install it as a global module and run it to create your next-gen Gutenberg block plugin for WordPress.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f98a.svg\" alt=\"\ud83e\udd8a\" \/><\/p>\n<p style=\"text-align: center;\">Did I tell you to star <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f31f.svg\" alt=\"\ud83c\udf1f\" \/> it at GitHub for updates<\/a> and to show appreciation or to report back any <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc\">issues<\/a> you face? Hmm&#8230; lemme think?!<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p><em><strong>OK! OK!<\/strong> Let&#8217;s get you started!<\/em><\/p>\n<h3><a id=\"user-content--step-2\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#-step-2\" aria-hidden=\"true\"><\/a>\u2192 STEP #0<\/h3>\n<p>If you don&#8217;t have <code>Node.js<\/code> + <code>npm<\/code> installed then read this step, otherwise jump to the Step #1 below.<br \/>\nIn case you are an absolute beginner to the world of <code>Node.js<\/code>, JavaScript, and <code>npm<\/code> packages \u2014 all you need to do is go to the Node&#8217;s site <a href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"nofollow\">download + install<\/a> Node on your system. This will install both <code>Node.js<\/code> and <code>npm<\/code>, i.e., node package manager \u2014 the command line interface of Node.js.<\/p>\n<p>You can verify the install by opening your terminal app and typing&#8230;<\/p>\n<pre><code data-language=\"shell\">node -v\r\n# Results into v9.4.0 \u2014 make sure you have Node &gt;= 8 installed.<\/code><\/pre>\n<p>and then&#8230;<\/p>\n<pre><code data-language=\"shell\">npm -v\r\n# Results into 5.6.0 \u2014 make sure you have npm &gt;= 5.2 installed.<\/code><\/pre>\n<h3><a id=\"user-content--step-1\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#-step-1\" aria-hidden=\"true\"><\/a>\u2192 STEP #1<\/h3>\n<p>Install <code>create-guten-block<\/code> globally on your system.<\/p>\n<p>You\u2019ll need to have Node &gt;= 8 on your local development machine (but it\u2019s not required on the server). You can use <a href=\"https:\/\/github.com\/creationix\/nvm#installation\">nvm<\/a>(macOS\/Linux) or <a href=\"https:\/\/github.com\/coreybutler\/nvm-windows#node-version-manager-nvm-for-windows\">nvm-windows<\/a> to easily switch Node versions between different projects.<\/p>\n<pre><code data-language=\"shell\">npx create-guten-block my-block<\/code><\/pre>\n<\/section>\n<div class=\"postcontents full\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/on.ahmadawais.com\/orvI\/c\" alt=\"install cgb\" width=\"1117\" height=\"553\" \/><\/a><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p><em>Hold on, it&#8217;ll take a couple of minutes to install.<\/em><\/p>\n<h3><a id=\"user-content--step-2\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#-step-2\" aria-hidden=\"true\"><\/a>\u2192 STEP #2<\/h3>\n<p>Now all you have to do is create a Gutenberg block and start building. It&#8217;s done by running the <code>create-guten-block<\/code> command and providing it with a unique name for a WordPress plugin that will get created. The name can a single word or hyphenated multiple words.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/26a0.svg\" alt=\"\u26a0\" \/><\/p>\n<p style=\"text-align: center;\">Make sure to run this command in your local WordPress install&#8217;s plugins folder i.e. <code>\/local_dev_site.tld\/wp-content\/plugins\/<\/code> folde \u2014 since this command will produce a WordPress Gutenberg block plugin that you can go to <code>WP Admin<\/code> <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/25b6.svg\" alt=\"\u25b6\" \/>\ufe0e <code>Plugins<\/code> to activate.<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p>Now let&#8217;s run the following command.<\/p>\n<pre><code data-language=\"shell\">create-guten-block my-block<\/code><\/pre>\n<\/section>\n<div class=\"postcontents full\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/on.ahmadawais.com\/osOD\/c\" alt=\"cgb block\" width=\"1117\" height=\"555\" \/><\/a><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>It will create a directory called <code>my-block<\/code> inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:<\/p>\n<div class=\"highlight highlight-source-shell rgh-linkified-code\">\n<pre>INSIDE: \/local_dev_site.tld\/wp-content\/plugins\/my-block\r\n\r\n\u251c\u2500\u2500 plugin.php\r\n\u251c\u2500\u2500 package.json\r\n\u251c\u2500\u2500 README.md\r\n<span class=\"pl-k\">|<\/span>\r\n\u251c\u2500\u2500 dist\r\n<span class=\"pl-k\">|<\/span>  \u251c\u2500\u2500 blocks.build.js\r\n<span class=\"pl-k\">|<\/span>  \u251c\u2500\u2500 blocks.editor.build.css\r\n<span class=\"pl-k\">|<\/span>  \u2514\u2500\u2500 blocks.style.build.css\r\n<span class=\"pl-k\">|<\/span>\r\n\u2514\u2500\u2500 src\r\n   \u251c\u2500\u2500 block\r\n   <span class=\"pl-k\">|<\/span>  \u251c\u2500\u2500 block.js\r\n   <span class=\"pl-k\">|<\/span>  \u251c\u2500\u2500 editor.scss\r\n   <span class=\"pl-k\">|<\/span>  \u2514\u2500\u2500 style.scss\r\n   <span class=\"pl-k\">|<\/span>\r\n   \u251c\u2500\u2500 blocks.js\r\n   \u251c\u2500\u2500 common.scss\r\n   \u2514\u2500\u2500 init.php<\/pre>\n<\/div>\n<p>No configuration or complicated folder structures, just the files you need to build your app.<\/p>\n<h3><a id=\"user-content--step-3\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#-step-3\" aria-hidden=\"true\"><\/a>\u2192 STEP #3<\/h3>\n<p>Once the installation is done, you can open your project folder and run the start script.<\/p>\n<p><em>Let&#8217;s do that.<\/em><\/p>\n<pre><code data-language=\"shell\">cd my-block\r\nnpm start<\/code><\/pre>\n<p><em>You can also use <code>yarn start<\/code> if that&#8217;s your jam.<\/em><\/p>\n<\/section>\n<div class=\"postcontents full\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter\" src=\"https:\/\/on.ahmadawais.com\/orrh\/c\" alt=\"cgb-npm-start\" width=\"1117\" height=\"557\" \/><\/a><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>This runs the plugin in development mode. To produce production code run <code>npm run build<\/code>. You will see the build messages, errors, and lint warnings in the console.<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4af.svg\" alt=\"\ud83d\udcaf\" \/><\/p>\n<p style=\"text-align: center;\">And just like that, you&#8217;re building your next WordPress plugin with Gutenberg, React.js, ES 6\/7\/8\/Next, transpiled with Babel, which also has ESLint configurations for your code editor to pick up and use automatically.<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/orsm\/c\" alt=\"More\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h3><a id=\"user-content-workflow\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#workflow\" aria-hidden=\"true\"><\/a>Workflow!<\/h3>\n<p>There are just three scripts that you can use in your <code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> workflow. With these three scripts, you can develop, build, and eject your plugin.<\/p>\n<h4><a id=\"user-content---npm-start\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-start\" aria-hidden=\"true\"><\/a><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f449.svg\" alt=\"\ud83d\udc49\" \/> <code>npm start<\/code><\/h4>\n<ul>\n<li>Use to compile and run the block in development mode.<\/li>\n<li>Watches for any changes and reports back any errors in your code.<\/li>\n<\/ul>\n<h4><a id=\"user-content---npm-run-build\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-run-build\" aria-hidden=\"true\"><\/a><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f449.svg\" alt=\"\ud83d\udc49\" \/> <code>npm run build<\/code><\/h4>\n<ul>\n<li>Use to build production code for your block inside <code>dist<\/code> folder.<\/li>\n<li>Runs once and reports back the gzip file sizes of the produced code.<\/li>\n<\/ul>\n<h4><a id=\"user-content---npm-run-eject\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#--npm-run-eject\" aria-hidden=\"true\"><\/a><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f449.svg\" alt=\"\ud83d\udc49\" \/> <code>npm run eject<\/code><\/h4>\n<ul>\n<li>Use to eject your plugin out of <code>create-guten-block<\/code>.<\/li>\n<li>Provides all the configurations so you can customize the project as you want.<\/li>\n<li>It&#8217;s a one-way street, <code>eject<\/code> and you have to maintain everything yourself.<\/li>\n<li>You don&#8217;t normally have to <code>eject<\/code> a project because by ejecting you lose the connection with <code>create-guten-block<\/code> and from there onwards you have to update and maintain all the dependencies on your own.<\/li>\n<\/ul>\n<p><em>That&#8217;s about it.<\/em><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/osPO\/c\" alt=\"tldr\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-tldr\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#tldr\" aria-hidden=\"true\"><\/a>TL;DR<\/h2>\n<blockquote><p>Too long, didn&#8217;t read? Here&#8217;s a shorter version.<\/p><\/blockquote>\n<p>Open the terminal app and run the following commands.<\/p>\n<ul>\n<li>\ud83d\udd30 <strong>Install\/Create<\/strong>: <code>npx create-guten-block my-block<\/code> \u2014 Run inside local WP install E.g. <code>\/wp.local\/wp-content\/plugins\/<\/code> directory.<\/li>\n<li><strong><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4c2.svg\" alt=\"\ud83d\udcc2\" \/> Browse<\/strong>: <code>cd my-block<\/code> \u2014 Open the newly created plugin directory.<\/li>\n<li><strong><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/267b.svg\" alt=\"\u267b\" \/> Run<\/strong>: <code>npm start<\/code> \u2014 For development.<\/li>\n<li><strong><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4e6.svg\" alt=\"\ud83d\udce6\" \/> Run<\/strong>: <code>npm run build<\/code> \u2014 For production build.<\/li>\n<li><strong><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/23cf.svg\" alt=\"\u23cf\" \/> Run<\/strong>: <code>npm run eject<\/code> \u2014 To customize, update, and maintain all by yourself.<\/li>\n<\/ul>\n<p>Create-Guten-Block has been tested to work on macOS, but must also work on Windows, and Linux. If something doesn\u2019t work, kindly file <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/new\">an issue \u2192<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/osO7\/c\" alt=\"update\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-updating-to-new-releases\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#updating-to-new-releases\" aria-hidden=\"true\"><\/a>Updating to New Releases<\/h2>\n<p>Create Guten Block is divided into two packages:<\/p>\n<ol>\n<li><strong><code>create-guten-block<\/code><\/strong> is a global command-line utility that you use to create new WP Gutenberg plugins.<\/li>\n<li><strong><code>cgb-scripts<\/code><\/strong> is a development dependency in the generated plugin projects.<\/li>\n<\/ol>\n<p>You almost never need to update <code>create-guten-block<\/code> itself: it delegates all the setup to <code>cgb-scripts<\/code>. But as this project matures, there might be a few changes over time and you can re-run the global install.<\/p>\n<pre><code data-language=\"shell\">npx create-guten-block my-block<\/code><\/pre>\n<p>When you run <code>create-guten-block<\/code>, it always creates the project with the latest version of <code>cgb-scripts<\/code> so you\u2019ll get all the new features and improvements in newly created plugins automatically.<\/p>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/2705.svg\" alt=\"\u2705\" \/> To update an existing project to a new version of <code>cgb-scripts<\/code>, open the <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#changelog\">changelog<\/a>, find the version you\u2019re currently on (check package.json in your plugin&#8217;s folder if you\u2019re not sure), and apply the migration instructions for the newer versions.<\/p>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f530.svg\" alt=\"\ud83d\udd30\" \/> In most cases bumping the <code>cgb-scripts<\/code> version in the package.json and running <code>npm install<\/code> in this folder should be enough, but it\u2019s good to consult the <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#changelog\">changelog<\/a> for potential breaking changes.<\/p>\n<p>We commit to keeping the breaking changes minimal so you can upgrade <code>cgb-scripts<\/code> painlessly.<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/osUz\/c\" alt=\"Log\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-changelog\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#changelog\" aria-hidden=\"true\"><\/a>Changelog<\/h2>\n<p>Read what&#8217;s <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4e6.svg\" alt=\"\ud83d\udce6\" \/> new, <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f44c.svg\" alt=\"\ud83d\udc4c\" \/> improved, <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f41b.svg\" alt=\"\ud83d\udc1b\" \/> fixed, and if <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4d6.svg\" alt=\"\ud83d\udcd6\" \/> docs got updated.<\/p>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f449.svg\" alt=\"\ud83d\udc49\" \/> Go read the entire changelog at this link \u2014 <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/blob\/master\/CHANGELOG.md\">CGB Changelog \u2192<\/a><\/p>\n<p>Nothing&#8217;s ever complete, so bear with us while we keep iterating towards a better future.<\/p>\n<blockquote>\n<pre><code>'Coz every night I lie in bed\r\nThe brightest colors fill my head\r\nA million dreams are keeping me awake\r\nI think of what the world could be\r\nA vision of the one I see\r\nA million dreams is all it's gonna take\r\nA million dreams for the world we're gonna make ...\r\n<\/code><\/pre>\n<p>&#8230; <em>listen to \u2192 <a href=\"https:\/\/www.youtube.com\/watch?v=pSQk-4fddDI\" rel=\"nofollow\">A million dreams!<\/a><\/em><\/p><\/blockquote>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/os6O\/c\" alt=\"Hello\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h4><a id=\"user-content-hello-were-the-wordpress-couple\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#hello-were-the-wordpress-couple\" aria-hidden=\"true\"><\/a><strong>Hello, we&#8217;re the <a href=\"https:\/\/thedevcouple.com\/\" rel=\"nofollow\">WordPress Couple<\/a><\/strong>!<\/h4>\n<p>I (<a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow\">Ahmad Awais<\/a>) am a Full Stack Web Developer and a regular core contributor at WordPress. My significant other (<a href=\"https:\/\/twitter.com\/MaedahBatool\/\" rel=\"nofollow\">Maedah Batool<\/a>) is a Technical Project Manager, and she&#8217;s also a WordPress Core Contributor. Together with our <a href=\"https:\/\/thedevcouple.com\/team\" rel=\"nofollow\">team<\/a>, we run the <a href=\"https:\/\/thedevcouple.com\/\" rel=\"nofollow\">TheDevCouple.com<\/a>.<\/p>\n<p>If you&#8217;d like to get insights into our love for open source software, professional full stack development, WordPress community, the growth of JavaScript or growing a family, building, and bootstrapping a business, then subscribe to our premium newsletter called \u21a3 <a href=\"https:\/\/ahmadawais.com\/subscribe\/\" rel=\"nofollow\">The WordPress Takeaway<\/a>!<\/p>\n<h4><a id=\"user-content-support-our-open-source-projects-\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#support-our-open-source-projects-\" aria-hidden=\"true\"><\/a><a href=\"https:\/\/pay.paddle.com\/checkout\/515568\" rel=\"nofollow\"><strong>Support our Open Source Projects!<\/strong><\/a> <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f3a9.svg\" alt=\"\ud83c\udfa9\" \/><\/h4>\n<p>If you&#8217;d like us to keep producing professional free and open source software (FOSS). Consider <a href=\"https:\/\/pay.paddle.com\/checkout\/515568\" rel=\"nofollow\">paying for an hour of my dev-time<\/a>. We&#8217;ll spend two hours on open source for each contribution. Yeah, that&#8217;s right, you pay for one hour and get both of us to spend an hour as a thank you.<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/osEJ\/c\" alt=\"Partners\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h3><a id=\"user-content-project-backers--wpcouple-partners-\ufe0f\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#project-backers--wpcouple-partners-%EF%B8%8F\" aria-hidden=\"true\"><\/a>Project Backers &amp; <a href=\"https:\/\/thedevcouple.com\/partners\" rel=\"nofollow\">TheDevCouple Partners<\/a> <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/26a1.svg\" alt=\"\u26a1\" \/><\/h3>\n<p>This FOSS (free and open source software) project is built, updated and maintained with the help of awesome businesses listed below. Without the support from these amazing companies\/individuals, this project would not have been possible. Make sure you check out their awesome services and products. They&#8217;ve earned it. <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f396.svg\" alt=\"\ud83c\udf96\" \/><\/p>\n<p>\u2014 <em>What\/How? <a href=\"https:\/\/thedevcouple.com\/partners\" rel=\"nofollow\">Read more about it \u2192<\/a><\/em><\/p>\n<table width=\"100%\">\n<tbody>\n<tr>\n<td width=\"333.33\"><a href=\"https:\/\/www.gravityforms.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtrE\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/kinsta.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mu5O\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/wpengine.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mto3\/c\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"333.33\"><a href=\"https:\/\/www.sitelock.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtyZ\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/wp-rocket.me\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtrv\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/blogvault.net\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtph\/c\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"333.33\"><a href=\"http:\/\/cridio.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtmy\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"http:\/\/wecobble.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtrW\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/www.cloudways.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mu0C\/c\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"333.33\"><a href=\"https:\/\/www.cozmoslabs.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mu9W\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/wpgeodirectory.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtwv\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/www.wpsecurityauditlog.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtkh\/c\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td width=\"333.33\"><a href=\"https:\/\/mythemeshop.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/n3ug\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/www.liquidweb.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mtnt\/c\" \/><\/a><\/td>\n<td width=\"333.33\"><a href=\"https:\/\/thedevcouple.com\/contact?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow\"><img decoding=\"async\" src=\"https:\/\/on.ahmadawais.com\/mu3F\/c\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/orkW\/c\" alt=\"Thanks\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-license--attribution\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#license--attribution\" aria-hidden=\"true\"><\/a>License &amp; Attribution<\/h2>\n<p>MIT \u00a9 <a href=\"https:\/\/ahmadawais.com\/\" rel=\"nofollow\">Ahmad Awais<\/a>.<\/p>\n<p>This project is inspired by the work of more people than I could mention here. But thank you, <a href=\"https:\/\/twitter.com\/dan_abramov\" rel=\"nofollow\">Dan Abramov<\/a> for Create React App, <a href=\"https:\/\/twitter.com\/acdlite\" rel=\"nofollow\">Andrew Clark<\/a>, and <a href=\"https:\/\/twitter.com\/sophiebits\" rel=\"nofollow\">Sophie Alpert<\/a> from React.js team. <a href=\"https:\/\/twitter.com\/kentcdodds\" rel=\"nofollow\">Kent C. Dodds<\/a> for his open source evangelism, WordPress Core Contributors, <a href=\"https:\/\/twitter.com\/GaryPendergast\" rel=\"nofollow\">Gary<\/a> for keeping everyone sane, <a href=\"http:\/\/github.com\/wordpress\/gutenberg\">Gutenberg<\/a> developers <a href=\"https:\/\/twitter.com\/matias_ventura\" rel=\"nofollow\">Matias<\/a>, <a href=\"https:\/\/github.com\/youknowriad\">Riad<\/a>, <a href=\"https:\/\/github.com\/aduth\">Andrew<\/a>, also of course <a href=\"https:\/\/github.com\/jasmussen\">Joen<\/a>, <a href=\"https:\/\/twitter.com\/gziolo\" rel=\"nofollow\">Greg<\/a> and contributors, and other WordPress community members like <a href=\"https:\/\/twitter.com\/zgordon\" rel=\"nofollow\">Zac<\/a> for his <a href=\"https:\/\/javascriptforwp.com\/product\/gutenberg-development-course\/ref\/621\/?campaign=AhmadAwais\" rel=\"nofollow\">course on Gutenberg<\/a>, and also my friend <a href=\"https:\/\/twitter.com\/mor10\" rel=\"nofollow\">Morten<\/a> for all the #Guten-motivation, <a href=\"https:\/\/icons8.com\/\" rel=\"nofollow\">Icons8<\/a> for the awesome icons, <a href=\"https:\/\/twitter.com\/MaedahBatool\/\" rel=\"nofollow\">Maedah<\/a> for managing this project, and to everyone I forgot.<\/p>\n<hr \/>\n<h2 id=\"\"><a href=\"#\" class=\"heading-link\">#<\/a><\/h2>\n<h2 id=\"\"><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/oxE3\/c\" alt=\"Thanks\" width=\"100\" height=\"100\" \/><\/a><a href=\"#\" class=\"heading-link\">#<\/a><\/h2>\n<h2 id=\"whats-next\">What&#8217;s Next?<a href=\"#whats-next\" class=\"heading-link\">#<\/a><\/h2>\n<p>Yes, that&#8217;s not all done, yet. I have managed to change the codebase and release many updates by now, before actually announcing a stable release.<\/p>\n<p>The next step is to get this toolkit tested and mature the entire app to release version <code>2.0.0<\/code> for that not only do I need your <a href=\"https:\/\/ahmadawais.com\/contact\/\">support<\/a>, I ask that you hop on board and contribute \u2014 that&#8217;s the only way forward.<\/p>\n<p>I have created a GitHub issue with the title of <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f680.svg\" alt=\"\ud83d\ude80\" \/> <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/11\">Creat Guten Block 2.0 Goals + Call for Contributors<\/a>! In there I have listed a rough roadmap to version <code>2.0.0<\/code>.<\/p>\n<p>Goals listed below \u2014 without any order of priority:<\/p>\n<ul>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f396.svg\" alt=\"\ud83c\udf96\" \/> At the time of writing, <code>create-guten-block<\/code> and sister scripts have received 3,000+ downloads<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4af.svg\" alt=\"\ud83d\udcaf\" \/> Get folks on React, Webpack, and Babel teams to review the configurations for best possible results<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/26a1.svg\" alt=\"\u26a1\" \/> Go beyond React \u2014 with Preact, Inferno, Marko, Angular, Vue, etc. JavaScript frameworks<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4d6.svg\" alt=\"\ud83d\udcd6\" \/> More examples need to be documented. Especially a Multi-block example which is easy<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f530.svg\" alt=\"\ud83d\udd30\" \/> Babel 7, Webpack 4, upgrades to follow in the next major version of create-guten-block<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f6a7.svg\" alt=\"\ud83d\udea7\" \/> ESLint integration needs a refresher \u2014 ESLint + Prettier setup is already WIP<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/26d3.svg\" alt=\"\u26d3\" \/> Refactor code into small modules and maybe make small npm packages<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4d1.svg\" alt=\"\ud83d\udcd1\" \/> Improve inline documentation throughout the codebase<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f48e.svg\" alt=\"\ud83d\udc8e\" \/> Build more <code>cgb-dev-utils<\/code> \u2014 separation of concerns<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4e4.svg\" alt=\"\ud83d\udce4\" \/> Possible integrations: Service Workers from Google<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4e3.svg\" alt=\"\ud83d\udce3\" \/> Possible integrations: Progressive Web Apps<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f47b.svg\" alt=\"\ud83d\udc7b\" \/> <code>.env<\/code> file limited set of customizations<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f913.svg\" alt=\"\ud83e\udd13\" \/> Allow custom forks of <code>cgb-scripts<\/code><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f6e0.svg\" alt=\"\ud83d\udee0\" \/> Improve the entire Webpack defaults<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f5c3.svg\" alt=\"\ud83d\uddc3\" \/> Webpack file handling done right<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4f9.svg\" alt=\"\ud83d\udcf9\" \/> Webpack image optimization<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f479.svg\" alt=\"\ud83d\udc79\" \/> Webpack Uglify ES6 plugin<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/2699.svg\" alt=\"\u2699\" \/> Webpack + BrowserSync<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f530.svg\" alt=\"\ud83d\udd30\" \/> Multi Block Examples<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4a0.svg\" alt=\"\ud83d\udca0\" \/> Automated test suit<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f914.svg\" alt=\"\ud83e\udd14\" \/> Other stuff? #Suggest<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f64c.svg\" alt=\"\ud83d\ude4c\" \/> PR&#8217;s welcomed<\/li>\n<\/ul>\n<p>What do you say? Comment below. And make sure you&#8217;ve stargazed <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f31f.svg\" alt=\"\ud83c\udf1f\" \/> the GitHub repo for updates<\/a>!<\/p>\n<p style=\"text-align: center;\">\n<div class=\"alert gray\">\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/2705.svg\" alt=\"\u2705\" \/><\/p>\n<p style=\"text-align: center;\">Building <code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> was a lot of work. It&#8217;s easily one of the best software I&#8217;ve written and I have exciting improvements coming.<\/p>\n<p style=\"text-align: center;\"><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f525.svg\" alt=\"\ud83d\udd25\" \/> It would mean the world to me if you <a href=\"https:\/\/twitter.com\/home?status=%F0%9F%94%A5%20Configuring%20and%20maintaining%20React,%20Webpack,%20ES6\/7\/8\/Next,%20ESLint,%20Babel,%20etc.%20is%20not%20what%20I%20do%20while%20creating%20%40WordPress%20%23Gutenberg%20blocks.%0A%0AI%20use%20a%20%230CJS%20dev%20%23toolkit%20called%20%60create-guten-block%60%20by%20%40MrAhmadAwais%20%F0%9F%9B%A0%F0%9F%9A%80%0A%0A%F0%9F%91%89%20CHECK%20IT%20OUT%3A%20https%3A\/\/https:\/\/ahmadawais.com\/create-guten-block-toolkit\/%20%20%0A\">Tweet about it<\/a>, try it out, and contribute.<\/p>\n<p style=\"text-align: center;\"><\/div>\n<\/p>\n<hr \/>\n<p style=\"text-align: center;\">Peace! <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/270c.svg\" alt=\"\u270c\" \/><\/p>\n<p style=\"text-align: center;\">Feel free to reach out and say <img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f44b.svg\" alt=\"\ud83d\udc4b\" \/> on Twitter <a href=\"https:\/\/twitter.com\/mrahmadawais\/\">@MrAhmadAwais<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/on.ahmadawais.com\/oy5y\/c\" alt=\"Thanks\" width=\"96\" height=\"96\" \/><\/a><\/p>\n<h2><a id=\"user-content-license--attribution\" class=\"anchor\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#license--attribution\" aria-hidden=\"true\"><\/a>UPDATES<\/h2>\n<ul>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f680.svg\" alt=\"\ud83d\ude80\" \/> <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> has gone viral ~500 <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\">stargazers on GitHub<\/a><\/span><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f64c.svg\" alt=\"\ud83d\ude4c\" \/> Woot! Woot! The <a href=\"https:\/\/on.ahmadawais.com\/oytg\">project is trending<\/a> on GitHub JavaScript repos today<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f607.svg\" alt=\"\ud83d\ude07\" \/> Humbled to be listed as a <a href=\"https:\/\/on.ahmadawais.com\/oz9O\">trending developer on GitHub<\/a> today \u2014 this is crazy!<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f525.svg\" alt=\"\ud83d\udd25\" \/> Holly Molly \u2014 <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> is now <a href=\"https:\/\/on.ahmadawais.com\/oy9x\">trending in all languages<\/a> overall on GitHub!<\/span><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f4e3.svg\" alt=\"\ud83d\udce3\" \/> create-guten-block hit the <a href=\"https:\/\/www.producthunt.com\/posts\/create-guten-block\">top five on ProductHunt&#8217;s homepage<\/a> \u2014 which is so much awesome<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f607.svg\" alt=\"\ud83d\ude07\" \/> Gary from a8c went out of his way to appreciate the create-guten-block toolkit by <a href=\"https:\/\/wptavern.com\/gutenberg-boilerplate-demonstrates-how-to-build-custom-blocks\">writing this tweet<\/a> which means a lot<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f369.svg\" alt=\"\ud83c\udf69\" \/> The <em>Wes Bos<\/em> yes, that one, tweeted about how he plans to <a href=\"https:\/\/twitter.com\/wesbos\/status\/955426735532724224\">try out create-guten-block<\/a> and the new WordPress Gutenberg Editor<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f632.svg\" alt=\"\ud83d\ude32\" \/> Matt Cromwell listed me along with both the <a href=\"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/\">Gutenberg Boilerplate<\/a> and<span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> <\/span> project in <a href=\"https:\/\/www.mattcromwell.com\/who-what-ill-follow-in-2018\/\">his 2018 follow list<\/a><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f389.svg\" alt=\"\ud83c\udf89\" \/> <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> <\/span>got a mention in the first <a href=\"https:\/\/wordpress.org\/news\/2018\/02\/the-month-in-wordpress-january-2018\/\">The Month in WordPress<\/a> on the official blog of WordPress.org. That&#8217;s awesome news!<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f392.svg\" alt=\"\ud83c\udf92\" \/> <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> <\/span>got featured on <a href=\"https:\/\/tympanus.net\/codrops\/collective\/collective-385\/\">Tympanus Codrops Collective #385<\/a> \u2014 how amazing is that.<\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f5e3.svg\" alt=\"\ud83d\udde3\" \/> In the <a href=\"http:\/\/www.advancedwp.org\/awp-gutenberg-interview-series\/\">Gutenberg Interview Series<\/a> at Advanced WordPress Facebook group, I did a <a href=\"https:\/\/www.youtube.com\/watch?v=AwyUm4DafZc\">live video session<\/a> to talk about <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> and everything Gutenberg \u2014 here&#8217;s what <a href=\"http:\/\/www.advancedwp.org\/rich-tabor-awp-interview-response\/\">Rich wrote about it<\/a> \u2014 here&#8217;s the video on <a href=\"https:\/\/www.youtube.com\/watch?v=AwyUm4DafZc\">YouTube<\/a>, <a href=\"https:\/\/www.facebook.com\/mathetos\/videos\/g.168889943173228\/10213519047269033\/?type=2&amp;theater&amp;ifg=1\">Facebook<\/a>, <a href=\"https:\/\/wordpress.tv\/2018\/02\/18\/awp-gutenberg-interview-series-with-ahmad-awais\/\">WordPress.tv<\/a>.<\/span><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f632.svg\" alt=\"\ud83d\ude32\" \/> The <a href=\"https:\/\/en.wikipedia.org\/wiki\/Matt_Mullenweg\">Matt Mullenweg<\/a> in the <a href=\"http:\/\/www.advancedwp.org\/awp-gutenberg-interview-series\/\">Gutenberg Interview Series<\/a> at Advanced WordPress Facebook group said amazing things about <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> here&#8217;s <a href=\"https:\/\/youtu.be\/4vS_jR5-nIo?t=45m23s\">Matt&#8217;s his testimonial<\/a>.<\/span><\/li>\n<li><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/1f609.svg\" alt=\"\ud83d\ude09\" \/> The <span style=\"color: #000000;\"><code><a style=\"color: #000000;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> <\/span>made it to number #6 in the <a href=\"https:\/\/medium.mybridge.co\/react-js-top-10-open-source-projects-v-feb-2018-655463e4d1a8\">top ten React projects<\/a> of February.<\/li>\n<\/ul>\n<blockquote><p><em>JUST A NOTE!<\/em><br \/>\n\ud83d\udc68\u200d\ud83d\udcbb I&#8217;m teaching thousands of devs how to become <a href=\"https:\/\/VSCode.pro\/\" target=\"_blank\" rel=\"noopener\">VSCode Power Users<\/a> \u2192<br \/>\n\u2705 This site is super fast?! <a href=\"https:\/\/kinsta.com\/?kaid=WMDAKYHJLNJX&amp;utm_source=TheDevCouple&amp;utm_medium=Partner\">It&#8217;s hosted with Kinsta on Google servers \u2192<\/a>\n<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc. <\/p>\n","protected":false},"author":2,"featured_media":3542,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[181,10],"tags":[179,178,156,180],"class_list":["post-3342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-wordpress","tag-cgb","tag-create-guten-block","tag-gutenberg","tag-gutenberg-custom-blocks"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create Guten Block Toolkit: Launch, Introduction, Philosophy, &amp; More! \ud83d\ude80<\/title>\n<meta name=\"description\" content=\"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &amp; More! \ud83d\ude80\" \/>\n<meta property=\"og:description\" content=\"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/\" \/>\n<meta property=\"og:site_name\" content=\"Ahmad Awais\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/AhmadAwais\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-20T00:41:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-16T12:56:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ahmad Awais\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:site\" content=\"@MrAhmadAwais\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ahmad Awais\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"34 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &#038; More! \ud83d\ude80\",\"datePublished\":\"2018-01-20T00:41:34+00:00\",\"dateModified\":\"2023-08-16T12:56:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/\"},\"wordCount\":2646,\"commentCount\":19,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-no-text-wallpaper.jpg\",\"keywords\":[\"cgb\",\"create-guten-block\",\"gutenberg\",\"Gutenberg custom blocks\"],\"articleSection\":[\"JavaScript\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/\",\"name\":\"Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! \ud83d\ude80\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-no-text-wallpaper.jpg\",\"datePublished\":\"2018-01-20T00:41:34+00:00\",\"dateModified\":\"2023-08-16T12:56:17+00:00\",\"description\":\"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\\\/7\\\/8\\\/Next, etc.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-no-text-wallpaper.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/logo-no-text-wallpaper.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"create-guten-block\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/create-guten-block-toolkit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &#038; More! \ud83d\ude80\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/\",\"name\":\"Ahmad Awais\",\"description\":\"Founder &amp; CEO of CommandCode.ai f\\\/k\\\/a Langbase | Google Developers Advisory Board (gDAB) founding member\",\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ahmadawais.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\",\"name\":\"Ahmad Awais\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\",\"width\":2299,\"height\":1705,\"caption\":\"Ahmad Awais\"},\"logo\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Ahmad-Awais-face.jpg\"},\"description\":\"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \\\"Awais is an awesome example for developers\\\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\\\/ML\\\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\\\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.\",\"sameAs\":[\"https:\\\/\\\/AhmadAwais.com\\\/\",\"https:\\\/\\\/facebook.com\\\/AhmadAwais\",\"https:\\\/\\\/instagram.com\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/MrAhmadAwais\\\/\",\"https:\\\/\\\/x.com\\\/MrAhmadAwais\",\"https:\\\/\\\/youtube.com\\\/AhmadAwais\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! \ud83d\ude80","description":"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc.","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:\/\/ahmadawais.com\/create-guten-block-toolkit\/","og_locale":"en_US","og_type":"article","og_title":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! \ud83d\ude80","og_description":"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc.","og_url":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2018-01-20T00:41:34+00:00","article_modified_time":"2023-08-16T12:56:17+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","type":"image\/jpeg"}],"author":"Ahmad Awais","twitter_card":"summary_large_image","twitter_creator":"@MrAhmadAwais","twitter_site":"@MrAhmadAwais","twitter_misc":{"Written by":"Ahmad Awais","Est. reading time":"34 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &#038; More! \ud83d\ude80","datePublished":"2018-01-20T00:41:34+00:00","dateModified":"2023-08-16T12:56:17+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/"},"wordCount":2646,"commentCount":19,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","keywords":["cgb","create-guten-block","gutenberg","Gutenberg custom blocks"],"articleSection":["JavaScript","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/","url":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/","name":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! \ud83d\ude80","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","datePublished":"2018-01-20T00:41:34+00:00","dateModified":"2023-08-16T12:56:17+00:00","description":"I am excited to launch Create Guten Block. `create-guten-block` is a zero-configuration dev-toolkit (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring React, Webpack, ESLint, Babel, ES6\/7\/8\/Next, etc.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/create-guten-block-toolkit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","width":1920,"height":1080,"caption":"create-guten-block"},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/create-guten-block-toolkit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Create Guten Block Toolkit: Launch, Introduction, Philosophy, &#038; More! \ud83d\ude80"}]},{"@type":"WebSite","@id":"https:\/\/ahmadawais.com\/#website","url":"https:\/\/ahmadawais.com\/","name":"Ahmad Awais","description":"Founder &amp; CEO of CommandCode.ai f\/k\/a Langbase | Google Developers Advisory Board (gDAB) founding member","publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ahmadawais.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b","name":"Ahmad Awais","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg","width":2299,"height":1705,"caption":"Ahmad Awais"},"logo":{"@id":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2020\/06\/Ahmad-Awais-face.jpg"},"description":"Founder & CEO of \u2318 Command Code coding agent with taste. Founded Langbase.com, AI cloud to build, deploy, and scale AI agents with tools & memory \u00b7 Creator of Command.new. \"Awais is an awesome example for developers\" \u2014 Satya Nadella, CEO of Microsoft. NASA Mars Ingenuity Helicopter mission code contributor 8th GitHub Stars Award recipient with 5x GitHub Stars Award (Listed as GitHub's #1 JavaScript trending developer). Google Developers Expert Web DevRel. Ex VP Eng (DevTools & DevRel) Rapid \u00b7 Google Developers Advisory Board (gDAB) founding member \u00b7 AI\/ML\/DevTools Angel Investor (Replit, Resend, Daytona, Gumroad and you?) \u276f AI\/ML Advisory Board San Francisco, DevNetwork. Award-winning Open Source Engineering leader authored hundreds of open-source dev-tools and software libraries used by millions of developers, including Shades of Purple code theme and corona-cli. Linux Foundation (Node.js Committee Lead), OpenAPI Business Governing Board. Taught 108K+ developers via NodeCLI.com and VSCode.pro course. 274 million views, blogging for 24 yrs. \u276f Read more about Ahmad Awais or come say hi on \ud835\udd4f @MrAhmadAwais.","sameAs":["https:\/\/AhmadAwais.com\/","https:\/\/facebook.com\/AhmadAwais","https:\/\/instagram.com\/MrAhmadAwais\/","https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/","https:\/\/x.com\/MrAhmadAwais","https:\/\/youtube.com\/AhmadAwais"]}]}},"jetpack_featured_media_url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/3342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/comments?post=3342"}],"version-history":[{"count":5,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/3342\/revisions"}],"predecessor-version":[{"id":7986,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/3342\/revisions\/7986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/3542"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=3342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=3342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=3342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}