Page MenuHomePhabricator

Allow Wikipedia Preview Wordpress plugin to let editors choose a section as a preview
Open, MediumPublic

Assigned To
Authored By
SGautam_WMF
Mar 18 2024, 7:59 AM
Referenced Files
F44995834: Sections view on mobile loading states.png
Apr 7 2024, 12:53 PM
F44995749: 04. Sections Loading states.png
Apr 7 2024, 12:53 PM
F44995408: Sections view on mobile.png
Apr 7 2024, 12:53 PM
F44995339: 04. Sections.png
Apr 7 2024, 12:53 PM
F44995165: 03. Preview gets added.png
Apr 7 2024, 12:53 PM
F44124947: Sections view on mobile loading states.png
Apr 2 2024, 6:31 AM
F44124948: 04. Sections Loading states.png
Apr 2 2024, 6:31 AM
F44124293: Article .svg
Apr 2 2024, 6:25 AM

Description

Background

Most existing and few new site owners liked the suggestion to allow them the ability to control what content appears in the preview; because they want to be able to link to different parts of the article. At Present, we allow adding summary section of an article but as part of this part we are going to explore solution to let site owners add a specific section/sub-section of an article.

Design

Initiation

01. Highlight word.png (900×1 px, 110 KB)
03. Preview gets added.png (900×1 px, 122 KB)
  • Users initiate the Wikipedia preview by highlighting text and selecting the "W" icon.
  • The Wikipedia preview popup displays the article's summary section related to the highlighted text.

New Control for Sections selection

03. Preview gets added.png (900×1 px, 122 KB)
Sections Options on mobile.png (844×390 px, 96 KB)
  • Introduce a "Sections" control within the Wikipedia preview popup, adjacent to the "Change" and "Remove" options.
  • Rename "Change" to "Topic" along with its icon from "Pencil" to "Search"
  • On mobile, integrate "Sections" within an overflow menu to conserve space and maintain a clean interface.

Modal Layout and Transition

  • The modal should maintain the width of the preview card to provide a smooth transition when opened.
  • The modal's height should be dynamically adjusted based on the content but should not exceed 80% of the viewport height.

Section Selection Modal

04. Sections.png (900×1 px, 109 KB)
Sections view on mobile.png (844×396 px, 65 KB)
  • Clicking "Sections" opens a modal displaying a list of Wikipedia article sections as menu items.
  • Each menu item includes the section title and a short preview (up to 2 lines) of the section content.
  • For long section titles, display them on two lines and truncate any overflow with an ellipsis("...")
  • Display the article title at the top of the modal, allowing it to span up to two lines. If the title exceeds this length, truncate it with an ellipsis ("...")
  • A close icon to close the model to return back to Preview popup.

Interactions within the Modal

  • Pre-select the corresponding section currently shown in the preview.
  • Users can scroll through the list of sections and tap/click on the desired section they wish to display in the preview.
  • When clicked, the "Close" icon dismisses the modal and returns the user to the Wikipedia preview popup.
  • If the user closes the modal without making a selection, the preview remains unchanged, displaying the previously selected section.
  • For desktop, include hover states for interactive elements.
  • Incorporate a scrollable interface within the modal for articles with many sections.
  • When displaying content in an RTL language, ensure that the layout and alignment of elements adapt accordingly

Section preview Loading:

04. Sections Loading states.png (900×1 px, 99 KB)
Sections view on mobile loading states.png (844×396 px, 30 KB)
  • Introduce a loading state for the section previews to set the right expectation for users while data is being fetched.
  • Spinner along with text stating "Loading sections..." to indicate an ongoing process.
  • "Close" button should remain visible and enabled throughout the loading process.
  • Users can click on the "Close" button to exit the section selection modal at any time, even during the loading state.
  • During the loading state, the section list should be displayed in a non-interactive state, preventing users from selecting a section prematurely.

Error Handling

  • If there is an error during the section loading process, display a message "Failed to load sections"
  • In case of an error state, "Close" button should remain enabled, allowing users to dismiss the modal.

Content Filtering: Automatically exclude non-relevant sections such as

  • Reference and Citations
  • External links
  • See also
  • Sections containing Tables and Charts
  • Sections containing Image Galleries
  • Infoboxes

Accessibility and Usability

Keyboard Navigation:

  • Ensure that the modal supports keyboard navigation for accessibility.
  • Allow users to navigate through the section list using the arrow keys (up and down) or the Tab key.
  • Pressing the Enter key on a focused section should instantly select that section and update the preview accordingly.
  • The "Close" button should be reachable using the Tab key and activatable with the Enter key.
  • Pressing the Escape key should close the modal, similar to clicking the "Close" button.

Design file

Note for developers: Design for this feature has been created using Wordpress components to maintain consistency and leverage existing styles and patterns.

Acceptance Criteria:
  • Site owners must be able to select specific sections for a Wikipedia article.
  • The new option "Sections" has been added to the Preview toolbar.
  • Clicking on the "Sections" option opens a modal displaying the list of available sections from the article.
  • Only one section can be selected at a time.
  • Tapping on a section in the modal instantly updates the preview with the content of the selected section.
  • The content from the selected section must be displayed accurately in the preview.
  • During the section selection process, a loading state with a spinner and the text "Loading sections..." must be visible until the content is fully loaded.
  • The "Close" button remains active during loading, allowing users to exit if necessary.
  • If there is an error during the section loading process, an error message, show "Failed to load sections".
  • The modal should support keyboard navigation, allowing users to navigate through sections using arrow keys or the Tab key, select a section with the Enter key, and close the modal with the Escape key.
Test scenarios
  • A site owner configures a preview to show a specific section of an article; the preview only includes content from that section.
  • Readers can successfully navigate from the preview to the exact section in the full Wikipedia article.
  • Error state behavior when a section is deleted.
Implementation notes

Following usability testing through Userlytics, we will analyze user feedback to identify potential improvements or adjustments needed. This process will help us identify potential improvements or adjustments needed before making it available on the WordPress plugin store.

Details

Other Assignee
SBisson

Event Timeline

Reedy renamed this task from Allow Wikipedia Preview Wordpress plugin to let editors choose a section as a preview. to Allow Wikipedia Preview Wordpress plugin to let editors choose a section as a preview.Mar 18 2024, 12:32 PM
SGautam_WMF updated the task description. (Show Details)
SGautam_WMF updated the task description. (Show Details)
PWaigi-WMF triaged this task as Medium priority.Apr 10 2024, 7:34 AM
SBisson moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
SBisson updated Other Assignee, added: SBisson.

This feature is achieved through PRs in both the core library and the plugin:

Core library PR: https://github.com/wikimedia/wikipedia-preview/pull/204
Wordpress plugin PR: https://github.com/wikimedia/wikipediapreview-wordpress/pull/120