{"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":"

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

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

I also wrote an introductory article \u2192\u00a0Introducing Gutenberg Boilerplate For Third Party Custom Blocks<\/a>!<\/p>\n

\ud83d\ude80 GITHUB: \u2605 773 \u2442 88 \u2192<\/a><\/p><\/blockquote>\n

PRE-DEPRECATION NOTICE<\/strong><\/p>\n

Instead of this deprecated and no longer-maintained boilerplate, I now recommend you to use my new toolkit called \ud83d\udd25 \u269b\u200f \ud83d\udce6 create-guten-block<\/code> \u2192<\/a><\/p>\n

\n\n \n \n
\n Gutenberg Boilerplate<\/strong>
\n An easy to understand and heavily documented\ufe0f WordPress Gutenberg Boilerplate!\n <\/td>\n <\/tr>\n
\n A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais<\/a>.\n <\/td>\n \n \n \"\"\n <\/a>\n <\/td>\n <\/tr>\n<\/table>\n\n

\"Gutenberg-Boilerplate\"<\/a> \"\"<\/a> \"GitHub<\/a> \"\"<\/a><\/p>\n

\"gutenberg-boilerpalte\"\nBuild your first Gutenberg Editor block! A boilerplate to build WP Gutenberg blocks and stuff! \u270a<\/p>\n

\u26a1\ufe0f Getting Started<\/h2>\n
    \n
  1. \u2705 Install & activate the Gutenberg<\/a> WordPress plugin<\/li>\n
  2. \u2705 Then download and install\/activate this Gutenberg Boilerplate plugin<\/a> \u2190 Just click this link to download.<\/li>\n
  3. \ud83d\ude4a All blocks added by this boilerplate are prefixed with GB<\/code> as in Gutenberg-Boilerplate. Take a look at the GIFs below to see how to try 'em out.<\/li>\n
  4. \ud83c\udfaf To try the ESNext block, i.e. 02-basic-esnext<\/code> go to it's directory i.e. gutenberg-boilerpalte\/block\/02-basic-esnext<\/code> and run npm install<\/code>. Make sure you have Node and npm installed<\/a>. Then in the 02-basic-esnext<\/code> directory run npm run dev<\/code> for development or npm run build<\/code> to build the production code.<\/li>\n
  5. \ud83d\udcaf Now read the source code to learn how to build blocks. It's heavily documented. <\/li>\n<\/ol>\n
    \n

    RECOMMENDED READING: Read the blog post I wrote \u2192 Gutenberg Boilerplate For Third-Party Custom Blocks<\/a>.<\/p>\n<\/blockquote>\n

    \u26a1\ufe0f What Can You Learn?<\/h2>\n

    This is a todo<\/code> list for this boilerplate which also states the progress of what you can learn from it.<\/p>\n