Page MenuHomePhabricator

[stretch] Show multiple languages' renderings under each other for comparison
Open, LowPublic

Description

Description

Summary
Add a second preview block below the current Abstract preview so users can compare the same content in two languages. The design should allow adding more preview blocks with language selectors in the future.

Context
The Abstract view already has a single <wl-abstract-preview> with a language selector. This task adds one extra preview block under it and defines which language each block uses. The implementation should treat previews as a list of preview blocks (not hardcoded "first" and "second") so that more blocks can be added later without a large refactor.

Behaviour

  • Preview blocks (list of N blocks)
    • The preview area shows one or more preview blocks stacked vertically, each with:
      • Its own language selector ({{{wl-z-object-selector}}}).
      • Its own preview language state (so each block can be changed independently).
    • For the first block: default language = user's language ({{{getUserLangZid}}}).
    • For the second block: default language = next language in the fallback chain after the first block's language; if no next, use English unless the first is English (then hide the second block). Fallback chain from {{{getFallbackLanguageZids}}} ({{{languages.js}}}).
    • Future blocks (N ≥ 3): The data model and UI should support adding more blocks later (e.g. same rules for "next in fallback" or a configurable list of default languages). This task only implements 2 blocks;
    • Language exclusion: Each preview block's language selector must exclude all languages currently selected in the other preview blocks (e.g. if block 0 has Dutch selected, block 1's selector excludes Dutch; if block 1 has English selected, block 0's selector excludes English). This ensures no two blocks show the same language. For N blocks, each block excludes languages from all other blocks.
  • When to show the second block
    • If the first block is not English: show the second block (default: next in fallback, or English if no fallback).
    • If the first block is English and there is no next in fallback: do not show the second block.
  • Placement
    • Preview blocks are rendered one below the other (e.g. in {{{Abstract.vue}}} or a wrapper), so they can be compared (stacked).

Acceptance criteria

  • At least two preview blocks: When a qid is selected, the Abstract view shows at least two preview blocks (when the second is not hidden). The first is the existing preview (with language selector); the second is an additional preview below it, also with a language selector.
  • First block = user language: The first preview defaults to the user's language ({{{getUserLangZid}}}). Its language selector allows changing the first preview's language.
  • Second block default = next in fallback (or English): When the first block's language has another language in the fallback chain, the second block defaults to that next language. When there is no next and the first is not English, the second defaults to English (Z1002). When the first is English and there is no next, the second block is not shown.
  • Second block has language selector: The second preview block has its own language selector; users can change the second preview's language independently of the first.
  • Extensible for more blocks: The implementation uses a list or index-based model for preview languages, so it easily extensible
  • Extensible language exclusion: The language exclusion logic works for N blocks (each block excludes languages from all other blocks), not just hardcoded for 2 blocks.
  • Correct rendering: Each block renders the same abstract content in its own language. Fragment cache/API usage respects the language per block.
  • UI clarity: Each block is clearly labeled with the language it is showing (e.g. "Preview in English") so users can compare.

Implementation Details

  • We need to fetch language zids from the fallback chain codes before the component is loaded. (see COW doc)

Event Timeline

DSmit-WMF changed the task status from Open to In Progress.Feb 12 2026, 4:14 PM
DSmit-WMF claimed this task.
DSmit-WMF updated the task description. (Show Details)

Example:

Screenshot 2026-02-13 at 13.47.33.png (1×2 px, 257 KB)
french as user language
Screenshot 2026-02-13 at 13.48.21.png (1×2 px, 301 KB)
تونسي as user language
Screenshot 2026-02-13 at 13.49.29.png (1×2 px, 323 KB)
Portugese Brazil as user language

Change #1239344 had a related patch set uploaded (by Daphne Smit; author: Daphne Smit):

[mediawiki/extensions/WikiLambda@master] Abstract preview: 2 language blocks using fallback language

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

I'm detaching this from the scope of work for this Quarter, as I don't think working on this stretch goal is a good focus right now.

Change #1239344 abandoned by Daphne Smit:

[mediawiki/extensions/WikiLambda@master] Abstract preview: 2 language blocks using fallback language

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

DSantamaria changed the task status from In Progress to Open.Tue, Apr 14, 12:50 PM