Page MenuHomePhabricator

Create space for additional editing tools within the mobile visual editor toolbar
Closed, ResolvedPublic

Description

This task involves the work of creating a space within the mobile visual editor's editing toolbar where additional tools can live.

While generically useful, this work is being prioritized in this moment to offer people the ability to insert functions within Wikipedia articles (T376839).

Requirements

Within the mobile visual editor's toolbar...

  • Introduce a new + menu item that, when tapped, will show the following tool(s) [for now]:
    • Add citation
    • Insert function
  • Locate this new + menu next to the existing ✏️ editing mode switcher.
    • //This means the order of the tools will be as follows (left to right): Exit editor, undo, text formatting, link, +, switch editing mode, publish

Two notes about the above:

  1. Abstract Wikipedia is assuming responsibility for adding the Insert function within the + menu
  2. We will decide what additional tools to introduce within the + menu we're introducing here in T385851

Patch demo

Open questions

  • 1. Which of the existing four editing tools (see below) will be moved within the new menu this ticket will introduce?
    • To start, we'll move the Add link tool within the + menu item that will take its place
    • Note: we will answer this question in T376839. Rather than blocking an initial implementation on the completion of T376839, we're going to instead use this data to [potentially] adjust the proof of concept we're building before it's completed.
  • 2.What icon will we use in the editing toolbar to represent this new menu?
    • We'll use the same + that is used on desktop for the same purpose://
      • Screenshot 2024-12-18 at 14.55.18.png (1,206×976 px, 143 KB)
  • 3. What – if any – additional tools beyond Insert function and the tool we decide to hide in "1." will we add to the menu this ticket will introduce?
    • We're addressing this question in T385851

Context

At present, four tools are available within the mobile visual editor's editing toolbar excluding the meta/navigational actions (X, Switch editing mode, and ):

Current state (mobile)
Screenshot 2024-12-18 at 14.49.47.png (712×1,552 px, 376 KB)
Tools: Undo, Text formatting, Add link, Add citation

Details

Related Objects

Event Timeline

With edit check pushing references at pre-save, might it be better to move Cite into the dropdown than Link?

Change #1114761 had a related patch set uploaded (by Zoe; author: Zoe):

[mediawiki/extensions/VisualEditor@master] Creates a dropdown menu from which additional tools can be added

https://gerrit.wikimedia.org/r/1114761

Nice, @zoe!

Might it be possible to limit the width of the + menu, similar to what's done for the text formatting list?

Current widthDesired width
Screenshot 2025-01-28 at 13.35.00.png (666×1,400 px, 287 KB)
Screenshot 2025-01-28 at 13.34.56.png (678×1,414 px, 286 KB)

@ppelberg I'm having trouble reproing this, which platform are you on here?

I think this is a bug in the VE positioning code, rather than something in this change.

I was able to repro this after setting my window width to 442 pixels or fewer, which is why this shows up on mobile but not in a regular browser window.

I think that this is a bug in the toolbar rather than in any setting for the new entry. As an example, if I switch the two elements around, the bug moves to the style menu if it appears after the new menu.

Screenshot 2025-02-03 at 14.50.13.png (996×466 px, 28 KB)

Screenshot 2025-02-03 at 14.50.10.png (1,004×678 px, 38 KB)

For now I've created https://phabricator.wikimedia.org/T385507 to continue this investigation.

Updating requirements to match decision the Editing Team converged on offline today and is now documented in T376839#10585519.

Per offline discussion, we're going to mark this task as resolved. Work will continue in T385851.

Change #1114761 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Add insert menu to MobileArticleTarget

https://gerrit.wikimedia.org/r/1114761

Test wiki on Patch demo by Zoe-WMF using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/9ead6a16f1/w/

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/6282b36ef4/w/