Ahmad Awais

NAVIGATE


SHARE


Introducing Gutenberg Boilerplate For Third Party Custom Blocks!

Ahmad AwaisAhmad Awais
⚠️Gutenberg Boilerplate has been deprecated in favor of create-guten-block. Go ahead 🌟 and use create-guten-block β†’

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.

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

⚑️ Gutenberg#

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.

I have had been writing about it (invitation to contribute) and covering the meeting notes 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’s not all; I stopped myself from writing anything because I have been a bit confused.

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.

πŸ€” My Thoughts about Gutenberg!#

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 releases in the last 29 days) there are things about this project that are not going to change!

Here’s what I think about Gutenberg (v0.5.0)

βœ”οΈ PRO’s: The Concept of a Block

❌ CON’s: The Concept of a Block

βœ”οΈ PRO’s: ReactJS, ESNext, Webpack

❌ CON’s: ReactJS, ESNext, Webpack

βœ”οΈ PRO’s: NPM Packages

❌ CON’s: NPM Packages

πŸ™„ CONCERN: The Dependency Hell#

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 The Dependency Hellβ„’.

Screenshot 2017-07-15 07.45.47.png

license-check.png

I have more to say, but I’ll stop here! Let’s be more productive and build something!

Gutenberg Boilerplate is a WordPress plugin that demonstrates how you can develop custom Gutenberg blocks both with and without a build process.

Gutenberg-boilerplate

🌟 IMPORTANT:

Before we dive in β€” I recommend you star the GitHub repository for Gutenberg Boilerplate. To show support and to keep up with the updates β€” with time this article may become outdated but not the repository!

⚑️ Getting Started#

Gutenberg Boilerplate is a WordPress plugin. So, go ahead, install the Gutenberg WP plugin and then download and install Gutenberg Boilerplate ZIP. Below you’ll find the information about these blocks, and their block.js files, while other files β€” I expect you to read them on your own.

⚑️ What Can You Learn?#

You can learn to build four different kinds of custom Gutenberg blocks at the time of release. These blocks are explained below:

πŸ“¦ Block #01: Basic Custom Gutenberg Block#

This is basically a Hello World example of building a custom block. Gutenberg Custom Block It has the following file structure:

Here’s how the block.js file looks. The inline documentation should be enough for you to understand what’s going on in there.

And here’s the index.php file where we enqueue assets.

Guess you can figure out how the CSS files would look like. Anywho, here it is.

πŸ“¦ Block #02: Basic Custom Block With ESNext#

This is basically a Hello World example of building a custom block with a build process and using ESNext, Webpack, Babel, etc.

Gutenberg Custom Block

It has the following file structure:

Here’s the block.js filewritten in ESNext.

↣ The Build Process#

Read the files explained above. All of the files are heavily inline documented. All you have to do is following:

Build process starts with the package.json file.

I have also written a very basic Webpack configuration. It’s explained inside the Webpack.congif.js file.

This is a basic Editable custom Gutenberg block.

Gutenberg Custom Block

It has the following file structure:

Again, here’s the block.js file.

πŸ“¦Block #04: Tweet Gutenberg Block#

Fancy building a custom block to tweet content written inside it? Maybe you have already built a shortcode like this one before. Well, you’re in luck because I have built just that.

Gutenberg Custom BlockIt has the following file structure:

And here’s the custom block.js file!

πŸ‘‹ Say Something!#

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 🌟 star it. I have mixed feelings about this Gutenberg project.

I’d like your comments about this. Do let me know if you have any thoughts or considerations about Gutenberg & its boilerplate. No pressure!

If you’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 ↣ The WordPress Takeaway!

Gutenberg Boilerplate Updates#

JUST A NOTE!
πŸ‘¨β€πŸ’» I’m teaching thousands of devs how to become VSCode Power Users β†’
βœ… This site is super fast?! It’s hosted with Kinsta on Google servers β†’

Helping businesses understand developers. Head of Developer Relations RapidAPI.

πŸ“Ÿ Edutainer at Node.js CLI Automation course (100 videos Β· 22 Projects) & VSCode.pro course (over 20K devs). 🎩 Award-winning Open Source Engineer & Dev Advocate 🦊 Google Developers Expert Web DevRel πŸš€ Mars Ingenuity Helicopter code contributor πŸ† 8th GitHub Stars Award recipient 🌳 Node.js foundation Community Committee Outreach Lead, Member Linux Foundation, OpenAPI Business Governing Board, and DigitalOcean Navigator.

✌️ Author of various open-source dev-tools and software libraries used by millions of developers worldwide ⓦ WordPress Core Developer πŸ“£ TEDx Speaker with 100+ international talks.

πŸ”₯ Satya Nadella Β· CEO of Microsoft, said β€” Awais is an awesome example for developers.
πŸ™Œ Leading developers and publishing technical content for over a decade πŸ’œ Loves his wife (Maedah) ❯ Read more about Ahmad Awais.

πŸ‘‹β€¦ Awais is mostly active on Twitter @MrAhmadAwais

πŸ“¨

Developers Takeaway

Takeaway my professional opinion on open-source, developer relations, growing your business with family, and everything in between! Delivered to your inbox a couple of times every year. I'm even funny at times. I hate spam β€” pinky-promise!

πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» 118,947 Developers Already Subscribed
Comments 47
  • Mairaj Pirzada
    Posted on

    Mairaj Pirzada Mairaj Pirzada

    Reply Author

    Anything that gets merged with WordPress potentially influences the sites of millions of WordPress users. Gutenberg is another such project. While it looks neat, the endless possibilities begins with the inclusion of ReactJS, Webpack.

    WP users should take part in improving the editor and making their say count. Or else, it’s gonna affect them in the long run.


  • Seth
    Posted on

    Seth Seth

    Reply Author

    What you show here looks to much more complicated than using acf flexible content fields to make a site modular. Do you agree?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Obviously, it is. Complicated and advanced!


  • Jason Bahl
    Posted on

    Jason Bahl Jason Bahl

    Reply Author

    Awesome write up and great examples!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      That’s very kind of you to say! πŸ’― β€” Jason!


  • Eugene Kopich
    Posted on

    Eugene Kopich Eugene Kopich

    Reply Author

    Hi! What about current themes and plugins that rely on shortcodes. Will they have problems in future?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Not sure about that! If anyone needs to start this discussion β€” NOW β€” might be the right time to do so. Gutenberg is planned to be merged in WordPress 5.0 with at least 100k installs of this plugin!


    • Matt
      Posted on

      Matt Matt

      Reply Author

      Woe to the users of Visual Composer, Divi, Avada, etc. I don’t use or recommend these but you only have to look on the Envato Marketplace to see how many people this could impact negatively. They’re potentially in for a ride and probably have no idea. If they end of having to redo their entire sites, they may decide to switch platforms?


      • Ahmad Awais
        Posted on

        Ahmad Awais Ahmad Awais

        Reply Author

        Exactly, what happened with Drupal 8.0. They made it so hard for everyone that people just left it and moved to Laravel, Symphony, etc.


      • Mssbee
        Posted on

        Mssbee Mssbee

        Reply Author

        This would a disaster, as many of the people using Visual Composer, Divi, Avada, etc. are using it because they don’t know anything about coding. They would have to look at other options for non-coders such as Square Space or Wix to “rebuild” their sites. It would be a shame for these users to have leave WordPress.


      • Frank McClung
        Posted on

        Frank McClung Frank McClung

        Reply Author

        Matt M. is clearly fighting SquareSpace and Wix with the Gutenberg push with little to no concern about backwards compatibility of the plugins, themes, builders and developers that made WordPress as popular as it is today. Gutenberg will kill WordPress as we know it, drive many devs, designers and small businesses away. Can they not fork WordPress at this point. Then this whole concern would be a moot point. Let Matt and Gutenberg go on their merry way conquering new market share why the rest of us continue to use and develop WordPress “Pro” (no-gutenberg core). But no, Matt’s hell bent on Gutenberg.

        The interesting thing I picked up from this article is the complexity of the coding on the back end. One thing that allowed WordPress to be so adoptable in the early days was not only its ease of customization, many themes and infinite plugins, but how easy it was to code on the back end. That’s why many designers were able to pick up some coding and use WP. Now that advantage is gone and with it what made WP accessible.


        • Matt B
          Posted on

          Matt B Matt B

          Reply Author

          I wish I could say I disagreed even having watched everything from WordCamp US 2017. I hope that things aren’t nearly as dire as what you describe but that’s merely wishful thinking on my part. Developers may be able to adapt in time but the non coders will only be saved if the solutions they depend on can be migrated in time. This is possible but unlikely, I’d say.


  • Imtiaz Rayhan
    Posted on

    Imtiaz Rayhan Imtiaz Rayhan

    Reply Author

    Hi Ahmed,

    Great job with the boilerplate. We would love more stuff on Gutenberg from you.

    In my opinion, instead of complaining we should all just contribute to make it better, be it coding or giving feedback after using.

    It’s not like people have to use it right now. And five releases in the last 29 days shows developers are working hard to make it better.

    I was a bit scared too knowing I would have to work harder on my plugins, change a lot of stuff. Then again, it comes with lots of possibilities, challenges, lessons. So, I am having an open mind now.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Great job with the boilerplate. We would love more stuff on Gutenberg from you.

      That’s very kind of you to say! πŸ’― Sure thing!

      In my opinion, instead of complaining we should all just contribute to make it better, be it coding or giving feedback after using.

      That’s true! A lot of developers including myself, we are doing just that! You should join us. :)

      It’s not like people have to use it right now. And five releases in the last 29 days shows developers are working hard to make it better.

      It WILL be like that once the Gutenberg editor gets merged in the core. By the end of this year I suppose. Are you ready for that?

      Moreover, the mention of five releases in 29 days was to state the point that the things I talked about in this post can go stale and irrelevant when the new features and fixes are in place!

      I was a bit scared too knowing I would have to work harder on my plugins, change a lot of stuff. Then again, it comes with lots of possibilities, challenges, lessons. So, I am having an open mind now.

      Exactly! There is a charm in working with cutting edge software. It has both pros and cons!

      Thanks for dropping by, Imtiaz!


  • Mian Shahzad Raza
    Posted on

    Mian Shahzad Raza Mian Shahzad Raza

    Reply Author

    It is going to hard but not impossible, rough starts often leads to greater successes. I will give time to learn it, thank for giving beginners like me a head start.
    I more of a frontend developer so i must admit i am gonna have hard time learning it


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Sure, thing! Give it a go and contribute if you can find and improve something :)


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      It is going to hard but not impossible, rough starts often leads to greater successes.

      No one is saying it’s going to be impossible. I think you got the wrong meaning here. ;)

      I will give time to learn it, thank for giving beginners like me a head start.
      I more of a frontend developer so i must admit i am gonna have hard time learning it

      Sure, go ahead! Break a leg! β€” Cheers!


  • Mustaasam Saleem
    Posted on

    Mustaasam Saleem Mustaasam Saleem

    Reply Author

    A great post Ahmad, you are the champ!


  • Rheinard Korf
    Posted on

    Rheinard Korf Rheinard Korf

    Reply Author

    Thank you Ahmad.

    I’ve been doing some of my own experiments creating custom blocks for Gutenberg, but this is such a nice concise collection.

    I saw `enqueue_block_editor_assets` introduced the other day, but haven’t had time to test the hook yet. So thank you for demonstrating the use of that too.

    Your webpack setup is also nice and easy to understand.

    Looking forward to seeing more :)


  • Mssbee
    Posted on

    Mssbee Mssbee

    Reply Author

    Thank you for contribution to the WordPress community. Your work on this boiler plate is outstanding. Also, your pros and cons are insightful and helpful in understanding Gutenberg.


    • AhmadAwais
      Posted on

      AhmadAwais AhmadAwais

      Reply Author

      Glad you liked it!

      That’s very kind of you to say! πŸ’―


  • Matt
    Posted on

    Matt Matt

    Reply Author

    Great write up, thanks for that Ahmad. Will study everything more.

    What is not clear to me, is why the Gutenberg project means the removal of the metaboxes. Meta boxes (created in themes or plugins) are used for custom meta fields. Not post content. The WordPress editor is for editing post content. So these are two different things. So why does the Gutenberg editor mean the custom meta boxes have to be/will be removed? Why can’t they just exist both, whenever Gutenberg is implemented? I can understand a little visual change, but a complete removal, not.

    I have used custom meta boxes for all kinds of postmeta fields (think about a real estate website with all kinds of postmeta fields for meta info on buildings/projects), in dozens and dozens of websites I have build for clients. They all will break if Gutenberg is released and meta boxes are removed. If that happens I can file for bankruptcy when my clients’ websites need to be fixed.

    Hope it’s ok to ask here.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      That’s very kind of you to say! πŸ’―

      I get what you are saying, I think you should post this concern in the issue #952!


    • Frank McClung
      Posted on

      Frank McClung Frank McClung

      Reply Author

      I’ve read where there were going to be metaboxes per block. That’s useful! Not.

      You’re assessment about what is going to happen when metaboxes are removed or relegated to content blocks is correct. But it isn’t just metaboxes that will be “destroyed” in a sense with Gutenberg in the core, it is also pages and posts. The whole WP structure will be gone in another two years.

      The problem is that people see any opposition as “complaining” “being negative” “not wanting to learn new things”, etc. Gutenberg isn’t about a change to the visual editor, it is a completely new WordPress coming, and that is worth opposing.


  • Lucas Stark
    Posted on

    Lucas Stark Lucas Stark

    Reply Author

    Got another example I created today you might consider including. It shows how to add a custom shortcode to the editor, in this particular case the Gravity Forms shortcode. lucasstark/gutenberg-gravityforms


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Great, would you be interested in sending a Pull Request?


  • y1
    Posted on

    y1 y1

    Reply Author

    Hi,

    I try to develop a page builder on top of Gutenberg. I’m trying to make pre-made content.

    *For that purpose, I will create block that can use external image/video.

    My question:

    Is it possible making pre-made content like in page builder?:
    -We save our created content as XML.
    -Then we put the XML in our plugin/theme.
    -Then we create one block for each saved XML complete with image of the content.
    -When click the pre-made content button, pre-made content populated.

    (Using Gutenberg, this question looks like general WordPress question. I tried to find documentation & example but it seems to be too few talking about this.)

    Thanks a lot


  • Anna
    Posted on

    Anna Anna

    Reply Author

    Thanks for such an informative article on Gutenberg.

    Awais, please recommend, which Javascript library should start learning to develop Gutenberg blocks etc ?

    If possible, please give the Pros and Cons of top 3 JS Libraries in context of Gutenberg.

    Once again thanks for your awesome Gutenberg Boilerplate.


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Anna!

      Thanks for dropping by. Well, as of now, it’s not clear which JS library is going to make it in the core but chances of it being ReactJS are quite great. I’d suggest you to signup at my newsletter called WPTakeaway https://AhmadAwais.com/subscribe/ β€” I’ll share more advice as well as an article there about different JS frameworks!


  • Matt Graham
    Posted on

    Matt Graham Matt Graham

    Reply Author

    Hey there Ahmad,

    Great article. I’m still processing the large change that will come with Gutenburg, but your article has helped me unpack it a bit.

    I need to look at your source, but here’s a question that your source may not answer: I read through the exchange between Facebook and Matt Mullenweg that you could essentially use any JS you wanted to build out blocks. Is that still the case, or are they sticking with React and Webpack only?

    Thanks again!


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey, Matt!
      Glad you liked it! πŸ’―

      I think we are not moving away from React at this stage especially after it’s MIT relicensed. And yes, Webpack is pretty great for bundling JS. I have a new project that I plan to release soon, that will help you get started with it.


  • Jeff
    Posted on

    Jeff Jeff

    Reply Author

    Great write up. Would’ve loved to have seen Vue used for Gutenberg instead of React. With complexity being such a common topic surrounding Gutenberg, and Vue being generally considered to have a lower learning curve – seems like it would have been a good choice.


  • Carlos
    Posted on

    Carlos Carlos

    Reply Author

    Thank you for posting this. I’m working with Gutenberg trying to figure out how older content will migrate to Gutenberg and it has been a disaster so far. None of the content will migrate cleanly and it’s been one big headache to make it work.

    About the licensing I wonder if this will change Mat’s position on dual licensed software being available in the WordPress Marketplaces for themes and plugins now that core has taken the dual licensing approach particularly after he wrote this: There is No Such Thing as a Split License


  • Hamed Moody
    Posted on

    Hamed Moody Hamed Moody

    Reply Author

    Hi
    Can i write new block wihtout npm/react and just with javascript?


    • Ahmad Awais
      Posted on

      Ahmad Awais Ahmad Awais

      Reply Author

      Hey β€” npm and react are JavaScript. You’ll have to learn these to be able to write good code. That’s my opinion. Learn one thing at a time and go with the flow.


  • Shoaib
    Posted on

    Shoaib Shoaib

    Reply Author

    Editable block is not working with development version (5.0-beta4-43896).


  • James
    Posted on

    James James

    Reply Author

    Thanks for sharing this tutorial. Can you also please guide me how can I create a block template? I am doing the same using this resource but it’s giving an error and I am having some programming lines in front end. This is the code
    add_action( β€˜init’, function() {
    $args = array(
    β€˜public’ => true,
    β€˜label’ => β€˜News’,
    β€˜show_in_rest’ => true,
    β€˜template_lock’ => β€˜all’,
    β€˜template’ => array(
    array( β€˜core/paragraph’, array(
    β€˜placeholder’ => β€˜Breaking News’,


Mentions