Page MenuHomePhabricator

[Task] Entry flow for full page editing on article
Closed, ResolvedPublic

Assigned To
Authored By
Tsevener
Mar 13 2023, 9:55 PM
Referenced Files
F41817978: IMG_5862.PNG
Feb 8 2024, 7:02 PM
F41817977: IMG_0599.PNG
Feb 8 2024, 7:02 PM
F41817976: IMG_0597.PNG
Feb 8 2024, 7:02 PM
F41817975: IMG_0596.PNG
Feb 8 2024, 7:02 PM
F41817974: IMG_0598.PNG
Feb 8 2024, 7:02 PM
F41714608: Screenshot 2024-01-24 at 2.02.11 PM
Jan 24 2024, 8:08 PM
F41714607: Screenshot 2024-01-24 at 2.02.44 PM
Jan 24 2024, 8:08 PM
F41714454: Screenshot 2024-01-24 at 12.42.19 PM
Jan 24 2024, 6:43 PM

Description

Follow up from full page editing spike: T328591

This task is to update our article view to allow for full page editing.

Design notes

  1. Design: Add a place somewhere in our article view where a user can enter the entire the full page editor flow.
  2. Design: Should any UI/copy/logic change in the existing editor when using in full-page mode? This includes any changes needed on initial modals (onboarding, edit notices, blocked messages), the standard flow screens (wikitext editor > preview > save screens), error messages when attempting to publish, and success message on article after successfully publishing.
  3. Design: What happens when a user highlights article text and chooses "Edit" from the context menu? Does that continue to push to the section editor or the full page editor?

Engineering notes

TBD - Will link to native editor proposal.

Note: Analytics work will be handled in a separate task (T331937).

Designs

Link to Figma here (make sure to choose the 'Full page editing' from 'Pages' in the top left corner of Figma)

Comments:

  • Full page editing will be accessed either by tapping the overflow menu from the tool bar and choosing the last option 'Edit'.
    • The workflow for talk page will differ a little bit from the full page talk page editing workflow T331936.
  • We will be keeping the flow as it is with the 'Preview'.
  • When the contributor tries to go back to the talk page screen from the editor view without publishing an action sheet will be displayed (similar to the one displayed when writing a comment/topic in talk pages) asking if the want to discard edit or keep editing.
  • When a contributor successfully publishes their edit a toast will appear that confirms that the edit has been published.

What happens when a user highlights article text and chooses "Edit" from the context menu? Does that continue to push to the section editor or the full page editor?

  • In this case the full page editor should open. We are not sure if the editor would want to edit multiple sections (if they do, then it provides a smoother experience with the full page editor).
Updated tool barOverflow menuFull page editing modeDiscard edit?PreviewSave changes?Successfully published the edit
Overflow menu.png (667×375 px, 200 KB)
Menu opened.png (667×375 px, 220 KB)
Wikitext.png (667×375 px, 67 KB)
Discard edit_.png (667×375 px, 52 KB)
Preview.png (667×375 px, 272 KB)
Save changes.png (667×375 px, 37 KB)
Article page-1.png (667×375 px, 195 KB)

Error messages same as the messaging for talk page full page editing T331936
The errors are similarly displayed as the ones found in T312314. Examples below.

  • Only the copy of 'Unable to publish comment due to no internet connection' changes a little bit.
    • Copy:
      • Title: Unable to publish your edit. 

      • Text: Please check your internet connection.
      • Button: Go to Settings
Unable to publish comment due to no internet connectionServer errorNo internet connection
Lost internet connection while trying to publish.png (672×395 px, 42 KB)
Server error.png (667×375 px, 67 KB)
No internet connection.png (667×375 px, 62 KB)

Event Timeline

LGoto triaged this task as Medium priority.Mar 14 2023, 6:08 PM
LGoto moved this task from Needs Triage to Product Backlog on the Wikipedia-iOS-App-Backlog board.

Given the resource constraints we face for Q1 and Q2 there is a pressing need for the engineering work to pick up on this fairly soon. In terms of kicking that work off, I'd like to set an expectation following a discussion between the various apps managers that we'd like to lock in the current scope and have any further design changes for the initial implementation be limited limited to color, typography and icon updates. If there are any flow changes or additional features to be proposed, that should go to product and engineering for discussion and estimation.

Seddon renamed this task from Allow full page editing on article to [Task] Entry flow for full page editing on article.Oct 3 2023, 2:02 AM

@OTichonova We are nearing the end of native editor. Can we confirm final designs for this entry point? Thanks!

@OTichonova In the interest of time, would it be okay to leave the existing internet connection error handling on the Publish page? It looks like this:

Screenshot 2024-01-22 at 4.24.37 PM.jpeg (2×1 px, 524 KB)

OTichonova added a subscriber: JTannerWMF.

Hi @Tsevener!

We are nearing the end of native editor. Can we confirm final designs for this entry point? Thanks!

Keeping the entry point from the overflow menu from the toolbar.
@JTannerWMF

In the interest of time, would it be okay to leave the existing internet connection error handling on the Publish page?

Sounds good to me.

Hi @Tsevener,
Very exciting changes! Some minor comments.

  1. T331936#9485275

Similar comment about action sheet rather than the model when people try to tap out after editing (without publishing).

CurrentAction sheet
IMG_3129.PNG (1×750 px, 292 KB)
preview-Discard_edit_.png (220×123 px, 23 KB)
  1. Small copy update, can it say 'Edit source' rather than edit article, sorry didn't check the talk page ticket before updating the screen yesterday and it would be good to have he copy consistent.
Updated copy
Menu opened.png (667×375 px, 220 KB)
  1. I had a hard time tapping out in the article and talk page editor (had to tap the 'x' multiple times to leave).

@OTichonova would it be okay if I use an SFSymbol for the close icon? The tap area is much better for that. I will make an experimental build for you to test out before my EOD.

Screenshot 2024-01-24 at 12.42.14 PM (1×554 px, 347 KB)

Screenshot 2024-01-24 at 12.42.19 PM (1×554 px, 353 KB)

@OTichonova

Here's a couple of screenshots of the action sheet. Note I'm setting the "keep editing" button as a cancel style, which bolds and separates it on iPhone. On iPad it removes it entirely, since popovers can be dismissed by tapping elsewhere. If you want I could use a default style which would unbold and force the button to remain on both.

Screenshot 2024-01-24 at 2.02.44 PM (1×554 px, 342 KB)

Screenshot 2024-01-24 at 2.02.11 PM (1×812 px, 580 KB)

@OTichonova

Kicked off a new experimental build with these changes (#73).

Hi @Tsevener, thank you for screenshots!
The point of the sheet is to inform the editor that their edit will not be saved, so it does that in both cases. I think we can keep the sheet/popover as you have it above.
Who knows, maybe one day we could add a 'Save draft' option to it for offline editing.

ABorbaWMF subscribed.

Looks good to me on 7.4.7 (3162), however, I am not seeing Internet Connection issues with the link to settings. Testing on iPhone 12 on iOS 17.4 and iPad Pro 12.9 on iOS 17.4.

IMG_0598.PNG (2×1 px, 120 KB)

IMG_0596.PNG (2×1 px, 151 KB)

IMG_0597.PNG (2×1 px, 109 KB)

IMG_0599.PNG (2×1 px, 109 KB)

IMG_5862.PNG (2×1 px, 164 KB)

@ABorbaWMF Sorry this was a bit buried in the comments, but I asked if we could use our existing stuff here, currently we don't display a Settings link in our internet connection error banners. - https://phabricator.wikimedia.org/T331935#9479112.

JTannerWMF claimed this task.