## Background
The current Edit Toolbar displays many options at the top level, which makes it feel crowded, especially on smaller desktop screens. Due to this crowded Toolbar, some of the options behave different depending on the screen size, e.g. "Insert" uses the icon-only version "+" when resizing, and "Publish changes..." is changed to "Publish...". We should be as much consistent as possible with these options, at least in the same device.
This task is to review and prioritize the toolbar elements, deciding which actions should remain visible and which can be grouped under a menu, to create a cleaner and more simplified editing experience.
{F65697448}
Some of the options we could reevaluate are:
- **Warning icon:** it's used for any page notices for the current page, but we could find a better place for that. Also, this warning icon in the toolbar is competing with the Edit Check warning icons.
- **Link:** Do we really need to have an option in the toolbar for link in desktop?`VisualEditor` edit toolbar shows too many options on desktop, Maybe it could be included within the "Insert" menu.
- **Special characters:** same,while mobile lacks several of them. do users really need this option visible in the toolbar or could it be within the "Insert" menu?
- **Publish button:** Using ellipses at the end of actions (Publish changes...) is not a good practice (even when the button is loading) and we don't use ellipses to communicate actions that are not loading.This task aims to review and prioritize which actions are essential across both platforms, I would rephrase to "Publish changes" or simply "Publish"and define a more balanced and improved approach for desktop and mobile.
##### Related tasks
- {T211255}
- {T385851}
- {T397748} – 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: notably, link is used only slightly less than “save” itself.
{F65697484}| {F75934352} | {F75934366} |
| Desktop | Mobile |
---
### Possibleroposed solutions (WIP)
| [[ https://www.figma.com/design/tBiewPcpTndfDgihuyu4Cf/Edit-check---B%C3%A1rbara?node-id=989-64272&t=GSuF2jSs4lGhouwG-11 | Design proposals ]] |See prototype for reference: https://bmartinezcalvo.github.io/suggestion-mode/edit-toolbar/explorations/
##### Desktop
| {F715961775858133} | {F65697509} |75858092} |
| Op.1: Reorganize options and move notice (warning) to another place | Op.2: Place options as a left menu, rename {nav Cite} to {nav Reference}, and replace the warning icon with `iconFeedback`Current behavior | Proposed changes |
##### MobileOn desktop, explored changes include:
1. Replace the {nav edit handle} with the corresponding mode icon (eye for VisualEditor, wikitext icon for Source) to better reflect the selected mode
2. Replace the {nav menu} (hamburger) icon with an ellipsis, avoiding duplication with the header menu icon
3. Improve each menu structure by grouping related items with subtle dividers, making options easier to scan in menus
4. 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.
| {F71596153} | {F71596158}|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
{F75858781}
- Make the edit toolbar Responsive on mobile to be able to adapt to different screen sizes to show more actions on larger screens (T423146)
| Op.1: Group Link + Cite within an {nav Add} menu | Op.2: Same as Op.1, making buttons 44px to place Undo + Redo, and grouping VE + Source editing + Other options within an {nav More options} (ellipsis) menu |- 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)
##### Other options{F75858795}
//We could explore other options by combining Option 1 and Option 2.//- Enable Redo button (just appearing after clicking on Undo) (T423231)
- Enable Text styles as drawer (T423150)
- Expand “+ Add” with more tools (T385851)
### Open questions
[ ] 1x] ~~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)
**Design**
[[x] Identify the most used options in the menu
[x] Explore new designs to simplify the options in the Toolbar and decide on the best approach (desktop + mobile)
**Implementation**
[] ~~Implement decided solutiontion~~This part will be worked separately on each task shared above