---
title: Previewing block styles and transforms
description: '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 sid'
doc_version: current
last_updated: '2024-02-16T15:04:57.000Z'
date: '2020-10-28T07:26:00.000Z'
author: Rich Tabor
summary: '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 sid'
tags:
  - Blocks
  - Gutenberg
  - WordPress
published: true
type: blog
url: /better-styles-transforms
canonical: https://richtabor.com/better-styles-transforms
id: 1107
---

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](https://wordpress.org/news/2021/07/tatum/)!

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](https://github.com/WordPress/gutenberg/issues/26399).
2.  Treat styles similar to how transforms.
3.  Add block previews.

Here’s a prototype what that could look like:

![Previewing block transforms](https://i0.wp.com/rich.blog/wp-content/uploads/2023/01/bb704-96913846-2edd1480-1472-11eb-9403-6effbb91c279-1.gif?resize=1546%2C1102&ssl=1)

_My proposal: hovering to preview block transforms_

All that to say, I recently created a proposal for this on [Github](https://github.com/WordPress/gutenberg/issues/26399), 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.

## Sitemap

[Full site index](/sitemap.md)