Background
The current VisualEditor edit toolbar shows too many options on desktop, while mobile lacks several of them. This task aims to review and prioritize which actions are essential across both platforms, and define a more balanced and improved approach for desktop and mobile.
Related tasks
- T211255: [EPIC] Mobile VE toolbar improvements
- T385851: Introduce additional tools within the mobile visual editor's "+" menu
- T397748: Make editing interfaces responsive – While redesigning the edit toolbar, we should design a responsive version that allows to make the same actions on desktop and mobile
Considerations
This is how much the top 20-ish toolbar-tools get used:
| Desktop | Mobile |
Proposed solution
See prototype for reference: https://bmartinezcalvo.github.io/suggestion-mode/edit-toolbar/explorations/
Desktop
| Current behavior | Proposed changes |
On desktop, explored changes include:
- Replace the edit handle with the corresponding mode icon (eye for VisualEditor, wikitext icon for Source) to better reflect the selected mode
- Replace the menu (hamburger) icon with an ellipsis, avoiding duplication with the header menu icon
- Improve each menu structure by grouping related items with subtle dividers, making options easier to scan in menus
- Removed the ellipsis from the Publish button (from "Publish changes..." to "Publish changes") since using ellipses at the end of actions is not a good practice, even when the button is loading.
I've created this separate task to implement these changes T423169.
Mobile
As mobile currently lacks some of the options available on desktop, it involves more changes. To make progress easier and unblock iteration, each improvement will be implemented as a separate task, so they can be developed independently and gradually, based on priority and alignment. No single task should block the others. This way we will be able to move forward incrementally, validate each change, and adjust without coupling all decisions together.
I've separated them in different tasks so including extended info in each task.
Higher priority improvements
- Make the edit toolbar Responsive on mobile to be able to adapt to different screen sizes to show more actions on larger screens (T423146)
- Include the Suggestions ToggleButton (T420419)
- Replace the edit handle icon with an ellipsis (T423167)
- Replace the current Publish arrow with check (done) icon (T423160)
Follow-up improvements (that could be done in future iterations)
- Enable Redo button (just appearing after clicking on Undo) (T423231)
- Enable Text styles as drawer (T423150)
- Expand “+ Add” with more tools (T385851)
Open questions
-
1. Is it important that the suggestion mode toggle (T420419) be visible as a "top-level" tool within the toolbar?Since this proposal covers the addition either within or outside the toolbar, I've moved this decision to its task T420419
Acceptance criteria (or Done)
- Identify the most used options in the menu
- Explore new designs to simplify the options in the Toolbar
Implementation
-
Implement decided solutionThis part will be worked separately on each task shared above









