{"id":3655,"date":"2018-01-23T12:40:15","date_gmt":"2018-01-23T07:40:15","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=3655"},"modified":"2018-01-23T15:37:02","modified_gmt":"2018-01-23T10:37:02","slug":"create-guten-block-toolkit-build-custom-gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/create-guten-block-toolkit-build-custom-gutenberg-blocks\/","title":{"rendered":"Create Guten Block Toolkit: Build Custom Gutenberg Blocks"},"content":{"rendered":"<p>\ud83c\udf89\u00a0Excited to release the\u00a0<code>create-guten-block<\/code>\u00a0toolkit today. In this post, I am going to share what is\u00a0<code>create-guten-block<\/code>\u00a0(<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\u2019s start with intro first\u2026<\/p>\n<h2>\ud83d\ude4c\u00a0Introducing\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">Create Guten Block<\/a>!<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3658\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon.png\" alt=\"\" width=\"512\" height=\"512\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon.png 512w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-150x150.png 150w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-300x300.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-500x500.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-400x400.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-250x250.png 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-200x200.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-100x100.png 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-64x64.png 64w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-96x96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-icon-128x128.png 128w\" sizes=\"(max-width: 512px) 100vw, 512px\"><\/a><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3660\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2.png\" alt=\"\" width=\"642\" height=\"37\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2.png 642w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-300x17.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-500x29.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-400x23.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-250x14.png 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-200x12.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-100x6.png 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-76x4.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-with-name-2-50x3.png 50w\" sizes=\"(max-width: 642px) 100vw, 642px\"><\/a><\/h2>\n<div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a>\u00a0(<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\" rel=\"nofollow noopener\" target=\"_blank\">\ud83c\udf1f\u00a0at GitHub for updates<\/a>) is a zero-configuration\u00a0dev-toolkit\u00a0(#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring\u00a0React,\u00a0Webpack,\u00a0ES6\/7\/8\/Next,\u00a0ESLint,\u00a0Babel, etc.<\/p>\n<\/div><\/div>\n<p>Create Guten Block is not like other\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/wpgulp\" rel=\"nofollow noopener\" target=\"_blank\">starter-kits<\/a>\u00a0or\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-boilerplate\" rel=\"nofollow noopener\" target=\"_blank\">boilerplates<\/a>. It\u2019s a developer\u2019s toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code. That\u2019s actually why I built it.<\/p>\n<div class=\"eckosc eckosc_status_message eckosc_status_message_success\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\ud83d\udc4b<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">Hey, don\u2019t forget to star \ud83c\udf1f it at GitHub for updates, to show appreciation, and do report back any issues you face.<\/div>\n\t\t\t\t<\/div>\n<p>\ud83d\ude80\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>\u00a0is:<\/p>\n<ul>\n<li>\ud83e\udd5e\u00a0Versioned \u2713<\/li>\n<li>\ud83e\udd20\u00a0Updatable \u2713<\/li>\n<li>\ud83d\uddc3\u00a0Set of sane-defaults \u2713<\/li>\n<li>\ud83d\udc0e\u00a0ONE single\u00a0<code>cgb-scripts<\/code>\u00a0dependency \u2713<\/li>\n<\/ul>\n<p>But what is it?!<\/p>\n<div class=\"eckosc eckosc_status_message eckosc_status_message_info\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3><\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">Well, it\u2019s a create-guten-block is a way for you to start building Gutenberg blocks without having to configure or setup anything. It\u2019s a zero-config-js #0CJS toolkit with a single dependency in your projects \u2014 which will stay up to date.<\/div>\n\t\t\t\t<\/div>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3667 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-add-database-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>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\u00a0<code>-webkit<\/code>\u00a0or 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\u00a0<code>cgb-scripts<\/code>.<\/li>\n<\/ul>\n<div class=\"eckosc eckosc_status_message eckosc_status_message_info\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\ud83d\udd30<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">The tradeoff is that these tools are preconfigured to work in a specific way. If your project needs more customization, you can \u201ceject\u201d and customize it, but then you will need to maintain this configuration.<\/div>\n\t\t\t\t<\/div>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3668 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-megaphone-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>Philosophy<\/h2>\n<ul>\n<li><strong>One Dependency:<\/strong>\u00a0There 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>\u00a0You don\u2019t 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>\u00a0You can\u00a0<code>eject<\/code>\u00a0to 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\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3669 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-ask-question-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>Why\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>?<\/h2>\n<p>Well, it\u2019s really hard to configure things like Webpack, React, ES 6\/7\/8\/Next, ESLint, Babel, etc. before you \u2014\u00a0<em>even start writing<\/em>\u00a0\u2014 a\u00a0<code>Hello World<\/code>Gutenberg block. Then there\u2019s 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\u2019s not an easy thing to do.<\/p>\n<p><code>create-guten-block<\/code>\u00a0hides all this configuration away in an optimized package that we call\u00a0<code>cgb-scripts<\/code>. This package is the only dependency in your projects. We keep\u00a0<code>cgb-scripts<\/code>\u00a0up to date while you go ahead and create the next best WordPress themes and plugins.<\/p>\n<div class=\"eckosc eckosc_status_message eckosc_status_message_info\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\ud83e\udd91<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">\u201cI\u2019ve heard from several people that they\u2019ve consolidated their companies tool dependencies into a single package and this worked really well for them.\u201d \u2014 @Dan_Abramov<\/div>\n\t\t\t\t<\/div>\n<p>So, that\u2019s what I dreamt about for the next couple of months.\u00a0<em>How do I solve this problem for the WordPress community, eh?<\/em><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3670\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block.jpg\" alt=\"\" width=\"1920\" height=\"1080\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block.jpg 1920w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-300x169.jpg 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-768x432.jpg 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-1024x576.jpg 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-1680x945.jpg 1680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-1240x698.jpg 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-860x484.jpg 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-680x383.jpg 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-500x281.jpg 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-400x225.jpg 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-250x141.jpg 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-200x113.jpg 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-100x56.jpg 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-76x43.jpg 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/create-guten-block-50x28.jpg 50w\" sizes=\"(max-width: 1920px) 100vw, 1920px\"><\/a><\/p>\n<\/div>\n<p>After building\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/WPGulp\/issues\/61\" rel=\"nofollow noopener\" target=\"_blank\">WPGulp<\/a>\u00a0and\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\" rel=\"nofollow noopener\" target=\"_blank\">Gutenberg Boilerplate<\/a>\u00a0and lot of other open source software that thousands of developers are using \u2014 I started receiving lots of feedback on how it\u2019s 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<div class=\"alert gray\">\u00a0<div class=\"eckosc eckosc_status_message eckosc_status_message_info\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\ud83d\ude48\ud83d\ude49\ud83d\ude4a<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">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\u2019t worth it. And I was like whaaaat?!<\/div>\n\t\t\t\t<\/div><\/div>\n<div><\/div>\n<div class=\"alert gray\">So, yes! I went ahead and built a solution \u2014 a zero-config-js #0CJS WordPress developers\u2019 toolkit called\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>!\u00a0Enough talk, let\u2019s stop it right here and actually explore the toolkit.<\/div>\n<div><\/div>\n<div><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3672 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-rocket-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/div>\n<div><\/div>\n<p>&lt;<\/p>\n<p>div><\/p>\n<h2>GETTING STARTED!<\/h2>\n<p>It\u2019s really easy to get started with\u00a0<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;\"><div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\">\n<\/div>\n<p style=\"text-align: center;\">\ud83e\udd8a<\/p>\n<p style=\"text-align: center;\">Did I tell you to\u00a0star\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\" rel=\"nofollow noopener\" target=\"_blank\">\ud83c\udf1f\u00a0it at GitHub for updates<\/a>\u00a0and to show appreciation or to report back any\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc\" rel=\"nofollow noopener\" target=\"_blank\">issues<\/a>\u00a0you face? Hmm\u2026 lemme think?!<\/p>\n<p style=\"text-align: center;\"><\/div><\/div>\n<p><em><strong>OK! OK!<\/strong>\u00a0Let\u2019s get you started!<\/em><\/p>\n<h3>\u2192 STEP #0<\/h3>\n<p>If you don\u2019t have\u00a0<code>Node.js<\/code>\u00a0+\u00a0<code>npm<\/code>\u00a0installed then read this step, otherwise jump to the Step #1 below.<br \/>\nIn case you are an absolute beginner to the world of\u00a0<code>Node.js<\/code>, JavaScript, and\u00a0<code>npm<\/code>\u00a0packages \u2014 all you need to do is go to the Node\u2019s site\u00a0<a href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"nofollow noopener\" target=\"_blank\">download + install<\/a>\u00a0Node on your system. This will install both\u00a0<code>Node.js<\/code>\u00a0and\u00a0<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\u2026<\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code data-language=\"bash\">node -v\n# Results into v9.4.0 \u2014 make sure you have Node &gt;= 8 installed.<\/code><\/pre>\n<p>and then\u2026<\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code data-language=\"bash\">npm -v\n# Results into 5.6.0 \u2014 make sure you have npm &gt;= 5.2 installed.<\/code><\/pre>\n<h3>\u2192 STEP #1<\/h3>\n<p>Install\u00a0<code>create-guten-block<\/code>\u00a0globally 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\u00a0<a href=\"https:\/\/github.com\/creationix\/nvm#installation\" rel=\"nofollow noopener\" target=\"_blank\">nvm<\/a>(macOS\/Linux) or\u00a0<a href=\"https:\/\/github.com\/coreybutler\/nvm-windows#node-version-manager-nvm-for-windows\" rel=\"nofollow noopener\" target=\"_blank\">nvm-windows<\/a>\u00a0to easily switch Node versions between different projects.<\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code>npm install create-guten-block --global<\/code><\/pre>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3687\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screen-Recording-2018-01-16-at-07.26-PM.gif\" alt=\"\" width=\"1117\" height=\"553\"><\/a><\/p>\n<\/div>\n<p><em>Hold on, it\u2019ll 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\" rel=\"nofollow noopener\" target=\"_blank\"><\/a>\u2192 STEP #2<\/h3>\n<p>Now all you have to do is create a Gutenberg block and start building. It\u2019s done by running the\u00a0<code>create-guten-block<\/code>\u00a0command 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<div class=\"eckosc eckosc_status_message eckosc_status_message_warn\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\u26a0\ufe0f<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">Make sure to run this command in your local WordPress install\u2019s plugins folder i.e. \/local_dev_site.tld\/wp-content\/plugins\/ folde \u2014 since this command will produce a WordPress Gutenberg block plugin that you can go to WP Admin \u25b6\ufe0e Plugins to activate.<\/div>\n\t\t\t\t<\/div>\n<p>Now let\u2019s run the following command.<\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code>create-guten-block my-block<\/code><\/pre>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3700\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screen-Recording-2018-01-16-at-07.41-PM.gif\" alt=\"\" width=\"1117\" height=\"555\"><\/a><\/p>\n<\/div>\n<p>It will create a directory called\u00a0<code>my-block<\/code>\u00a0inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:<\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code data-language=\"bash\">INSIDE: \/local_dev_site.tld\/wp-content\/plugins\/my-block\n\n\u251c\u2500\u2500 plugin.php\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 README.md\n|\n\u251c\u2500\u2500 dist\n|  \u251c\u2500\u2500 blocks.build.js\n|  \u251c\u2500\u2500 blocks.editor.build.css\n|  \u2514\u2500\u2500 blocks.style.build.css\n|\n\u2514\u2500\u2500 src\n   \u251c\u2500\u2500 block\n   |  \u251c\u2500\u2500 block.js\n   |  \u251c\u2500\u2500 editor.scss\n   |  \u2514\u2500\u2500 style.scss\n   |\n   \u251c\u2500\u2500 blocks.js\n   \u251c\u2500\u2500 common.scss\n   \u2514\u2500\u2500 init.php<\/code><\/pre>\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\" rel=\"nofollow noopener\" target=\"_blank\"><\/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\u2019s do that.<\/em><\/p>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code data-language=\"bash\">cd my-block\nnpm start<\/code><\/pre>\n<p><em>You can also use\u00a0<code>yarn start<\/code>\u00a0if that\u2019s your jam.<\/em><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3705\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screen-Recording-2018-01-16-at-07.44-PM.gif\" alt=\"\" width=\"1117\" height=\"557\"><\/a><\/p>\n<\/div>\n<p>This runs the plugin in development mode. To produce production code run\u00a0<code>npm run build<\/code>. You will see the build messages, errors, and lint warnings in the console.<\/p>\n<div class=\"eckosc eckosc_status_message eckosc_status_message_info\">\n\t\t\t\t\t<div class=\"eckosc_status_message_title\"><h3>\ud83d\udcaf<\/h3><\/div>\n\t\t\t\t\t<div class=\"eckosc_status_message_message\">And just like that, you\u2019re 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.<\/div>\n\t\t\t\t<\/div>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3729 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-more-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h3>Workflow!<\/h3>\n<p>There are just three scripts that you can use in your\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>\u00a0workflow. With these three scripts, you can develop, build, and eject your plugin.<\/p>\n<h4>\ud83d\udc49\u00a0<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\" rel=\"nofollow noopener\" target=\"_blank\"><\/a>\ud83d\udc49\u00a0<code>npm run build<\/code><\/h4>\n<ul>\n<li>Use to build production code for your block inside\u00a0<code>dist<\/code>\u00a0folder.<\/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\" rel=\"nofollow noopener\" target=\"_blank\"><\/a>\ud83d\udc49\u00a0<code>npm run eject<\/code><\/h4>\n<ul>\n<li>Use to eject your plugin out of\u00a0<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\u2019s a one-way street,\u00a0<code>eject<\/code>\u00a0and you have to maintain everything yourself.<\/li>\n<li>You don\u2019t normally have to\u00a0<code>eject<\/code>\u00a0a project because by ejecting you lose the connection with\u00a0<code>create-guten-block<\/code>\u00a0and from there onwards you have to update and maintain all the dependencies on your own.<\/li>\n<\/ul>\n<p><em>That\u2019s about it.<\/em><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3736 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-speed-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>TL;DR<\/h2>\n<blockquote><p>Too long, didn\u2019t read? Here\u2019s a shorter version.<\/p><\/blockquote>\n<p>Open the terminal app and run the following commands.<\/p>\n<ul>\n<li><strong>\u2705\u00a0Install\/Update<\/strong>:\u00a0<code>npm install create-guten-block --global<\/code><\/li>\n<li><strong>\ud83d\udd30\u00a0Create<\/strong>:\u00a0<code>create-guten-block my-block<\/code>\u00a0\u2014 Run inside local WP install E.g.\u00a0<code>\/wp.local\/wp-content\/plugins\/<\/code>\u00a0directory.<\/li>\n<li><strong>\ud83d\udcc2\u00a0Browse<\/strong>:\u00a0<code>cd my-block<\/code>\u00a0\u2014 Open the newly created plugin directory.<\/li>\n<li><strong>\u267b\ufe0f\u00a0Run<\/strong>:\u00a0<code>npm start<\/code>\u00a0\u2014 For development.<\/li>\n<li><strong>\ud83d\udce6\u00a0Run<\/strong>:\u00a0<code>npm run build<\/code>\u00a0\u2014 For production build.<\/li>\n<li><strong>\u23cf\u00a0Run<\/strong>:\u00a0<code>npm run eject<\/code>\u00a0\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\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/new\" rel=\"nofollow noopener\" target=\"_blank\">an issue \u2192<\/a><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3740 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-download-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>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>\u00a0is a global command-line utility that you use to create new WP Gutenberg plugins.<\/li>\n<li><strong><code>cgb-scripts<\/code><\/strong>\u00a0is a development dependency in the generated plugin projects.<\/li>\n<\/ol>\n<pre class=\"eckosc_syntax eckosc_syntax_theme_dark\"><code>npm install create-guten-block --global<\/code><\/pre>\n<p>You almost never need to update\u00a0<code>create-guten-block<\/code>\u00a0itself: it delegates all the setup to\u00a0<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<p>When you run\u00a0<code>create-guten-block<\/code>, it always creates the project with the latest version of\u00a0<code>cgb-scripts<\/code>\u00a0so you\u2019ll get all the new features and improvements in newly created plugins automatically.<\/p>\n<p>\u2705\u00a0To update an existing project to a new version of\u00a0<code>cgb-scripts<\/code>, open the\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#changelog\" rel=\"nofollow noopener\" target=\"_blank\">changelog<\/a>, find the version you\u2019re currently on (check package.json in your plugin\u2019s folder if you\u2019re not sure), and apply the migration instructions for the newer versions.<\/p>\n<p>\ud83d\udd30\u00a0In most cases bumping the\u00a0<code>cgb-scripts<\/code>\u00a0version in the package.json and running\u00a0<code>npm install<\/code>\u00a0in this folder should be enough, but it\u2019s good to consult the\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#changelog\" rel=\"nofollow noopener\" target=\"_blank\">changelog<\/a>\u00a0for potential breaking changes.<\/p>\n<p>We commit to keeping the breaking changes minimal so you can upgrade\u00a0<code>cgb-scripts<\/code>\u00a0painlessly.<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3747 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-edit-property-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>Changelog<\/h2>\n<p>Read what\u2019s\u00a0\ud83d\udce6\u00a0new,\u00a0\ud83d\udc4c\u00a0improved,\u00a0\ud83d\udc1b\u00a0fixed, and if\u00a0\ud83d\udcd6\u00a0docs got updated.<\/p>\n<p>\ud83d\udc49\u00a0 Go read the entire changelog at this link \u2014\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/blob\/master\/CHANGELOG.md\" rel=\"nofollow noopener\" target=\"_blank\">CGB Changelog \u2192<\/a><\/p>\n<p>Nothing\u2019s ever complete, so bear with us while we keep iterating towards a better future.<\/p>\n<pre><code data-language=\"bash\">'Coz every night I lie in bed\nThe brightest colors fill my head\nA million dreams are keeping me awake\nI think of what the world could be\nA vision of the one I see\nA million dreams is all it's gonna take\nA million dreams for the world we're gonna make ...\n<\/code><\/pre>\n<p>\u2026\u00a0<em>listen to \u2192\u00a0<a href=\"https:\/\/www.youtube.com\/watch?v=pSQk-4fddDI\" rel=\"nofollow noopener\" target=\"_blank\">A million dreams!<\/a><\/em><\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3751 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-private-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h4><strong>Hello, we\u2019re the\u00a0<a href=\"https:\/\/thedevcouple.com\/\" rel=\"nofollow\">WordPress Couple<\/a><\/strong>!<\/h4>\n<p>I (<a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\">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 noopener\" target=\"_blank\">Maedah Batool<\/a>) is a Technical Project Manager, and she\u2019s also a WordPress Core Contributor. Together with our\u00a0<a href=\"https:\/\/thedevcouple.com\/team\" rel=\"nofollow\">team<\/a>, we run the\u00a0<a href=\"https:\/\/thedevcouple.com\/\" rel=\"nofollow\">TheDevCouple.com<\/a>.<\/p>\n<p>If you\u2019d 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\u00a0<a href=\"https:\/\/wptakeaway.club\/\" rel=\"nofollow noopener\" target=\"_blank\">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\" rel=\"nofollow noopener\" target=\"_blank\"><\/a><a href=\"https:\/\/pay.paddle.com\/checkout\/515568\" rel=\"nofollow noopener\" target=\"_blank\"><strong>Support our Open Source Projects!<\/strong><\/a>\u00a0\ud83c\udfa9<\/h4>\n<p>If you\u2019d like us to keep producing professional free and open source software (FOSS). Consider\u00a0<a href=\"https:\/\/pay.paddle.com\/checkout\/515568\" rel=\"nofollow noopener\" target=\"_blank\">paying for an hour of my dev-time<\/a>. We\u2019ll spend two hours on open source for each contribution. Yeah, that\u2019s 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\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3752 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-handshake-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h3>Project Backers &amp;\u00a0<a href=\"https:\/\/thedevcouple.com\/partners\" rel=\"nofollow\">WPCouple Partners<\/a>\u00a0\u26a1\ufe0f<\/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\u2019ve earned it.\u00a0\ud83c\udf96<\/p>\n<p>\u2014\u00a0<em>What\/How?\u00a0<a href=\"https:\/\/thedevcouple.com\/partners\" rel=\"nofollow\">Read more about it \u2192<\/a><\/em><\/p>\n<div class=\"eckosc eckosc_full_width_block\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-3763\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25.png\" alt=\"\" width=\"1780\" height=\"616\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25.png 1780w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-300x104.png 300w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-768x266.png 768w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-1024x354.png 1024w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-1680x581.png 1680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-1240x429.png 1240w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-860x298.png 860w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-680x235.png 680w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-500x173.png 500w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-400x138.png 400w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-250x87.png 250w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-200x69.png 200w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-100x35.png 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-76x26.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/Screenshot-2018-01-18-13.37.25-50x17.png 50w\" sizes=\"(max-width: 1780px) 100vw, 1780px\"><\/a><\/p>\n<\/div>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3764 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96.png\" alt=\"\" width=\"96\" height=\"96\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96.png 96w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-good-quality-96-64x64.png 64w\" sizes=\"(max-width: 96px) 100vw, 96px\"><\/a><\/p>\n<h2>License &amp; Attribution<\/h2>\n<p>MIT \u00a9\u00a0<a href=\"https:\/\/ahmadawais.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Ahmad Awais<\/a>.<\/p>\n<p>This project is inspired by the work of more people than I could mention here. But thank you,\u00a0<a href=\"https:\/\/twitter.com\/dan_abramov\" rel=\"nofollow noopener\" target=\"_blank\">Dan Abramov<\/a>\u00a0for Create React App,\u00a0<a href=\"https:\/\/twitter.com\/acdlite\" rel=\"nofollow noopener\" target=\"_blank\">Andrew Clark<\/a>,\u00a0<a href=\"https:\/\/twitter.com\/sophiebits\" rel=\"nofollow noopener\" target=\"_blank\">Sophie Alpert<\/a>\u00a0from React.js team,\u00a0<a href=\"https:\/\/twitter.com\/wesbos\" rel=\"nofollow noopener\" target=\"_blank\">Wes Bos<\/a>\u00a0for awesome courses for\u00a0<a href=\"https:\/\/reactforbeginners.com\/friend\/AHMADAWAIS\" rel=\"nofollow noopener\" target=\"_blank\">React<\/a>,\u00a0<a href=\"https:\/\/es6.io\/friend\/AHMADAWAIS\" rel=\"nofollow noopener\" target=\"_blank\">ES6<\/a>, and\u00a0<a href=\"https:\/\/learnnode.com\/friend\/AHMADAWAIS\" rel=\"nofollow noopener\" target=\"_blank\">Node<\/a>\u00a0beginners.\u00a0<a href=\"https:\/\/twitter.com\/kentcdodds\" rel=\"nofollow noopener\" target=\"_blank\">Kent C. Dodds<\/a>\u00a0for his open source evangelism, WordPress Core Contributors,\u00a0<a href=\"https:\/\/twitter.com\/GaryPendergast\" rel=\"nofollow noopener\" target=\"_blank\">Gary<\/a>\u00a0for keeping everyone sane,\u00a0<a href=\"http:\/\/github.com\/wordpress\/gutenberg\" rel=\"nofollow noopener\" target=\"_blank\">Gutenberg<\/a> developers\u00a0<a href=\"https:\/\/twitter.com\/matias_ventura\" rel=\"nofollow noopener\" target=\"_blank\">Matias<\/a>,\u00a0<a href=\"https:\/\/github.com\/youknowriad\" rel=\"nofollow noopener\" target=\"_blank\">Riad<\/a>,\u00a0<a href=\"https:\/\/github.com\/aduth\" rel=\"nofollow noopener\" target=\"_blank\">Andrew<\/a>,\u00a0<a href=\"https:\/\/github.com\/jasmussen\" rel=\"nofollow noopener\" target=\"_blank\">Joen<\/a>,\u00a0<a href=\"https:\/\/twitter.com\/gziolo\" rel=\"nofollow noopener\" target=\"_blank\">Greg<\/a>\u00a0and contributors, and other WordPress community members like\u00a0<a href=\"https:\/\/twitter.com\/zgordon\" rel=\"nofollow noopener\" target=\"_blank\">Zac<\/a>\u00a0for his\u00a0<a href=\"https:\/\/ahmda.ws\/ZacGutenbergCourse\" rel=\"nofollow noopener\" target=\"_blank\">course on Gutenberg<\/a>, and also my friend\u00a0<a href=\"https:\/\/twitter.com\/mor10\" rel=\"nofollow noopener\" target=\"_blank\">Morten<\/a>\u00a0for all the #Guten-motivation,\u00a0<a href=\"https:\/\/icons8.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Icons8<\/a>\u00a0for the awesome icons,\u00a0<a href=\"https:\/\/twitter.com\/MaedahBatool\/\" rel=\"nofollow noopener\" target=\"_blank\">Maedah<\/a>\u00a0for managing this project, and to everyone I forgot.<\/p>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3767 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list.png\" alt=\"\" width=\"100\" height=\"100\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list.png 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-64x64.png 64w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-todo_list-96x96.png 96w\" sizes=\"(max-width: 100px) 100vw, 100px\"><\/a><\/p>\n<h2>What\u2019s Next?<\/h2>\n<p>Yes, that\u2019s 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\u00a0<code>2.0.0<\/code>\u00a0for that not only do I need your\u00a0<a href=\"https:\/\/ahmadawais.com\/contact\/\" target=\"_blank\" rel=\"noopener\">support<\/a>, I ask that you hop on board and contribute \u2014 that\u2019s the only way forward.<\/p>\n<p>I have created a GitHub issue with the title of\u00a0\ud83d\ude80\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/11\" rel=\"nofollow noopener\" target=\"_blank\">Creat Guten Block 2.0 Goals + Call for Contributors<\/a>! In there I have listed a rough roadmap to version\u00a0<code>2.0.0<\/code>.<\/p>\n<p>Goals listed below \u2014 without any order of priority:<\/p>\n<ul>\n<li>\ud83c\udf96\u00a0At the time of writing,\u00a0<code>create-guten-block<\/code>\u00a0and sister scripts have received 3,000+ downloads<\/li>\n<li>\ud83d\udcaf\u00a0Get folks on React, Webpack, and Babel teams to review the configurations for best possible results<\/li>\n<li>\u26a1\ufe0f\u00a0Go beyond React \u2014 with Preact, Inferno, Marko, Angular, Vue, etc.\u00a0JavaScript frameworks<\/li>\n<li>\ud83d\udcd6\u00a0More examples need to be documented. Especially a Multi-block example which is easy<\/li>\n<li>\ud83d\udd30\u00a0Babel 7, Webpack 4, upgrades to follow in the next major version of create-guten-block<\/li>\n<li>\ud83d\udea7\u00a0ESLint integration needs a refresher \u2014 ESLint + Prettier setup is already WIP<\/li>\n<li>\u26d3\u00a0Refactor code into small modules and maybe make small npm packages<\/li>\n<li>\ud83d\udcd1\u00a0Improve inline documentation throughout the codebase<\/li>\n<li>\ud83d\udc8e\u00a0Build more\u00a0<code>cgb-dev-utils<\/code>\u00a0\u2014 separation of concerns<\/li>\n<li>\ud83d\udce4\u00a0Possible integrations: Service Workers from Google<\/li>\n<li>\ud83d\udce3\u00a0Possible integrations: Progressive Web Apps<\/li>\n<li>\ud83d\udc7b\u00a0<code>.env<\/code>\u00a0file limited set of customizations<\/li>\n<li>\ud83e\udd13\u00a0Allow custom forks of\u00a0<code>cgb-scripts<\/code><\/li>\n<li>\ud83d\udee0\u00a0Improve the entire Webpack defaults<\/li>\n<li>\ud83d\uddc3\u00a0Webpack file handling done right<\/li>\n<li>\ud83d\udcf9\u00a0Webpack image optimization<\/li>\n<li>\ud83d\udc79\u00a0Webpack Uglify ES6 plugin<\/li>\n<li>\u2699\u00a0Webpack + BrowserSync<\/li>\n<li>\ud83d\udd30\u00a0Multi Block Examples<\/li>\n<li>\ud83d\udca0\u00a0Automated test suit<\/li>\n<li>\ud83e\udd14\u00a0Other stuff? #Suggest<\/li>\n<li>\ud83d\ude4c\u00a0PR\u2019s welcomed<\/li>\n<\/ul>\n<p>What do you say? Comment below. And make sure you\u2019ve stargazed\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\" rel=\"nofollow noopener\" target=\"_blank\">\ud83c\udf1f\u00a0the GitHub repo for updates<\/a>!<\/p>\n<p style=\"text-align: center;\"><div class=\"eckosc eckosc_contrast_block\"><div class=\"eckosc_contrast_block_inner\">\n<p style=\"text-align: center;\">\ud83d\ude4c<\/p>\n<p style=\"text-align: center;\">Building\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>\u00a0was a lot of work. It\u2019s easily one of the best software I\u2019ve written and I have exciting improvements coming.<\/p>\n<p style=\"text-align: center;\">\ud83d\udd25\u00a0It would mean the world to me if you\u00a0<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\/\/AhmdA.ws\/CreateGutenBlock_%20%20%0A\" rel=\"nofollow noopener\" target=\"_blank\">Tweet about it<\/a>, try it out, and contribute.<\/p>\n<p style=\"text-align: center;\"><\/div><\/div>\n<p style=\"text-align: center;\">Peace! \u270c\ufe0f<\/p>\n<p>Feel free to reach out and say\u00a0\ud83d\udc4b\u00a0on Twitter\u00a0<a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\">@MrAhmadAwais<\/a><\/p>\n<hr \/>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-3771 alignnone\" src=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it.png\" alt=\"\" width=\"100\" height=\"100\" srcset=\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it.png 100w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-65x65.png 65w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-76x76.png 76w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-50x50.png 50w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-32x32.png 32w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-64x64.png 64w, https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/icons8-like_it-96x96.png 96w\" sizes=\"(max-width: 100px) 100vw, 100px\"><\/a><\/p>\n<h2>UPDATES<\/h2>\n<ul>\n<li>\ud83d\ude80\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>\u00a0has gone viral 100+\u00a0<a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/stargazers\" rel=\"nofollow noopener\" target=\"_blank\">stargazers on GitHub<\/a><\/li>\n<li>\ud83d\ude4c\u00a0Woot! Woot! The\u00a0<a href=\"http:\/\/on.ahmda.ws\/oytg\" rel=\"nofollow noopener\" target=\"_blank\">project is trending<\/a>\u00a0on GitHub\u00a0JavaScript repos today<\/li>\n<li>\ud83d\ude07\u00a0Humbled to be listed as a\u00a0<a href=\"http:\/\/on.ahmda.ws\/oz9O\" rel=\"nofollow noopener\" target=\"_blank\">trending developer on GitHub<\/a>\u00a0today \u2014 this is crazy!<\/li>\n<li>\ud83d\udd25\u00a0Holly Molly \u2014\u00a0<code><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">create-guten-block<\/a><\/code>\u00a0is now\u00a0<a href=\"http:\/\/on.ahmda.ws\/oy9x\" rel=\"nofollow noopener\" target=\"_blank\">trending in all languages<\/a>\u00a0overall on GitHub!<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf89\u00a0Excited to release the\u00a0create-guten-block\u00a0toolkit today. In this post, I am going to share what is\u00a0create-guten-block\u00a0(cgb), what is the motivation &#038; 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.<\/p>\n","protected":false},"author":2,"featured_media":3790,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[6],"tags":[93,28,7],"coauthors":[92],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2018\/01\/logo-no-text-wallpaper.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/3655"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=3655"}],"version-history":[{"count":5,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/3655\/revisions"}],"predecessor-version":[{"id":3815,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/3655\/revisions\/3815"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/3790"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=3655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=3655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=3655"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=3655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}