I’ve been learning Gutenberg block development lately, and one of the things I was struggling with was trying to figure out what parameters I could pass on to blocks defined in block variations. I was looking all over the place for documentation on the parameters each block takes, such as font size and color. Little did I know I had all the documentation I needed right in front of me, in the form of the WordPress code editor.
I like using block variations to create recommended sets of content and help guide my users in content entry. You can nest blocks in block variations, and do things like pre-set the background or font size on them.
My new workflow with block variations is to build the variation just the way I like it in the visual editor, and then switch over to the code editor to grab the attributes I need from there. This lets me set hard-to-remember parameters the right way, like gradients, without having to guess and check, like so:
Once you identify the block you want to model your variation off of in the code editor, just grab those attributes and bring them back into your block variations code. Here’s what that looks like in my final code.
This works for both your variations and your
innerBlocks. Here’s an example in my final code of how I used this in a nested block.
Block variations are a low key way to get into Gutenberg block development and get familiar with the ecosystem without getting into React or the more complicated bits. Check it out if you’re new to Gutenberg and looking for a place to start.
Block Variations tutorial
These are companion files to my Build Your First Block Variation tutorial on YouTube.
To use these files, download them, and then unzip them to the directory of your choice. In my tutorial, this directory is called
You can view the final code from the tutorial on the solution-code branch.
You can also see exactly what changed codewise from the beginning of the tutorial to the end of the tutorial by taking a look at this pull request.