There’s no doubt that Gutenberg block styles and transforms are quite interesting and fun.

I like that you may change the look and feel of a block with a click or two. And on the engineering side, it’s remarkably easy to extend any block with both styles and transforms. However, what I’m not particularly fond of, is the user experience surrounding both block styles and transforms.

Update: This proposal made its way into WordPress 5.8!

The block styles UI is a bit clunky, especially if you have more than two styles available. And you can’t really tell what the end result of a style, or transform, will be until it has been applied to the block. On top of that, the current interface around block styles utilizes a blocks’ registered example, instead of the block’s actual attributes. There’s clearly room for improvement.

Block styles and transforms should, and could very well, provide a moment of joy for the end user. So I propose a few minor tweaks to level-up this experience:

1. Add block previews for transforms.
2. Treat styles similar to how transforms.
3. Add block previews.

Here’s a prototype what that could look like:

All that to say, I recently created a proposal for this on Github, outlining what I feel would be an interesting iteration on both block styles and transforms experiences.

If you feel the same way, leave a comment on the Github issue.