Make block transforms more discoverable

[richtabor]

I'm curious if there's an additional affordance we can help users key in on block transforms, which is a meaningful tool to level-up the editing experience within the editor.

I'm trying a small down chevron in this design proposal.

I do like that not only does it key you in that there is something here, but it helps promote the currently selected block icon from any other icons, adding a sense of hierarchy to the toolbar.

What do you think?

[afercia]

I'd agree the transforms dropdown menu could be better communicated. However, I'm not sure why only this menu toggle would deserve a down chevron icon to indicate the presence of a menu.

A visual indicator would benefit all the dropdown menus e.g. Align, More, and Options. I'm not sure adding the down chevron icon to only thie menu toggle would help consistency and users expectations. As an aside, the ARIA Authoring Practices examples of the Menubar and Menu button patterns do use a visual indicator (an arrow).

Rather, I'd love to see this toggle button be separated from the icon that represents the block type.

Icons have value when they visually communicate what the control does. This toggle button has always been unclear because:

• The icon represente the block type.
• The button functionality is about transforms: the icon doesn't communicate the concept of "Transform to..."

Basically this button is used for two different purposes. I'd love to see these two purposes be separated.

[richtabor]

I'd agree the transforms dropdown menu could be better communicated. However, I'm not sure why only this menu toggle would deserve a down chevron icon to indicate the presence of a menu.

I do think hierarchy is important; especially when blocks have icons that could be representative of the a block icon within the toolbar (Heading with an H2 icon, or Site Tagline with a P icon, etc).

My thinking is that the down chevron is the easiest way to denote hierarchy and additional affordance. The other icon controls are much clearer in that selecting an alignment icon will open alignment options.

Basically this button is used for two different purposes. I'd love to see these two purposes be separated.

I do it's a good pattern to use the block icon to open the transform panel. You click on the block to transform it into something else. This used to be clearer with a hover to a "shuffle" style icon, but I'm not sure why its changed a while ago.

I like the idea of a chevron better than the hover to a different icon concept previously.

[annezazu]

I like this conceptually but share concerns about having the same icon used in the same toolbar and at different sizes. It visually feels jarring. I wonder if we can explore a few other options to get a broader sense of what might land best?

[richtabor]

I like this conceptually but share concerns about having the same icon used in the same toolbar and at different sizes. It visually feels jarring. I wonder if we can explore a few other options to get a broader sense of what might land best?

I'm not following?

[annezazu]

It's a lot of chevrons and chevron like icons:

I wonder if we can try out a few different options to see if something else might work better.

[afercia]

It's a lot of chevrons

Material for a printed t-shirt 😆 I'd totally agree

My thinking is that the down chevron is the easiest way to denote hierarchy a

My point isn't about arguing the usage of an additional icon to denote the presence of a dropdown. It is about: why only this dropdown menu deserves that icon? There are other dropdown menus. Either they should all use an additional icon or not. Which would lead to really a lot of chevrons.

I do it's a good pattern to use the block icon to open the transform panel.

I have the impression that is a consideration made mainly from a visuals perspective. To me, the funcitonality is different and it's not well represented by the icon, and the labeling of that button is meant for and entirely different purpose. There's really nothing to indicate the 'Transform to' menu.

[richtabor]

There's really nothing to indicate the 'Transform to' menu.

The concept here is emphasizing the block icon with a chevron to denote hierarchy, to make it clear that this control is different. Alignment, formatting, linking; they're all at the same application level. Changing a block type (transforming) is very different.

Few other toolbar controls change a block into a different block type; I can think of one: image to cover.

Currently there's no indication you could, or would ever need to, select the block icon. That's what I'm poking at. That perhaps there's a way to indicate just that, not add a chevron to every control with a popover.