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.
This is the dropdown heading
This is some content designed to be revealed on the front end!
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.
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!