tl;dr Follow along as ChatGPT and I 🍐 program to build a simple Gutenberg block that shows a random ice breaker question.
Internally at Automattic, someone shared:
For team meetings we often include ice breakers. It’d save a bit of time if we didn’t have to go search for an icebreaker list each time we create a post but instead had an icebreaker generator block. It could work similar to the GIF block where it adds one idea and has a button to create a new one if you don’t like the first one. Could be a nice hack week or GM project!
Then I shared:
Why wait for hack week when you have ChatGPT? 😀
And shared the following screenshot where I asked ChatGPT to write an ice breaker Gutenberg block for me:
Someone then followed up and asked how we might get this fully functional.
So, I figured, why not! 😛 Let’s see how far we can run with this. My goal at this point was two-fold:
- Leverage ChatGPT as much as possible, assuming I know as little about building blocks as possible.
- Document everything.
If you look at the code that ChatGPT provided in my screenshot above, you’ll notice that quite a few details are missing. Step 2 mentioned “Create a new plugin”, so I started there:
Fleshing out more details
Next I asked some follow questions:
Note on the above interaction: It messed up at first, so I had to ask it to regenerate the answer.
I noticed that there was no mention of a
block.json file, so I asked it about that:
I then asked it to help me get started with the CSS files:
To simplify things, I decided that it would probably be easier to just load the questions array in the JS file, so I asked it to transform the function from PHP to JS:
I then manually pasted in all of the other array values.
At this point I spun up a local dev environment and pulled all of the pieces together. The UI that ChatGPT produced worked, but it felt a bit heavy handed for my tastes. I made a few updates to the CSS and the
icebreaker-block-editor.js file and added translations. I then ran up against something I didn’t know how to do, so I asked ChatGPT:
I love that it proactively suggested an alternative using Font Awesome.
I then wanted to see if ChatGPT could help with adding a font-size selector:
It wasn’t clear to me where this code was meant to go, so I clarified:
Realizing that this was not what I was looking for, I clarified again:
Finally, I clarified how I might pass this value into the save function:
In the end, here’s what I was able to produce with the help of ChatGPT in about an hour:
You can find the code here: https://github.com/davemart-in/icebreaker-gpt/
- 80% there – ChatGPT is absolutely amazing at augmenting the work you may already be doing as a developer. It’s admittedly less handy in its current state if you need it to reliably spit out functional code with any sort of accuracy.
- Timing out – If you ask ChatGPT for something complex, it might time out. When this happens, don’t stress. Just ask it to continue on from where it left off.
- One on-going conversation – It’s really cool how ChatGPT can remember context from previous questions and incorporate it into future answers.
- Dive in! – If you haven’t started leveraging ChatGPT to augment you everyday work, you’re missing out!