{"id":2470,"date":"2017-07-15T12:29:09","date_gmt":"2017-07-15T07:29:09","guid":{"rendered":"https:\/\/ahmadawais.com\/?p=2470"},"modified":"2023-08-16T05:49:25","modified_gmt":"2023-08-16T12:49:25","slug":"gutenberg-boilerplate","status":"publish","type":"post","link":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/","title":{"rendered":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!"},"content":{"rendered":"<div class=\"alert red\">\u26a0\ufe0fGutenberg Boilerplate has been deprecated in favor of create-guten-block. Go ahead \ud83c\udf1f and use <span style=\"color: #ffffff;\"><a style=\"color: #ffffff;\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block \u2192<\/a><\/span><\/div>\n<p>I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It&#8217;s heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.<\/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><\/p><\/blockquote>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h2 id=\"%e2%9a%a1%ef%b8%8f-gutenberg\">\u26a1\ufe0f Gutenberg<a href=\"#%e2%9a%a1%ef%b8%8f-gutenberg\" class=\"heading-link\">#<\/a><\/h2>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>Gutenberg is all that you hear about in the WordPress community nowadays. Everyone is writing articles on how they feel about Gutenberg. I was one of the early adopters and contributors in the Gutenberg project.<\/p>\n<p>I have had been writing about it (<a href=\"https:\/\/torquemag.io\/2017\/03\/improve-the-wordpress-editor-by-contributing-to-the-gutenberg-project\/\" target=\"_blank\" rel=\"noopener\">invitation to contribute<\/a>) and covering the <a href=\"https:\/\/make.wordpress.org\/design\/2017\/02\/16\/core-editor-meeting-notes-2017-02-15\/\" target=\"_blank\" rel=\"noopener\">meeting notes<\/a> for the project. When folks started writing about Gutenberg I wanted to do the same, but I was on vacations, visiting my parents, and enjoying Eid holidays. But that&#8217;s not all; I stopped myself from writing anything because I have been a bit confused.<\/p>\n<p>I am still making up my mind with how Gutenberg will fit in the WordPress core. There are so many things which are both good and bad about it. So, instead of ranting about it, I wanted to do something more productive. And I went ahead, studied the source code, received a lot of help from Gutenberg contributors (Matias Ventura, James Nylen, Riad Benguella, Andrew Duthie, Joen, etc.) to finally build a Gutenberg Boilerplate project.<\/p>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%a4%94-my-thoughts-about-gutenberg\">\ud83e\udd14 My Thoughts about Gutenberg!<a href=\"#%f0%9f%a4%94-my-thoughts-about-gutenberg\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>After being a contributor to the project and having tried to build this Gutenberg boilerplate I have been able to read through almost 80% of the code base. While Gutenberg is changing at a fast pace (five <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/releases\" target=\"_blank\" rel=\"noopener\">releases<\/a> in the last 29 days) there are things about this project that are not going to change!<\/p>\n<p>Here&#8217;s what I think about Gutenberg (v0.5.0)<\/p>\n<p><strong>\u2714\ufe0f PRO&#8217;s<\/strong>: The Concept of a Block<\/p>\n<ul>\n<li><strong>Gutenberg is a neat initiative.<\/strong> The editor needs to be improved.<\/li>\n<li>Blocks are way better than those <em>dayum<\/em> shortcodes!<\/li>\n<\/ul>\n<p><strong>\u274c CON&#8217;s<\/strong>: The Concept of a Block<\/p>\n<ul>\n<li>Not sure if we are trying to <strong>reinvent the wheel maybe as a block<\/strong>? Does <em>EVERYthing<\/em> fit in a block?<\/li>\n<\/ul>\n<p><strong>\u2714\ufe0f PRO&#8217;s<\/strong>: ReactJS, ESNext, Webpack<\/p>\n<ul>\n<li><strong>Using a cutting edge language like ReactJS<\/strong> definitely, means that we are fighting the tech-debt with WordPress and that it&#8217;s a beginning of new things.<\/li>\n<li>Imagine if both ReactJS and the WP REST API are in the core.<\/li>\n<li><span style=\"line-height: inherit;\">We could improve a lot of things that way. <\/span><a style=\"line-height: inherit;\" href=\"https:\/\/twitter.com\/rmccue\" target=\"_blank\" rel=\"noopener\">Ryan<\/a><span style=\"line-height: inherit;\"> already has a proof of concept with <\/span><a style=\"line-height: inherit;\" href=\"https:\/\/github.com\/WP-API\/new-list-tables\" target=\"_blank\" rel=\"noopener\">new list tables based on ReactJS and REST API<\/a><span style=\"line-height: inherit;\">.<\/span><\/li>\n<\/ul>\n<p><strong>\u274c CON&#8217;s<\/strong>: ReactJS, ESNext, Webpack<\/p>\n<ul>\n<li><strong>WordPress is not easy anymore.<\/strong><\/li>\n<li>Well, scratch that. <strong>WordPress development just became very complicated <\/strong>with the Gutenberg project.<\/li>\n<li>There are a lot of things that should be decided by more than a few developers who know <strong>ReactJS, ESNext, Webpack, and modern tooling<\/strong>.<\/li>\n<li>The fact is, there aren&#8217;t many <em>who know the ropes <\/em>around here. Let alone interested in contributing to this project. Which leaves us with scary conclusions?<\/li>\n<\/ul>\n<p><strong>\u2714\ufe0f PRO&#8217;s<\/strong>: NPM Packages<\/p>\n<ul>\n<li>We can start using <strong>NPM packages<\/strong> for WordPress development now.<\/li>\n<li>As a developer who writes NodeJS code off and on, it can be a possible step to improve my NodeJS skills once in for all.<\/li>\n<\/ul>\n<p><strong>\u274c CON&#8217;s<\/strong>: NPM Packages<\/p>\n<ul>\n<li>When using NPM Packages, who and how do we decide which package should be utilized?<\/li>\n<li>Do we have ReactJS\/NodeJS coding standards?<\/li>\n<li>It&#8217;s way too hard for a beginner developer to understand let alone write this kind of code.<\/li>\n<\/ul>\n<h3 id=\"%f0%9f%99%84-concern-the-dependency-hell\">\ud83d\ude44 CONCERN: The Dependency Hell<a href=\"#%f0%9f%99%84-concern-the-dependency-hell\" class=\"heading-link\">#<\/a><\/h3>\n<p>With the inclusion of ReactJS, Webpack, ESNext, and NPM packages into the development of WordPress core and obviously for third party plugins there is a huge concern of what they call <strong>The Dependency Hell\u2122<\/strong>.<\/p>\n<\/section>\n<div class=\"postcontents full\"> <a href=\"https:\/\/gist.github.com\/ahmadawais\/798ff6a45cb4402f5a627e237cbaa9f9\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2575\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47.png\" alt=\"Screenshot 2017-07-15 07.45.47.png\" width=\"1140\" height=\"120\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47.png 1140w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-300x32.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-768x81.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-1024x108.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-860x91.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-680x72.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-400x42.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/Screenshot-2017-07-15-07.45.47-50x5.png 50w\" sizes=\"auto, (max-width: 1140px) 100vw, 1140px\" \/><\/a><\/p>\n<\/div>\n<section class=\"postcontents wrapper\">\n<ul>\n<li><strong>The Cost of (63+671) Modules<\/strong>: All these dependencies cause problems! There are 63 NPM modules with 671 children module dependencies which are 106 MB in size. I&#8217;ve put the detailed info in a <a href=\"https:\/\/gist.github.com\/ahmadawais\/798ff6a45cb4402f5a627e237cbaa9f9\" target=\"_blank\" rel=\"noopener\">gist for the geeks<\/a>.<\/li>\n<li><strong>API Concerns<\/strong>: The API being built over these dependencies can have a lot of problems at scale! WordPress is a public facing software after all. It&#8217;s not a SaaS managed by a team of pro developers.<\/li>\n<li>Looks like there are <strong>98 modules from<\/strong> <a href=\"https:\/\/github.com\/sindresorhus\/\" target=\"_blank\" rel=\"noopener\">Sindre Sorhus<\/a> \u2014 while he&#8217;s a good friend and an awesome developer. The concern here is dependency!<\/li>\n<\/ul>\n<\/section>\n<div class=\"postcontents full\"> <a href=\"https:\/\/codepen.io\/ahmadawais\/full\/yXwxbX\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2580\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check.png\" alt=\"license-check.png\" width=\"2848\" height=\"1404\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check.png 2848w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-300x148.png 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-768x379.png 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-1024x505.png 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-1680x828.png 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-860x424.png 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-680x335.png 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-400x197.png 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/license-check-50x25.png 50w\" sizes=\"auto, (max-width: 2848px) 100vw, 2848px\" \/><\/a> <\/div>\n<section class=\"postcontents wrapper\">\n<ul>\n<li><strong><a href=\"https:\/\/codepen.io\/ahmadawais\/full\/yXwxbX\/\" target=\"_blank\" rel=\"noopener\">License Paradox<\/a><\/strong>: There is also the issue of GPL compatible licenses. I did a cursory scan of modules to build a <a href=\"https:\/\/codepen.io\/ahmadawais\/full\/yXwxbX\/\" target=\"_blank\" rel=\"noopener\">license list<\/a> at Codepen for the Gutenberg editor project at version 0.5.0.<\/li>\n<li>I am not a lawyer, so, I&#8217;ll just raise a valid concern here <em><strong>\u2014 Are these licenses GPL compatible? Will all the sub module licenses by GPL compatible? What are we doing to make sure of that?<\/strong><\/em><\/li>\n<\/ul>\n<p>I have more to say, but I&#8217;ll stop here! Let&#8217;s be more productive and build something!<\/p>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%93%a6-gutenberg-boilerplate\">\ud83d\udce6 <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate<\/a><a href=\"#%f0%9f%93%a6-gutenberg-boilerplate\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate<\/a> is a WordPress plugin that demonstrates how you can develop custom Gutenberg blocks both with and without a build process.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2608\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb.jpg\" alt=\"Gutenberg-boilerplate\" width=\"1920\" height=\"1086\" srcset=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb.jpg 1920w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-300x170.jpg 300w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-768x434.jpg 768w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-1024x579.jpg 1024w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-1680x950.jpg 1680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-860x486.jpg 860w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-680x385.jpg 680w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-400x226.jpg 400w, https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb-50x28.jpg 50w\" sizes=\"auto, (max-width: 1920px) 100vw, 1920px\" \/><\/p>\n<blockquote><p><strong>\ud83c\udf1f IMPORTANT<\/strong>:<\/p>\n<p>Before we dive in \u2014 I recommend you<em><strong> <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" target=\"_blank\" rel=\"noopener\">star the GitHub repository<\/a><\/strong> <\/em>for Gutenberg Boilerplate. To show support and to keep up with the updates \u2014 with time this article may become outdated but not the repository!<\/p><\/blockquote>\n<h3 id=\"%e2%9a%a1%ef%b8%8f-getting-started\">\u26a1\ufe0f Getting Started<a href=\"#%e2%9a%a1%ef%b8%8f-getting-started\" class=\"heading-link\">#<\/a><\/h3>\n<p><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate<\/a> is a WordPress plugin. So, go ahead, install the <a href=\"https:\/\/wordpress.org\/plugins\/gutenberg\/\" target=\"_blank\" rel=\"noopener\">Gutenberg<\/a> WP plugin and then download and install <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/archive\/master.zip\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate ZIP<\/a>. Below you&#8217;ll find the information about these blocks, and their <code>block.js<\/code> files, while other files \u2014 I expect you to read them on your own.<\/p>\n<h3 id=\"%e2%9a%a1%ef%b8%8f-what-can-you-learn\">\u26a1\ufe0f What Can You Learn?<a href=\"#%e2%9a%a1%ef%b8%8f-what-can-you-learn\" class=\"heading-link\">#<\/a><\/h3>\n<p>You can learn to build four different kinds of custom Gutenberg blocks at the time of release. These blocks are explained below:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/01-basic\" target=\"_blank\" rel=\"noopener\">Build a Custom Gutenberg Block<\/a><br \/>\n\u2014 with custom CSS for editor and frontend.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/02-basic-esnext\" target=\"_blank\" rel=\"noopener\">Build a Custom Gutenberg Block<\/a><br \/>\n\u2014 with <code>ES6<\/code> or <code>ESNext<\/code> and a <code>Webpack<\/code> build process.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/03-block-editable\" target=\"_blank\" rel=\"noopener\">Build a Custom Gutenberg Block<\/a><br \/>\n\u2014 with <code>editable<\/code> content.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/04-tweet\" target=\"_blank\" rel=\"noopener\">Build a Custom Gutenberg Block<\/a><br \/>\n\u2014 to click Tweet the contents of that block.<\/li>\n<\/ul>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%93%a6-block-01-basic-custom-gutenberg-block\">\ud83d\udce6 Block #01: <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/01-basic\" target=\"_blank\" rel=\"noopener\">Basic Custom Gutenberg Block<\/a><a href=\"#%f0%9f%93%a6-block-01-basic-custom-gutenberg-block\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>This is basically a <code>Hello World<\/code> example of building a custom block. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2611\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/1-gb.gif\" alt=\"Gutenberg Custom Block\" width=\"703\" height=\"434\" \/> It has the following file structure:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/01-basic\/block.js\" target=\"_blank\" rel=\"noopener\"><code>block.js<\/code><\/a> \u2014 We register Custom Gutenberg block here.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/01-basic\/editor.css\" target=\"_blank\" rel=\"noopener\"><code>editor.css<\/code><\/a> _ Block CSS for the editor.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/01-basic\/style.css\" target=\"_blank\" rel=\"noopener\"><code>style.css<\/code><\/a> \u2014 Block CSS for the front end.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/01-basic\/index.php\" target=\"_blank\" rel=\"noopener\"><code>index.php<\/code><\/a> \u2014 Enqueue block&#8217;s assets for the editor and the front end.<\/li>\n<\/ul>\n<p>Here&#8217;s how the <code>block.js<\/code> file looks. The inline documentation should be enough for you to understand what&#8217;s going on in there.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc.js?file=block.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc\">Gist<\/a>.<\/noscript><\/div>\n<p>And here&#8217;s the <code>index.php<\/code> file where we enqueue assets.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc.js?file=index.php\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc\">Gist<\/a>.<\/noscript><\/div>\n<p>Guess you can figure out how the CSS files would look like. Anywho, here it is.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc.js?file=editor.css\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/1b61fdaaf292e8d6590b17491a4007bc\">Gist<\/a>.<\/noscript><\/div>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%93%a6-block-02-basic-custom-block-with-esnext\">\ud83d\udce6 Block #02: <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/02-basic-esnext\" target=\"_blank\" rel=\"noopener\">Basic Custom Block With ESNext<\/a><a href=\"#%f0%9f%93%a6-block-02-basic-custom-block-with-esnext\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>This is basically a <code>Hello World<\/code> example of building a custom block with a build process and using ESNext, Webpack, Babel, etc.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2612\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/2-gb.gif\" alt=\"Gutenberg Custom Block\" width=\"696\" height=\"443\" \/><\/p>\n<p>It has the following file structure:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/block.js\" target=\"_blank\" rel=\"noopener\"><code>block.js<\/code><\/a> \u2014 We register Custom Gutenberg block here.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/block.build.js\" target=\"_blank\" rel=\"noopener\"><code>block.build.js<\/code><\/a> \u2014 Built file from <code>block.js<\/code> via NPM Script and Webpack.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/editor.css\" target=\"_blank\" rel=\"noopener\"><code>editor.css<\/code><\/a> _ Block CSS for the editor.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/style.css\" target=\"_blank\" rel=\"noopener\"><code>style.css<\/code><\/a> \u2014 Block CSS for the front end.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/index.php\" target=\"_blank\" rel=\"noopener\"><code>index.php<\/code><\/a> \u2014 Enqueue block&#8217;s assets for the editor and the front end.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/.babelrc\" target=\"_blank\" rel=\"noopener\"><code>.babelrc<\/code><\/a> \u2014 Babel custom configuration.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/.gitignore\" target=\"_blank\" rel=\"noopener\"><code>.gitignore<\/code><\/a> \u2014 Gitignore file to ignore node_modules and such other files.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/package.json\" target=\"_blank\" rel=\"noopener\"><code>package.json<\/code><\/a> &amp; <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/package-lock.json\" target=\"_blank\" rel=\"noopener\"><code>package-lock.json<\/code><\/a> \u2014 NPM related file for holding NPM related metadata and <code>build<\/code>\/<code>dev<\/code> NPM scripts.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/webpack.config.js\" target=\"_blank\" rel=\"noopener\"><code>webpack.config.js<\/code><\/a> \u2014 Webpack configuration file.<\/li>\n<\/ul>\n<p>Here&#8217;s the <code>block.js<\/code> filewritten in ESNext.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/b38f89e1476dd88be0eaf9aadf542711.js?file=block.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/b38f89e1476dd88be0eaf9aadf542711\">Gist<\/a>.<\/noscript><\/div>\n<h4 id=\"%e2%86%a3-the-build-process\">\u21a3 The Build Process<a href=\"#%e2%86%a3-the-build-process\" class=\"heading-link\">#<\/a><\/h4>\n<p>Read the files explained above. All of the files are heavily inline documented. All you have to do is following:<\/p>\n<ul>\n<li>Open up your favorite terminal app.<\/li>\n<li>Makes sure <a href=\"https:\/\/nodejs.org\/\" target=\"_blank\" rel=\"noopener\">NodeJS and NPM<\/a> are installed by running <code>node -v<\/code> or <code>npm -v<\/code> to check their versions.<\/li>\n<li>Access this directory <code>cd \/path\/to\/gutenberg-boilerplate\/block\/02-basic-esnext\/<\/code><\/li>\n<li>Install node dependencies by running <code>node install<\/code> or <code>sudo node install<\/code><\/li>\n<li>For building the <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/block.js\" target=\"_blank\" rel=\"noopener\"><code>block.js<\/code><\/a>fileinto <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/02-basic-esnext\/block.build.js\" target=\"_blank\" rel=\"noopener\"><code>block.build.js<\/code><\/a> you can use run npm scripts.<\/li>\n<li>To watch and build run <code>npm run dev<\/code><\/li>\n<li>To build for production run <code>npm run build<\/code><\/li>\n<\/ul>\n<p>Build process starts with the <code>package.json<\/code> file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/b38f89e1476dd88be0eaf9aadf542711.js?file=package.json\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/b38f89e1476dd88be0eaf9aadf542711\">Gist<\/a>.<\/noscript><\/div>\n<p>I have also written a very basic Webpack configuration. It&#8217;s explained inside the <code>Webpack.congif.js<\/code> file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/bf8374df57544fe76bbb6f97d2524e64.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/bf8374df57544fe76bbb6f97d2524e64\">Gist<\/a>.<\/noscript><\/div>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%93%a6block-03-editable-custom-gutenberg-block\">\ud83d\udce6Block #03: <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/03-block-editable\" target=\"_blank\" rel=\"noopener\">Editable Custom Gutenberg Block<\/a><a href=\"#%f0%9f%93%a6block-03-editable-custom-gutenberg-block\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>This is a basic <code>Editable<\/code> custom Gutenberg block.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2613\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/3-gb.gif\" alt=\"Gutenberg Custom Block\" width=\"800\" height=\"588\" \/><\/p>\n<p>It has the following file structure:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/03-block-editable\/block.js\" target=\"_blank\" rel=\"noopener\"><code>block.js<\/code><\/a> \u2014 We register Custom Gutenberg block here.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/03-block-editable\/editor.css\" target=\"_blank\" rel=\"noopener\"><code>editor.css<\/code><\/a> _ Block CSS for the editor.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/03-block-editable\/style.css\" target=\"_blank\" rel=\"noopener\"><code>style.css<\/code><\/a> \u2014 Block CSS for the front end.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/03-block-editable\/index.php\" target=\"_blank\" rel=\"noopener\"><code>index.php<\/code><\/a> \u2014 Enqueue block&#8217;s assets for the editor and the front end.<\/li>\n<\/ul>\n<p>Again, here&#8217;s the <code>block.js<\/code> file.<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/f64e98440a6a5d189f5a342ba50ccc5f.js?file=block.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/f64e98440a6a5d189f5a342ba50ccc5f\">Gist<\/a>.<\/noscript><\/div>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h3 id=\"%f0%9f%93%a6block-04-tweet-gutenberg-block\">\ud83d\udce6Block #04: <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/tree\/master\/block\/04-tweet\" target=\"_blank\" rel=\"noopener\">Tweet Gutenberg Block<\/a><a href=\"#%f0%9f%93%a6block-04-tweet-gutenberg-block\" class=\"heading-link\">#<\/a><\/h3>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>Fancy building a custom block to tweet content written inside it? Maybe you have already built a shortcode like this one before. Well, you&#8217;re in luck because I have built just that.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2614\" src=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/4-gb.gif\" alt=\"Gutenberg Custom Block\" width=\"796\" height=\"580\" \/>It has the following file structure:<\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/04-tweet\/block.js\" target=\"_blank\" rel=\"noopener\"><code>block.js<\/code><\/a> \u2014 We register Custom Gutenberg block here.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/04-tweet\/editor.css\" target=\"_blank\" rel=\"noopener\"><code>editor.css<\/code><\/a> _ Block CSS for the editor.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/04-tweet\/style.css\" target=\"_blank\" rel=\"noopener\"><code>style.css<\/code><\/a> \u2014 Block CSS for the front end.<\/li>\n<li><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/blob\/master\/block\/04-tweet\/index.php\" target=\"_blank\" rel=\"noopener\"><code>index.php<\/code><\/a> \u2014 Enqueue block&#8217;s assets for the editor and the front end.<\/li>\n<\/ul>\n<p>And here&#8217;s the custom <code>block.js<\/code> file!<\/p>\n<div class=\"oembed-gist\"><script src=\"https:\/\/gist.github.com\/ahmadawais\/87f1f7d31571bc778f3f77fc86020d9b.js?file=block.js\"><\/script><noscript>View the code on <a href=\"https:\/\/gist.github.com\/ahmadawais\/87f1f7d31571bc778f3f77fc86020d9b\">Gist<\/a>.<\/noscript><\/div>\n<\/section>\n<div class=\"postcontents full dark\">\n<div class=\"wrapper\">\n<h2 id=\"%f0%9f%91%8b-say-something\">\ud83d\udc4b Say Something!<a href=\"#%f0%9f%91%8b-say-something\" class=\"heading-link\">#<\/a><\/h2>\n<\/div>\n<\/div>\n<section class=\"postcontents wrapper\">\n<p>This is all for now. I am hoping for you to have enjoyed this post. Go ahead and read the source code. Again, this post can go stale at a later date but I will try to keep the GitHub repository up to date. You should probably <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\/\" target=\"_blank\" rel=\"noopener\">\ud83c\udf1f star it<\/a>. I have mixed feelings about this Gutenberg project.<\/p>\n<ul>\n<li><strong>At one hand,<\/strong> it will make for a new an incredible WordPress Editor and will make developers happy for using ReactJS and new cutting edge modern tooling.<\/li>\n<li><strong>On the other hand<\/strong>, it will confuse a lot of users and will make life harder for developers. Especially for those who make extensive use of meta boxes in their themes and plugins.<\/li>\n<\/ul>\n<p>I&#8217;d like your comments about this. Do let me know if you have any thoughts or considerations about Gutenberg &amp; its boilerplate. No pressure!<\/p>\n<div class=\"alert blue\"><a style=\"color: #ffffff;\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%F0%9F%93%A6%20%40MrAhmadAwais%20has%20released%20open%20source%20%23Gutenberg%20Boilerplate%20for%20building%20custom%20blocks.%20%0A%0A%E2%86%A3%20HERE%20%E2%80%94%20https%3A%2F%2Fahmadawais.com\/gutenberg-boilerplate\/?utm_source=Share&#038;utm_medium=ME&amp;source=webclient\" target=\"_blank\" rel=\"noopener\">Would mean a lot if you click here to Tweet about Gutenberg Boilerplate! \u21a3 Tweet!<\/a><\/div>\n<div class=\"alert gray\"> If you&#8217;d like to get insights into professional full stack development, DevOps, WordPress community news, growing up a family, building and bootstrapping a business then subscribe to our premium newsletter called \u21a3 <a href=\"https:\/\/AhmadAwais.com\/subscribe\/\" target=\"_blank\" rel=\"noopener\">The WordPress Takeaway<\/a>! <\/div>\n<h3 id=\"gutenberg-boilerplate-updates\"><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate<\/a> Updates<a href=\"#gutenberg-boilerplate-updates\" class=\"heading-link\">#<\/a><\/h3>\n<ul>\n<li>\ud83c\udf1f <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\" target=\"_blank\" rel=\"noopener\">The GitHub repo<\/a> now has <strong><a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\" target=\"_blank\" rel=\"noopener noreferrer\">774<\/a> stargazers<\/strong>\/watchers\/forks!<\/li>\n<li>\ud83c\udf89 <a href=\"https:\/\/github.com\/ahmadawais\/Gutenberg-Boilerplate\" target=\"_blank\" rel=\"noopener\">Gutenberg Boilerplate<\/a> got <a href=\"https:\/\/wptavern.com\/gutenberg-boilerplate-demonstrates-how-to-build-custom-blocks\" target=\"_blank\" rel=\"noopener\">featured at WPTavern<\/a> \u2014 Thanks, Sarah!<\/li>\n<li>\ud83d\ude4c Made it to &#8220;<a href=\"https:\/\/wptavern.com\/wpweekly-episode-282-talking-woocommerce-with-cody-landefield\" target=\"_blank\" rel=\"noopener\">Picks of the Week<\/a>&#8221; in WPWeekly #282 \u2014 Thanks, Jeff!<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" title=\"Jeff Chandler Talking about Gutenberg Boilerplate by Ahmad Awais\" width=\"500\" height=\"400\" scrolling=\"no\" frameborder=\"no\" src=\"https:\/\/w.soundcloud.com\/player\/?visual=true&#038;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F333980676&#038;show_artwork=true&#038;maxheight=750&#038;maxwidth=500\"><\/iframe><\/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><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It&#8217;s heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.<\/p>\n","protected":false},"author":2,"featured_media":2469,"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":[10],"tags":[63,156],"class_list":["post-2470","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-boilerplate","tag-gutenberg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Introducing Gutenberg Boilerplate For Third Party Custom Blocks!<\/title>\n<meta name=\"description\" content=\"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It&#039;s heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.\" \/>\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\/gutenberg-boilerplate\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!\" \/>\n<meta property=\"og:description\" content=\"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It&#039;s heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/\" \/>\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=\"2017-07-15T07:29:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-16T12:49:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\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=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/\"},\"author\":{\"name\":\"Ahmad Awais\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"headline\":\"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!\",\"datePublished\":\"2017-07-15T07:29:09+00:00\",\"dateModified\":\"2023-08-16T12:49:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/\"},\"wordCount\":1854,\"commentCount\":47,\"publisher\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#\\\/schema\\\/person\\\/1d1b9504182dca2315cf039fb4ebb85b\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/gb3.jpg\",\"keywords\":[\"boilerplate\",\"gutenberg\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/\",\"name\":\"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/gb3.jpg\",\"datePublished\":\"2017-07-15T07:29:09+00:00\",\"dateModified\":\"2023-08-16T12:49:25+00:00\",\"description\":\"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It's heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/gb3.jpg\",\"contentUrl\":\"https:\\\/\\\/ahmadawais.com\\\/wp-content\\\/uploads\\\/2017\\\/07\\\/gb3.jpg\",\"width\":1920,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ahmadawais.com\\\/gutenberg-boilerplate\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ahmadawais.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!\"}]},{\"@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":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!","description":"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It's heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.","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\/gutenberg-boilerplate\/","og_locale":"en_US","og_type":"article","og_title":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!","og_description":"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It's heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.","og_url":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/","og_site_name":"Ahmad Awais","article_publisher":"https:\/\/facebook.com\/AhmadAwais","article_author":"https:\/\/facebook.com\/AhmadAwais","article_published_time":"2017-07-15T07:29:09+00:00","article_modified_time":"2023-08-16T12:49:25+00:00","og_image":[{"width":1920,"height":542,"url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.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":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#article","isPartOf":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/"},"author":{"name":"Ahmad Awais","@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"headline":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!","datePublished":"2017-07-15T07:29:09+00:00","dateModified":"2023-08-16T12:49:25+00:00","mainEntityOfPage":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/"},"wordCount":1854,"commentCount":47,"publisher":{"@id":"https:\/\/ahmadawais.com\/#\/schema\/person\/1d1b9504182dca2315cf039fb4ebb85b"},"image":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.jpg","keywords":["boilerplate","gutenberg"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/","url":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/","name":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!","isPartOf":{"@id":"https:\/\/ahmadawais.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#primaryimage"},"image":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#primaryimage"},"thumbnailUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.jpg","datePublished":"2017-07-15T07:29:09+00:00","dateModified":"2023-08-16T12:49:25+00:00","description":"I have built a Gutenberg boilerplate to help WordPress theme and plugin developers kick-start their development with the new editor in town. It's heavily inline documented. This post also contains my thoughts and concerns about the Gutenberg project.","breadcrumb":{"@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ahmadawais.com\/gutenberg-boilerplate\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#primaryimage","url":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.jpg","contentUrl":"https:\/\/ahmadawais.com\/wp-content\/uploads\/2017\/07\/gb3.jpg","width":1920,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/ahmadawais.com\/gutenberg-boilerplate\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ahmadawais.com\/"},{"@type":"ListItem","position":2,"name":"Introducing Gutenberg Boilerplate For Third Party Custom Blocks!"}]},{"@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\/2017\/07\/gb3.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/2470","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=2470"}],"version-history":[{"count":5,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/2470\/revisions"}],"predecessor-version":[{"id":7978,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/posts\/2470\/revisions\/7978"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media\/2469"}],"wp:attachment":[{"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/media?parent=2470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/categories?post=2470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ahmadawais.com\/api\/wp\/v2\/tags?post=2470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}