Add icons to "block actions" (ellipses dropdown options)

[mariohamann]

Current state

Coming from the idea of @mapk in #24092 (comment), I realised that there are no icons for actions like "Copy", "Duplicate", "Insert Before" etc.

I think it would support users to add icons in dropdown, even if those icons are very generic as e. g. in GoogleDrive.

Solutions

Based on existing icons I created some new drafts on Figma to discuss:

In context:

Learnings and questions during the process:

• It's not easy to distinguish between "copy" and "duplicate".
• Especially with the "insert before/after" icons I had to see the icons in context to get a feeling for their actual "weight".
• Currently there is no option for "Paste" and "Cut". :)
• Should these "Meta"-options always be available in the top toolbar?
• Why is there an option to "Hide block settings" which is a duplicate of the option in the top toolbar and doesn't really fit the the other options? (I just raised this question in Remove "block" from "Hide Block Settings" and "Show Block Settings" labels #22955 (comment))

[ntsekouras]

Hey @mariohamann - thanks for taking the time to explore this and your proposal. Maybe some folks involved with design could share their thoughts

-cc @mapk @jasmussen

[jasmussen]

Hi @mariohamann thank you for the ticket! And thank you for including lots of visuals, that helps a lot.

As part of the 5.5 effort to advance the block interface, numerous icons were intentionally removed from menus such as the ellipsis menu.

In places, icons have been added back, for example to the reusable block menu item. That happened in #23552 which also moved menu item icons to the right. This was done also to ambiguate between menu items and tools, of which the inline tools in your example should have icons on the left. This also makes the hierarchy clearer when for example you select a tool and have a checkmark on the right:

For that reason I believe it is important that conversations about adding back icons consider their relative importance compared to adjacent items. Ultimately the icons are secondary decorations to the label, and rather than just add them everywhere, we can leverage them to put emphasis to some icons. Google Docs does the same:

Given that, which menu items would you think important enough to need the additional emphasis of an icon? Personally I could see "Group" and potentially "Copy" fit that bill.

[mariohamann]

Thank you for your feedback!

Given that, which menu items would you think important enough to need the additional emphasis of an icon?

Based on my own experience creating content in Gutenberg, I believe Copy, Duplicate, Insert before/after, Add to Reusable Blocks, Group and maybe Remove block are the most important actions. But Remove block is just a nice-to-have and could be dropped first. :)

(Thank you for linking to #23552. I have to admit for me it feels a bit strange to put the icons on the right side. I think they should visually support the user and – reading left-to-right – I believe it works much better on the left side as seen in both of your screenshots above. But I will share my concerns in the other issue, too, to keep this issue clean. :))

[mtias]

I'd suggest to start with group and insert before / after. Those last two are quite important and share functionality, it might be nice to give them more prominence through icons.