The WordPress block editor has a feature called “Block Styles” that allow a block (or plugin, or theme) to provide CSS-like style options to alter the appearance of the block. For example, the Table block offers two styles: Default and Striped.
This post looks at the interface for switching between styles and how it could be improved.
Current Interface
Switching between styles can be done in both the block’s toolbar and the editor’s sidebar. Both places appear to use the same interface; A 2-column layout with a thumbnail and title for each style. The sidebar also includes a dropdown for setting a “Default Style,” which defines which style to use when adding new instances of the block.
Tiny and Unpredictable Previews
The previews rely on example content provided by the block and are rendered as iframe’s. The previews are then scaled down using CSS and a defined viewportHeight of 500px, which appears to be hardcoded into the block-styles component.
Some times the previews work well; The Table block’s default styles seem to be clean and understandable at a glance:
Other times the tiny size of the preview makes it hard to understand the styles effects; The Quote block’s two styles (Default and Large) appear to be similar in size.
The descriptive label are often more informative than the small thumbnails. Often times I find myself simply clicking between styles to see how they look on the editor’s canvas and relying more on the styles label.
The interface displays the previews without any discernible border or background. This makes it difficult to understand the boundaries of the preview and its clickable area.
In addition to the small size and lack of boundaries, the previews are often mis-aligned. For example the Button block styles display with the elements left-aligned with lots of extraneous whitespace.
Overall Interface Size
It’s also possible to wind up with a rather long list of styles. In the example below a plugin has added a few additional styles to the Button block.
With only five styles the UI becomes unwieldy and obscures more important controls like Typography and Color.
Default Style Control
In the sidebar Style section there is a “Default Style” control which allows you to set the style that is used (by default) when adding another instance of the block. Its a great feature to have, but its not important enough (or used enough) to earn its emphatic presence in the interface.
To compound the confusion the word “default” is often used as a name for a particular block style. This means it is possible to have a “Default” style not actually be the “Default Style” for a block. Both the Quote and Table blocks have a style named “Default.”
I’ve been tinkering with the design of the block style picker for a little while and think we can make some changes that might improve the overall experience. I took a rather long journey with this relatively simple UI, and will share some of the explorations I created along the way first.
Half-baked Concepts and Ideas
My first thought was to hide the previews and replace them with a button to “Change style” which, when pressed, would show the options in a popover.
This does reduce the overall size of the sidebar, it doesn’t really do anything to resolve the tiny previews. Also, it feels strange to have a button just hanging out at the top of the sidebar.
Well, if a button feels weird, maybe a dropdown would feel better…
I had a hard time coming up with a way to incorporate the previews with a dropdown in a way that didn’t feel overly complicated.
Maybe a carousel could work? Show one large preview at a time, and let people switch between them one-by-one to see how to look.
I didn’t spend too much time on this one, as it immediately felt like I was over complicating things.
Well, maybe a simple list would work…
The tiny thumbnails are mostly useless, and the list could get rather lengthy.
What if we lean into the thumbnails and offer some more descriptive text to help explain styles. In order to try and reduce the overall size I tried smaller previews, with a flyout preview with the style’s name when hovered.
I like that this provides the ability to see a larger preview, but it still relies a little too much on even smaller previews as a way to see the options at a glance.
I briefly played with the idea of previewing the style directly on the canvas as you hovered over the options. Way too much movement and it felt disorienting.
We could require styles to include some sort of representational preview (like an SVG or image) instead of rendered previews.
Maybe these representations could be even more abstract…
Representations like this can only go so far, and forcing creators to include an SVG or image presents a fairly large obstacle for adding styles.
Perhaps it would be better to remove the tiny thumbnails in favor of the descriptive titles for the styles. The thumbnails are too small and often unhelpful, but the titles can help define the purpose of the style.
Hovering over a style displays a large preview.
Taking things a step further, it could be powerful to allow multiple styles to be activated at the same time. This would help reduce the need for repetitive style names, like Filled, Outline, Filled Round, and Outline Round.
And thinking just a little further down the road, I think it could be nice to allow people to create and manage their own styles right from within the editor.
Leave a Reply