Page MenuHomePhabricator

[Task] Allow full page editing on talk pages
Closed, ResolvedPublic

Assigned To
Authored By
Tsevener
Mar 13 2023, 10:10 PM
Referenced Files
F41714755: Screenshot 2024-01-24 at 3.28.13 PM
Jan 24 2024, 9:33 PM
F41714753: Screenshot 2024-01-24 at 3.27.27 PM
Jan 24 2024, 9:33 PM
F41714761: Screenshot 2024-01-24 at 3.30.43 PM
Jan 24 2024, 9:33 PM
F41714750: Screenshot 2024-01-24 at 3.27.13 PM
Jan 24 2024, 9:33 PM
F41714759: Screenshot 2024-01-24 at 3.30.39 PM
Jan 24 2024, 9:33 PM
F41713975: Save changes.png
Jan 24 2024, 2:42 PM
F41713960: preview-Discard_edit_.png
Jan 24 2024, 2:42 PM
F41713970: IMG_3129.PNG
Jan 24 2024, 2:42 PM

Description

Follow up from full page editing spike T328591.
Dependent on work done in T331935.

This task is to update our talk pages to allow for full page editing.

Design notes

  1. Design: Add a place somewhere in our talk pages where a user can entire the full page editor flow.
  2. Design: Should any UI/copy/logic change in the existing editor when using for full talk pages? 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 what the success message should look like on the talk page after successfully publishing.
    • Note: We will be unable to determine what actually changed here, so we cannot automatically scroll to their update after publishing.

Engineering notes

Link to native wikitext editor proposal - https://docs.google.com/document/d/1WWwXCZPVWpnE7fg3KgUZMG2DxrKkh7NWFRvDV2O_oF8/edit

Note: Analytics 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 and choosing the 'Edit source' option.
    • The workflow for talk page will differ a little bit from the full page article editing workflow T331935.
  • The contributors land on the the wiki editor view after choosing the 'Edit' action.
  • 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.
  • After completing an edit, the contributors can tap on 'Next' on the full page editing view, which brings them to the 'Save changes' page. From there the contributors can preview the changes by tapping on 'Show web preview'. In addition, I am proposing to add a toast when the contributor lands on the 'Preview' page for the first time.
    • Copy of toast: 'All content is shown in simplified format.' (the wording may change)
  • When a contributor successfully publishes their edit a toast will appear that confirms that the edit has been published.
Talk pageOpen overflow menuFull page editing modeDiscard edit?Publish? Preview?Preview with toastSuccessfully published the edit
Talk page (A).png (667×376 px, 59 KB)
Talk page (B).png (667×376 px, 93 KB)
Wikitext.png (667×375 px, 67 KB)
Discard edit_.png (667×375 px, 52 KB)
Save changes.png (667×376 px, 39 KB)
Preview.png (679×396 px, 86 KB)
Published.png (667×376 px, 59 KB)

Error messages
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.
JTannerWMF subscribed.

I moved these back until we settle on entry points

Seddon renamed this task from Allow full page editing on talk pages to [Task] Allow full page editing on talk pages.Oct 3 2023, 3:10 AM

Hi @Tsevener,
Would it be possible to have the action sheet show up instead of the modal when someone tries to tap out after editing?

CurrentAction sheet
IMG_3129.PNG (1×750 px, 292 KB)
preview-Discard_edit_.png (220×123 px, 23 KB)

Sorry, my bad but could we change the style of the 'Show web preview' button to a quiet button so it is de-emphasized on the page?

Quiet button
Save changes.png (667×375 px, 40 KB)

@OTichonova 👍 Both sound doable to me. Note that the action sheet will look like a popover on iPad.

@OTichonova

I did a little bit of work lining up our watchlist button components with your components guidelines, then used that work making the quiet style in the show web preview button. Here are screenshots of the tweaks:

Watchlist onboarding secondary button (mostly unchanged):

Before:

Screenshot 2024-01-24 at 3.30.39 PM (1×559 px, 272 KB)

After:

Screenshot 2024-01-24 at 3.27.13 PM (1×559 px, 272 KB)

Watchlist empty state (matches neutral style in guidelines):

Before:

Screenshot 2024-01-24 at 3.30.43 PM (1×559 px, 219 KB)

After:

Screenshot 2024-01-24 at 3.27.27 PM (1×559 px, 219 KB)

Show web preview (quiet style):

Screenshot 2024-01-24 at 3.28.13 PM (1×559 px, 230 KB)

@OTichonova

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

ABorbaWMF subscribed.

Looks good to me on 7.4.7 (3162)

Note that this ticket prevents me from fully testing images within talk pages: https://phabricator.wikimedia.org/T329843

JTannerWMF claimed this task.