Building Gutenberg Blocks

This presentation was given in Greenville, SC on July 18th 2019. The slides from this presentation can be found at the end of this post.

After attending WordCamp Greenville in 2019 Clifton Canaday invited me to speak at their Meetup. I spoke to the group about Gutenberg, the future of the WordPress editor, and the power I felt it gave developers who embraced its use.

The first portion of the talk was around what Gutenberg was and what it could be leveraged to do. The second portion of the talk was a live demonstration where I built a basic block in an effort to break down barriers of entry and show what members of the meetup group could be delivering to their clients.

I followed my own step by step instructions in the demonstration and encouraged attendees to follow along on their own machines as well. The presentation included a public Github repo with three stages that would accomplish various goals throughout the demonstration. By the end, we had created a content dropdown block that included a title and inner blocks where the user could place any other block they wanted. Some very simple jQuery and CSS styles completed the block on the frontend.

You can see the completed block below. Click inside the dropdown to reveal the content inside. Click again to hide it.

Obviously the block leaves a little something to be desired, like some better styles, better spacing throughout, and a real toggle button and indicator, but for showing how easy it is to get from nothing to working concept, I think it does the job.

I mentioned getting to this “finished” product was a three step process. The first step included setting up the working environment with a local WordPress installation (I recommended Local By Flywheel) and Node.js. From there, all we had to do was use create-guten-block, a crazy helpful npx command by Ahmad Awais, that built a living breathing Gutenberg block already wrapped in a plugin and containing everything you needed to extend your block as far as your imagination would allow you.

My goal here was to show how simple it could be to get something working, even if that something didn’t really do much. My barriers to entry when it came to Gutenberg was not knowing much about React, but when I first saw how easy it was to get something showing up in the block editor, I was hooked. I aim to share that with as many people as possible.

Step two was where the real work began. Up to this point we have not had to touch React or any JavaScript for that matter. While we had a working block, it contained dummy content and no functionality. The next thing I wanted to do was show how to use the RichText and InnerBlocks components to make editable fields inside our block. To see how this is done you will have to visit my Building Gutenberg Blocks Github repo. The entire process of steps two and three are broken out into small digestible tasks, and all the code you need could be copied from the readme, or downloaded from that repo.

It was a huge honor to share with the group in Greenville, spread some knowledge with people who are eager to learn, and give back to the WordPress community. I hope this writeup and the accompanying repository are helpful in starting your WordPress or Gutenberg journey!