Over the holiday break, I set myself a challenge of building an editor block. While I have worked within blocks and the editor, I have yet to make a block. The time had come to change that.
Now, I want to be clear before I write this post that my JavaScript skills are still light at this point. I have been trying to learn more and getting there, but I don’t enter this block building adventure with many tools in my backpack. Nevertheless, I bravely began my journey because this is part of learning more by doing. I started in a comfortable place, planning. I was going to build a knitting pattern block.
Planning the block
I knew my abilities for block building were likely not to be where my vision was going to be for this. That’s ok as I don’t just see this as a one-stop project, it’s something I plan over the next year to continue on this quest. My rough block though I wanted to be as simple as possible.
I distilled down what I thought a knitting pattern would need and each format:
- Project title (Heading)
- What you need to make it (List)
- Steps to make (List)
Some others I thought were optional:
- An image to encourage to make (Image)
- Level of difficulty (Rating)
- Notes (Paragraph)
- Stitches going to use (List)
I had my plan; now, it was time to think about how I was going to build this.
Learning by viewing
One of the bedrocks for me in WordPress is learning through reading code. It’s how I got started in themes, pursuing Kubrick and iterating. Blocks, however, there’s an issue here. Many have build scripts, bundling, compiling and output that isn’t readable or is for someone reviewing incredibly confusing.
I found myself with a problem. I would browse blocks and look at their code baffled. I thought a little and took my planning back to the documentation; this is where I remembered the excellent resource of the Gutenberg examples, linked in the handbook. These are simple blocks going up in complexity.
Focusing on steps
I want to pause a bit on my journey to note how complicated the language and stack we use right now is. While there are benefits to someone learning, it’s well quite frankly a lot. It was for me, and it is for everyone. The biggest issue right now is knowing whether you are doing the right or wrong thing, that combined with some pretty complicated terminology is daunting.
The reality is, at the start, you likely aren’t doing the right thing, but that’s also ok. I noticed myself spiralling down a few rabbit holes trying to work out if I should go ‘esx’ to not. I caught myself, pulling back and reminding myself that I wanted to keep it simple, focus on just creating a block. I choose to, as a result, begin going through the examples copying one by one, letter by letter and building up.
Modifying the recipe block
As I followed each example, the recipe block came up. Having run each block, I was already riding on a high of happy; there was something magical about getting input to work and just loading my block. The recipe block, after I ran through the example, felt an excellent spot to modify from and create my knitting pattern block.
I changed the field names and ended up with:
- Title (Heading)
- Image (Media button)
- Materials (List)
- Pattern (List)
After some fun with variable changes, not working, it worked! I was pretty joyous at that point, while simple, I had the foundation of my block!
Over the next few days I added some iterations to get to the version I have now:
- Separated materials into yarn and needles.
- Added placeholder styling to media button.
Moving forward
I have a list of things I plan on doing, which more or less go up along the list in difficulty.
- Learn how to change the icon. Currently using copied one from recipe block.
- Document and tidy up comments in the block.
- Add some front end styles.
- Look at how not just to have media button but have media placeholder and block.
- Explore ratings.
- Look into ‘esx’ and how that could be better for me to use. Along with this going to have to explore compiling, I think (although need to get there to know).
- Explore nesting as I feel this might be better as nested block to allow various types.
At some point I would also like to consider releasing this block, however, for now, you can find it on GitHub.
Reflections so far
My journey into block building is successful in the sense that I have a block. It’s a pretty simple block though, and as noted, I have a few plans outlined above on next steps, but I achieved my first block. There are a few things though I feel worth calling out in the little journey I’ve gone on.
As noted, the examples are critical. I was quite frankly spiralling down so many rabbit holes until found them. That said, the examples themselves were a little confusing at the start between things like compilers and ‘esx’. I also wish there were more examples, and that’s something those of us learning can maybe help both with feedback and sharing what we create.
I acknowledge my light JavaScript skills probably didn’t help much in both knowing the differences or understanding examples. I also know I was taking the harder road by not using a block builder. There are many great builders out there and helpful scripts, but I am on this journey to learn. For me, this works best with getting as close to the code as possible.
Although I experienced some pretty long head scratches and ponders, I could find the information. The docs are there, and also it’s pretty easy to search for anything you get majorly stuck on. You do have to have confidence you can quickly get out of anything (undo! undo!), but that’s part of coding, to breathe and back up your mental truck. I often was confused and unsure if, on the right path, I could though fall back on reminding myself if it worked, it was good enough for now.
A journey
I have reached a short stop on a long journey. While I achieved making a block, I know it’s not where I want it to be, and there is still a whole lot to learn. That’s exciting, even though I am reasonably sure I am about to enter a steep learning curve, that’s also fun. As a bonus part to this, I also levelled up my use of GitHub command line, which was great.
If you are thinking about diving into making a block, I encourage you to try it. You never know what you might be able to create and what journey you can start on.