Skip to content

Enhancement: Add icons to block options menu items for improved UX and visual clarity #78050

@adithya-naik

Description

@adithya-naik

What problem does this address?

The block options menu currently displays actions such as Copy, Cut, Duplicate, Add before/after, and Delete as text-only menu items.

This makes the menu more difficult to quickly scan and visually distinguish, especially for users who frequently interact with block controls or are new to the editor. Since many parts of the editor already use icons alongside labels, the current menu feels visually inconsistent and less intuitive.

Additionally, actions with different purposes (destructive, structural, utility actions) are not visually differentiated, which may increase cognitive load while editing.


What is your proposed solution?

Add relevant icons alongside each action in the block options dropdown menu.

For example:

  • Copy → copy icon
  • Cut → cut icon
  • Duplicate → duplicate icon
  • Add before/after → plus/insert icons
  • Delete → trash icon

This would improve:

  • Visual scannability
  • Action recognition speed
  • Overall editor usability and accessibility
  • Consistency with existing Gutenberg UI patterns

The enhancement would provide a more intuitive user experience without changing the existing functionality of the menu.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions