Improving Gutenberg Block Styles and Transforms, a Proposal

Improving Gutenberg Block Styles and Transforms, a Proposal

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.

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.

Core image styles

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 (GitHub issue).
  2. Treat styles similar to how transforms are implemented in the UI.
  3. Add block previews for transforms.

And here a rough cut of what that could look/feel like:

Previewing block transforms
Hovering to preview block transforms

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

Better Gradient Presets in the WordPress Block Editor

Better Gradient Presets in the WordPress Block Editor