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

• 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

• 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

• 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:

• 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.