One of the trickier things I’ve found in my experiments is finding out what is supported or not in various blocks. I tried to solve that a little for myself by creating a very rough table going through the block.json file of each block.
Block.json is an amazing file, it’s the recipe for the block, and in it, you can see everything easily that is supported. For example, it shows where the experimental font treatments are or layout. I will share this page, however, this is just a resource created as I discover myself. It is not meant to replace actually looking in the block.json or knowing the blocks yourself.
In addition, I decided to pull out some of the theme.json terms that turn on/off the support features. So it is a useful resource for me going forward, and perhaps someone else might find it useful. This section is not complete, yet so please consider that a work in progress.
There are all sorts of useful tools appearing across blocks, and just one of those is the variety of borders you can do on several blocks, group blocks and pull quotes, for example. I wanted to take a little exploration today into what you can create using those.
Adding borders to your theme.json
If you want to have the full border capability on as many blocks as you have right now, you can set the following to your theme.json. This can be set per block also.
You can of course choose to not set any of those if you want to limit options.
What that does is enable the following controls.
As you can see it is picking up the colors I have in my theme. Note that there is no custom color? We can change that also by simply turning that functionality on in the theme.
"color": {
"custom": true,
By giving this type of on/off control you can set boundaries but still give powerful customization options to creators.
Setting the borders
Changing a border is a simple matter of setting the width, picking a style and then color. It will update real-time, but don’t forget to save! If you want to have a border-radius you can also change that. At any point you can click ‘clear’ to go back.
A little note about radius, the little ‘link’ icon enables you to unlink and control all sides of the radius, which can create interesting effects using group block.
Have fun
One thing these tools allow us to do is to play. There’s an opportunity to see what could be. I would encourage you to let your mind wander and really even if it feels far out there, you are getting to know the tools. I share these not as examples to use but to show what could be, the code is ‘overly enthusiastic for some’.
<!-- wp:group {"style":{"border":{"style":"dotted","width":"40px"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"foreground"} -->
<div class="wp-block-group has-border-color has-foreground-border-color" style="border-style:dotted;border-width:40px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"20px","style":"dotted"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"secondary"} -->
<div class="wp-block-group has-border-color has-secondary-border-color" style="border-style:dotted;border-width:20px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"10px","style":"dotted"},"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"borderColor":"background"} -->
<div class="wp-block-group has-border-color has-background-border-color" style="border-style:dotted;border-width:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:heading {"style":{"typography":{"lineHeight":"1.2"}}} -->
<h2 style="line-height:1.2">Hi I am a group</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This is some text in a group</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Who knows what you will create and learn in doing, distil down to actually use in something later.
<!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"100px"}},"border":{"style":"solid","radius":{"topLeft":"100px","topRight":"100px","bottomLeft":"1px","bottomRight":"100px"}}},"borderColor":"foreground","backgroundColor":"background","textColor":"foreground"} -->
<div class="wp-block-group has-border-color has-foreground-border-color has-foreground-color has-background-background-color has-text-color has-background" style="border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:1px;border-bottom-right-radius:100px;border-style:solid;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:100px"><!-- wp:heading -->
<h2>I am a heading in a group</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>This is some group text</p>
<!-- /wp:paragraph -->
<!-- wp:spacer {"height":51} -->
<div style="height:51px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->
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.
I am coding a block character by character from scratch over use a generator as trying to learn the nuts and bolts. It’s easy to be removed from what is going on and never learn. For similar reasons I am going back to commandline Git this year.
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.
