{"id":1329,"date":"2017-07-27T11:58:54","date_gmt":"2017-07-27T06:58:54","guid":{"rendered":"https:\/\/thedevcouple.com\/?p=1329"},"modified":"2017-12-07T13:37:18","modified_gmt":"2017-12-07T08:37:18","slug":"build-custom-block-gutenberg-wordpress-editor","status":"publish","type":"post","link":"https:\/\/thedevcouple.com\/build-custom-block-gutenberg-wordpress-editor\/","title":{"rendered":"How to Build a Custom Block for Gutenberg WordPress Editor?"},"content":{"rendered":"<p>Gutenberg is all that you hear about nowadays. Plugin developers want to understand how to build custom blocks for the new Gutenberg editor in WordPress.<\/p>\n<p>For that purpose, I wrote a boilerplate which is heavily documented and will help you kick-start with developing custom blocks, built in ReactJS, ESNext, with Webpack, etc.<\/p>\n<p>I also wrote an introductory article \u2192\u00a0<a href=\"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/\" target=\"_blank\" rel=\"noopener\">Introducing Gutenberg Boilerplate For Third Party Custom Blocks<\/a>!<\/p>\n<blockquote><p>\ud83d\ude80 <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" rel=\"nofollow noopener\" target=\"_blank\">GITHUB: \u2605 772 \u2442 87 \u2192<\/a><\/p><\/blockquote>\n<blockquote>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/307\" rel=\"nofollow noopener\" target=\"_blank\">Archived and looking for active maintainers<\/a>. Check out <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-create-block\/\" rel=\"nofollow noopener\" target=\"_blank\"><code>@wordpress\/create-block<\/code><\/a>.<\/p>\n<\/blockquote>\n<h4 align=\"center\">\n    <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">\n        <img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/cgb.png\" alt=\"create-guten-block\" \/>\n    <\/a><br><br><br><a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">\n        <img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/cgblogo.png\" alt=\"create-guten-block\" \/>\n    <\/a><br><br>\n\n`create-guten-block` is _zero configuration dev-toolkit_ (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring `React`, `webpack`, `ES6\/7\/8\/Next`, `ESLint`, `Babel`, etc.\n\n[![DOWNLOADS](https:\/\/img.shields.io\/npm\/dt\/create-guten-block?label=DOWNLOADS%20%20%E2%9D%AF&colorA=216AFF&colorB=216AFF&style=flat)](https:\/\/www.npmjs.com\/package\/create-guten-block) [![Learn Node.js CLI Automation](https:\/\/img.shields.io\/badge\/-NodeCLI.com%20%E2%86%92-gray.svg?colorB=216AFF&style=flat)](https:\/\/nodecli.com\/?utm_source=GitHubFOSS) [![Follow @MrAhmadAwais on Twitter](https:\/\/img.shields.io\/badge\/FOLLOW%20@MRAHMADAWAIS%20%E2%86%92-gray.svg?colorA=216AFF&colorB=216AFF&style=flat)](https:\/\/twitter.com\/mrahmadawais\/)\n\n<\/h4>\n<p><br><\/p>\n\n<blockquote>\n<p><code>create-guten-block<\/code> is <em>zero configuration dev-toolkit<\/em> (#0CJS) to develop WordPress Gutenberg blocks in a matter of minutes without configuring <code>React<\/code>, <code>webpack<\/code>, <code>ES6\/7\/8\/Next<\/code>, <code>ESLint<\/code>, <code>Babel<\/code>, etc.<\/p>\n<\/blockquote>\n<p>Create Guten Block is not like other <a href=\"https:\/\/github.com\/ahmadawais\/wpgulp\" rel=\"nofollow noopener\" target=\"_blank\">starter-kits<\/a> or <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-boilerplate\" rel=\"nofollow noopener\" target=\"_blank\">boilerplates<\/a>. It's a developer's toolbox which is continuously updated. Since it has zero-configuration, you can always update it without any changes in your code.<\/p>\n<p><code>create-guten-block<\/code> is:<\/p>\n<ul>\n<li>\ud83e\udd5e Versioned \u2713<\/li>\n<li>\ud83e\udd20 Updatable \u2713<\/li>\n<li>\ud83d\uddc3 Set of sane-defaults \u2713<\/li>\n<li>\ud83d\udc0e ONE single <code>cgb-scripts<\/code> dependency \u2713<\/li>\n<li>\ud83d\udcaf <a href=\"plugins.md\">100s of WordPress plugins built with <code>create-guten-block<\/code><\/a> \u2713<\/li>\n<\/ul>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/rocket.png\" alt=\"Start\" \/><\/a><\/p>\n<h2>GETTING STARTED!<\/h2>\n<p>Let's create a WordPress block plugin...<\/p>\n<h4>\u26a1\ufe0f Quick Overview<\/h4>\n<p>Run step <code>#1<\/code> and <code>#2<\/code> quickly in one go \u2014 Run inside local WP install   E.g. <code>\/wp.local\/wp-content\/plugins\/<\/code> directory.<\/p>\n<pre><code class=\"language-sh\">npx create-guten-block my-block\ncd my-block\nnpm start<\/code><\/pre>\n<p>(<a href=\"https:\/\/medium.com\/@maybekatz\/introducing-npx-an-npm-package-runner-55f7d4bd282b\" rel=\"nofollow noopener\" target=\"_blank\">npx<\/a> comes with npm 5.2+ and higher, see <a href=\"https:\/\/gist.github.com\/ahmadawais\/e4c69b22561c7079c9d99faba90e3b23\" rel=\"nofollow noopener\" target=\"_blank\">instructions for older npm versions<\/a>)<\/p>\n<blockquote>\n<p>\ud83c\udf9b   <em>If you want to study the detailed installation of step <code>#1<\/code> and <code>#2<\/code> \u2014 then take a look at the steps below<\/em>.<\/p>\n<\/blockquote>\n<details>\n <summary><strong> STEP #0<\/strong> \u2014 Don't have <code>Node.js<\/code> + <code>npm<\/code> installed? Read this. (CLICK TO EXPAND!)<\/summary>\n\nIn case you are an absolute beginner to the world of `Node.js`, JavaScript, and `npm` packages \u2014 all you need to do is go to the Node's site [download + install](https:\/\/nodejs.org\/en\/download\/) Node on your system. This will install both `Node.js` and `npm`, i.e., node package manager \u2014 the command line interface of Node.js.\n\nYou can verify the install by opening your terminal app and typing...\n\n```sh\nnode -v\n# Results into v9.1.0 \u2014 make sure you have Node >= 8 installed.\n\nnpm -v\n# Results into 5.6.0 \u2014 make sure you have npm >= 5.3 installed.\n```\n\n<\/details>\n<h3>\u2192 STEP #1<\/h3>\n<p>All you have to do is run the following command and it will create a WordPress block plugin. It's done by installing and running the <code>create-guten-block<\/code> command and providing it with a unique name for a WordPress plugin that will get created.<\/p>\n<blockquote>\n<p>\u26a0\ufe0f Make sure run this command in your local WordPress install's plugins folder i.e. <code>\/local_dev_site.tld\/wp-content\/plugins\/<\/code> folder \u2014 since this command will produce a WordPress plugin that you can go to <code>WP Admin<\/code> \u25b6\ufe0e <code>Plugins<\/code> to activate.<\/p>\n<\/blockquote>\n<pre><code class=\"language-sh\">npx create-guten-block my-block<\/code><\/pre>\n<p>(<a href=\"https:\/\/medium.com\/@maybekatz\/introducing-npx-an-npm-package-runner-55f7d4bd282b\" rel=\"nofollow noopener\" target=\"_blank\">npx<\/a> comes with npm 5.2+ and higher, see <a href=\"https:\/\/gist.github.com\/ahmadawais\/e4c69b22561c7079c9d99faba90e3b23\" rel=\"nofollow noopener\" target=\"_blank\">instructions for older npm versions<\/a>)<\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/cgb1.gif\" alt=\"npx block\" \/><\/a><\/p>\n<p><em>It'll take a couple of minutes to install.<\/em><\/p>\n<blockquote>\n<p>You\u2019ll need to have Node &gt;= 8 and npm &gt;= 5.3 on your local development machine (but it\u2019s not required on the server). You can use <a href=\"https:\/\/github.com\/creationix\/nvm#installation\" rel=\"nofollow noopener\" target=\"_blank\">nvm<\/a> (macOS\/Linux) or <a href=\"https:\/\/github.com\/coreybutler\/nvm-windows#node-version-manager-nvm-for-windows\" rel=\"nofollow noopener\" target=\"_blank\">nvm-windows<\/a> to easily switch Node versions between different projects.<\/p>\n<\/blockquote>\n<p>It will create a directory called <code>my-block<\/code> inside the current folder.\nInside that directory, it will generate the initial project structure and install the transitive dependencies:<\/p>\n<pre><code class=\"language-sh\">INSIDE: \/local_dev_site.tld\/wp-content\/plugins\/my-block\n\n\u251c\u2500\u2500 .gitignore\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>\u2192 STEP #2<\/h3>\n<p>Once the installation is done, you can open your project folder and run the start script.<\/p>\n<p><em>Let's do that.<\/em><\/p>\n<pre><code class=\"language-sh\">cd my-block\nnpm start<\/code><\/pre>\n<p><em>You can also use <code>yarn start<\/code> if that's your jam<\/em>.<\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/cgb2.gif\" alt=\"cgb-npm-start\" \/><\/a><\/p>\n<p>This runs the plugin in development mode. To produce production code run <code>npm run build<\/code>.\nYou will see the build messages, errors, and lint warnings in the console.<\/p>\n<blockquote>\n<p>And just like that, you'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<\/blockquote>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/workflow.png\" alt=\"More\" \/><\/a><\/p>\n<h3>Workflow!<\/h3>\n<p>There are just three scripts that you can use in your <code>create-guten-block<\/code> workflow. With these three scripts, you can develop, build, and eject your plugin.<\/p>\n<h4>\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>\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>\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's a one-way street, <code>eject<\/code> and you have to maintain everything yourself.<\/li>\n<li>You don'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's about it.<\/em><\/p>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/included.png\" alt=\"included\" \/><\/a><\/p>\n<h2>What\u2019s Included?<\/h2>\n<p>Your 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>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\" rel=\"nofollow noopener\" target=\"_blank\">&quot;eject&quot;<\/a> and customize it, but then you will need to maintain this configuration.<\/p>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/philosophy.png\" alt=\"Philosophy\" \/><\/a><\/p>\n<h2>Philosophy<\/h2>\n<ul>\n<li>\n<p><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.<\/p>\n<\/li>\n<li>\n<p><strong>No Configuration Required:<\/strong> You don'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.<\/p>\n<\/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><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/why.png\" alt=\"Why\" \/><\/a><\/p>\n<h2>Why <code>create-guten-block<\/code>?<\/h2>\n<p>Well, it's really hard to configure things like webpack, React, ES 6\/7\/8\/Next, ESLint, Babel, etc. before you even start writing a Hello World Gutenberg block. Then there's the fact that you have to maintain and constantly update your configuration with all the new tools and growth in the JavaScript community.<\/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><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/tldr.png\" alt=\"tldr\" \/><\/a><\/p>\n<h2>TL;DR<\/h2>\n<blockquote>\n<p>Too long, didn't read? Here's a shorter version.<\/p>\n<\/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>\ud83d\udcc2 <strong>Browse<\/strong>: <code>cd my-block<\/code> \u2014 Open the newly created plugin directory.<\/li>\n<li>\u267b\ufe0f <strong>Run<\/strong>: <code>npm start<\/code> \u2014 For development.<\/li>\n<li>\ud83d\udce6 <strong>Run<\/strong>: <code>npm run build<\/code> \u2014 For production build.<\/li>\n<li>\u23cf <strong>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.\nIf something doesn\u2019t work, kindly file <a href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\/issues\/new\" rel=\"nofollow noopener\" target=\"_blank\">an issue \u2192<\/a><\/p>\n<!-- [![Create-guten-block](https:\/\/on.ahmda.ws\/okiU\/c)](\/) -->\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/update.png\" alt=\"update\" \/><\/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> is a 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 never need to update <code>create-guten-block<\/code> itself as it's run via <a href=\"https:\/\/medium.com\/@maybekatz\/introducing-npx-an-npm-package-runner-55f7d4bd282b\" rel=\"nofollow noopener\" target=\"_blank\"><code>npx<\/code><\/a> and it delegates all the setup to <code>cgb-scripts<\/code>.<\/p>\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>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\" rel=\"nofollow noopener\" target=\"_blank\">changelog<\/a>, find the version you\u2019re currently on (check package.json in your plugin's folder if you\u2019re not sure), and apply the migration instructions for the newer versions.<\/p>\n<p>In most cases bumping the <code>cgb-scripts<\/code> version in 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\" rel=\"nofollow noopener\" target=\"_blank\">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><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/changelog.png\" alt=\"Log\" \/><\/a><\/p>\n<h2>Changelog<\/h2>\n<p>Read what's \ud83d\udce6 new, \ud83d\udc4c improved, \ud83d\udc1b fixed, and  if \ud83d\udcd6 docs got updated.<\/p>\n<p>\ud83d\udc49 Go read the entire changelog at this link \u2014 <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's ever complete, so bear with us while we keep iterating towards a better future.<\/p>\n<blockquote>\n<pre><code class=\"language-html\">'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 ...<\/code><\/pre>\n<p>... <em>listen to \u2192 <a href=\"https:\/\/www.youtube.com\/watch?v=pSQk-4fddDI\" rel=\"nofollow noopener\" target=\"_blank\">A million dreams!<\/a><\/em><\/p>\n<\/blockquote>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/hello.png\" alt=\"Hello\" \/><\/a><\/p>\n<h4><strong>Hello, we're <a href=\"https:\/\/TheDevCouple.com\" rel=\"nofollow noopener\" target=\"_blank\">The Dev Couple<\/a><\/strong>!<\/h4>\n<p>Me (<a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\">Ahmad Awais<\/a>) and my incredible wife (<a href=\"https:\/\/twitter.com\/MaedahBatool\/\" rel=\"nofollow noopener\" target=\"_blank\">Maedah Batool<\/a>) are two engineers who fell in love with open source and then with each other. You can read more <a href=\"https:\/\/ahmadawais.com\/about\" target=\"_blank\" rel=\"noopener\">about me here<\/a>. If you or your company use any of my projects or like what I\u2019m doing then consider backing me. I'm in this for the long run. An open-source developer advocate.<\/p>\n<p><a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/img.shields.io\/twitter\/follow\/mrahmadawais.svg?style=social&amp;label=Follow%20@MrAhmadAwais\" alt=\"Ahmad on Twitter\" \/><\/a><\/p>\n<h3><a href=\"https:\/\/NodeCLI.com?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">NodeCLI.com<\/a> \u2014 Learn to build Node.js CLI Automation<\/h3>\n<blockquote>\n<p>This repository is part of the <a href=\"https:\/\/NodeCLI.com?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">NodeCLI.com<\/a> course.<\/p>\n<\/blockquote>\n<p>After building hundreds of developer automation tools used by millions of developers, I am sharing exactly how you can do it yourself with minimum effective effort. Learn to build Node.js &amp; JavaScript based CLI (Command Line Interface) apps. Automate the grunt work, do more in less time, impress your manager, and help the community.\n\u2192 I'm sharing it all in this online video course. <a href=\"https:\/\/NodeCLI.com?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\">Node CLI Automation\nwithout wasting a 1,000 hours<\/a> \u2192<\/p><\/p>\n<p><a href=\"https:\/\/NodeCLI.com?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/img.shields.io\/badge\/-NodeCLI.com%20%E2%86%92-gray.svg?colorB=488640&amp;style=flat\" alt=\"Node CLI\" \/><\/a><\/p>\n<p><a href=\"https:\/\/github.com\/AhmadAwais\/sponsor\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/sponsor\/sponsor.jpg\" alt=\"Awais on Twitter\" \/><\/a><\/p>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/backers.png\" alt=\"Partners\" \/><\/a><\/p>\n<h3>Project Backers &amp; <a href=\"https:\/\/TheDevCouple.com\/partners\" rel=\"nofollow noopener\" target=\"_blank\">TheDevCouple Partners<\/a> \u26a1\ufe0f<\/h3>\n<p>This FOSS (free and open source software) project is 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.<\/p>\n<p>\u2014 <em>What\/How? <a href=\"https:\/\/TheDevCouple.com\/partners\" rel=\"nofollow noopener\" target=\"_blank\">Read more about it \u2192<\/a><\/em><\/p>\n<table width='100%'>\n    <tr>\n        <td width='500'><a target=\"_blank\" href=\"https:\/\/Awais.dev\/kinsta\" rel=\"nofollow noopener\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/kinsta.png\" alt=\"\"><\/a><\/td>\n        <td width='500'><a target=\"_blank\" href=\"https:\/\/mythemeshop.com\/?utm_source=TheDevCouple&amp;utm_medium=Partner\" rel=\"nofollow noopener\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/mts.png\" alt=\"\"><\/a><\/td>\n    <\/tr>\n\n<\/table>\n<p><br><\/p>\n<p><a href=\"\/\"><img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/fix\/license.png\" alt=\"Thanks\" \/><\/a><\/p>\n<h2>License &amp; Attribution<\/h2>\n<ul>\n<li>MIT \u00a9 <a href=\"https:\/\/twitter.com\/MrAhmadAwais\/\" rel=\"nofollow noopener\" target=\"_blank\">Ahmad Awais<\/a>.<\/li>\n<li><a href=\"code-of-conduct.md\">Code of Conduct<\/a>.<\/li>\n<\/ul>\n<div align=\"left\">\n    <p><a href=\"https:\/\/github.com\/ahmadawais\" rel=\"nofollow noopener\" target=\"_blank\"><img alt=\"GitHub @AhmadAwais\" align=\"center\" src=\"https:\/\/img.shields.io\/badge\/GITHUB-gray.svg?colorB=6cc644&colorA=6cc644&style=flat\" \/><\/a>&nbsp;<small><strong>(follow)<\/strong> TO STAY UP TO DATE ON FREE & OPEN SOURCE SOFTWARE<\/small><\/p>\n    <p><a href=\"https:\/\/twitter.com\/MrAhmadAwais\/\" rel=\"nofollow noopener\" target=\"_blank\"><img alt=\"Twitter @MrAhmadAwais\" align=\"center\" src=\"https:\/\/img.shields.io\/badge\/TWITTER-gray.svg?colorB=1da1f2&colorA=1da1f2&style=flat\" \/><\/a>&nbsp;<small><strong>(follow)<\/strong> TO GET ONE DEV MINUTE DAILY HOT TIPS & TROLLS<\/small><\/p>\n    <p><a href=\"https:\/\/www.youtube.com\/AhmadAwais\" rel=\"nofollow noopener\" target=\"_blank\"><img alt=\"YouTube AhmadAwais\" align=\"center\" src=\"https:\/\/img.shields.io\/badge\/YOUTUBE-gray.svg?colorB=ff0000&colorA=ff0000&style=flat\" \/><\/a>&nbsp;<small><strong>(subscribe)<\/strong> TO TECH TALKS & ONE DEV MINUTE VIDEOS<\/small><\/p>\n    <p><a href=\"https:\/\/AhmadAwais.com\/\" rel=\"nofollow noopener\" target=\"_blank\"><img alt=\"Blog: AhmadAwais.com\" align=\"center\" src=\"https:\/\/img.shields.io\/badge\/MY%20BLOG-gray.svg?colorB=4D2AFF&colorA=4D2AFF&style=flat\" \/><\/a>&nbsp;<small><strong>(read)<\/strong> MOSTLY LONG FORM TECHNICAL ARTICLES<\/small><\/p>\n    <p><a href=\"https:\/\/www.linkedin.com\/in\/MrAhmadAwais\/\" rel=\"nofollow noopener\" target=\"_blank\"><img alt=\"LinkedIn @MrAhmadAwais\" align=\"center\" src=\"https:\/\/img.shields.io\/badge\/LINKEDIN-gray.svg?colorB=0077b5&colorA=0077b5&style=flat\" \/><\/a>&nbsp;<small><strong>(connect)<\/strong> WITH THE LINKEDIN PROFILE Y'ALL<\/small><\/p>\n<\/div>\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 noopener\" target=\"_blank\">Dan Abramov<\/a> for Create React App, <a href=\"https:\/\/twitter.com\/acdlite\" rel=\"nofollow noopener\" target=\"_blank\">Andrew Clark<\/a>, and <a href=\"https:\/\/twitter.com\/vjeux\" rel=\"nofollow noopener\" target=\"_blank\">Christopher Chedeau<\/a>, <a href=\"https:\/\/twitter.com\/sophiebits\" rel=\"nofollow noopener\" target=\"_blank\">Sophie Alpert<\/a> from React.js team, <a href=\"https:\/\/twitter.com\/kentcdodds\" rel=\"nofollow noopener\" target=\"_blank\">Kent C. Dodds<\/a> for his open source evangelism, WordPress Core Contributors, <a href=\"https:\/\/twitter.com\/GaryPendergast\" rel=\"nofollow noopener\" target=\"_blank\">Gary<\/a> for keeping everyone sane, <a href=\"https:\/\/github.com\/wordpress\/gutenberg\" rel=\"nofollow noopener\" target=\"_blank\">Gutenberg<\/a> developers <a href=\"https:\/\/twitter.com\/matias_ventura\" rel=\"nofollow noopener\" target=\"_blank\">Matias<\/a>, <a href=\"https:\/\/github.com\/youknowriad\" rel=\"nofollow noopener\" target=\"_blank\">Riad<\/a>, <a href=\"https:\/\/github.com\/aduth\" rel=\"nofollow noopener\" target=\"_blank\">Andrew<\/a>, <a href=\"https:\/\/twitter.com\/ellaiseulde\" rel=\"nofollow noopener\" target=\"_blank\">Ella<\/a>, <a href=\"https:\/\/github.com\/jasmussen\" rel=\"nofollow noopener\" target=\"_blank\">Joen<\/a>, <a href=\"https:\/\/twitter.com\/karmatosed\" rel=\"nofollow noopener\" target=\"_blank\">Tammie<\/a>, <a href=\"https:\/\/twitter.com\/gziolo\" rel=\"nofollow noopener\" target=\"_blank\">Greg<\/a> and contributors, and other WordPress community members like <a href=\"https:\/\/twitter.com\/zgordon\" rel=\"nofollow noopener\" target=\"_blank\">Zac<\/a> for his <a href=\"https:\/\/ahmda.ws\/ZacGutenbergCourse\" rel=\"nofollow noopener\" target=\"_blank\">course on Gutenberg<\/a>, and also my friend <a href=\"https:\/\/twitter.com\/mor10\" rel=\"nofollow noopener\" target=\"_blank\">Morten<\/a> for all the #Guten-motivation, <a href=\"https:\/\/icons8.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Icons8<\/a> for the awesome icons, <a href=\"https:\/\/twitter.com\/MaedahBatool\/\" rel=\"nofollow noopener\" target=\"_blank\">Maedah<\/a> for managing this project, and to everyone I forgot.<\/p>\n<p><em>Follow me \ud83d\udc4b on Twitter for more updates and questions<\/em> \u2192  <a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/img.shields.io\/twitter\/follow\/mrahmadawais.svg?style=social&amp;label=Tweet%20@MrAhmadAwais\" alt=\"Tweet to say Hi\" \/><\/a><\/p>\n<p><br \/>\n<br \/><\/p>\n<p align=\"center\">\n<strong>For anything else, tweet at <a href=\"https:\/\/twitter.com\/MrAhmadAwais\/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">@MrAhmadAwais<\/a><\/strong>\n<\/p>\n<div align=\"center\">\n    <p>I have released a video course to help you learn how to create projects just like this one. Node.js and JavaScript based automation dev-tools and Command-line CLIs \u2014 <a href=\"https:\/\/NodeCLI.com\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">Learn to build Node.js CLIS \u2192<\/a><\/p>\n    <br \/>\n  <a href=\"https:\/\/NodeCLI.com\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">\n  <img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/stuff\/master\/nodecli\/featured.jpg\" alt=\"\"><br>VSCode<\/a>\n\n  _<small><a href=\"https:\/\/NodeCLI.com\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">Node CLI Automation \u2192<\/a><\/small>_\n<\/div>\n<div align=\"center\">\n    <p>I have released a video course to help you become a better developer \u2014 <a href=\"https:\/\/VSCode.pro\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">Become a VSCode Power User \u2192<\/a><\/p>\n    <br \/>\n  <a href=\"https:\/\/VSCode.pro\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">\n  <img src=\"https:\/\/raw.githubusercontent.com\/ahmadawais\/shades-of-purple-vscode\/master\/images\/vscodeproPlay.jpg\" alt=\"\"><br>VSCode<\/a>\n\n  _<small><a href=\"https:\/\/VSCode.pro\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" target=\"_blank\" rel=\"nofollow noopener\">VSCode Power User Course \u2192<\/a><\/small>_\n<\/div>\n<p><br><\/p>\n<p><a href=\"https:\/\/VSCode.pro\/?utm_source=github&amp;utm_medium=referral&amp;utm_campaign=ahmadawais\/create-guten-block\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/img.shields.io\/badge\/-VSCode.pro%20%E2%86%92-gray.svg?colorB=4D2AFF&amp;style=flat\" alt=\"VSCode\" \/><\/a>\n<a href=\"https:\/\/twitter.com\/mrahmadawais\/\" rel=\"nofollow noopener\" target=\"_blank\"><img src=\"https:\/\/img.shields.io\/twitter\/follow\/mrahmadawais.svg?style=social&amp;label=Follow%20@MrAhmadAwais\" alt=\"Ahmad on Twitter\" \/><\/a><\/p>\n<p>It&#8217;s free and open source. Issues\/PR&#8217;s are welcomed on GitHub.\u00a0Let me know what you think about this \ud83d\ude42<\/p>\n<blockquote><p>\ud83d\ude80 <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" rel=\"nofollow noopener\" target=\"_blank\">GITHUB: \u2605 772 \u2442 87 \u2192<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to build custom Gutenberg WordPress editor blocks for your themes and plugins. A boilerplate which is heavily documented and will help you kick-start with extending Gutenberg with ReactJS, ESNext, with Webpack, etc.\u00a0<\/p>\n","protected":false},"author":1,"featured_media":1330,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[6],"tags":[28],"coauthors":[84],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/07\/gb3.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1329"}],"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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=1329"}],"version-history":[{"count":1,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1329\/revisions"}],"predecessor-version":[{"id":3442,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1329\/revisions\/3442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/1330"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=1329"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=1329"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=1329"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=1329"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}