Page MenuHomePhabricator

Gutenberg custom format - language selector
Closed, ResolvedPublic

Assigned To
Authored By
SGautam_WMF
Jul 22 2021, 10:28 AM
Referenced Files
F34750561: image.png
Nov 16 2021, 7:33 PM
F34749578: Screen Shot 2021-11-16 at 10.21.19 AM.png
Nov 16 2021, 5:10 AM
F34749580: Focus on search bar.webm
Nov 16 2021, 5:10 AM
F34749582: Wikipedia Preview ESC key.webm
Nov 16 2021, 5:10 AM
F34710285: Kapture 2021-10-25 at 14.39.01.webm
Oct 25 2021, 1:46 PM
F34710274: wp-preview-hebrew.webm
Oct 25 2021, 1:36 PM
F34698352: image.png
Oct 19 2021, 7:20 PM
F34660343: Language selector search.png
Sep 28 2021, 10:55 AM

Description

Description

This ticket explores the inclusion of a language selector for Gutenberg custom form. A language selector on the form can be helpful when an editor wishes to attach a preview in a language other than the blogpost language.

Design details
Language selector
01 Language selector.png (932×1 px, 174 KB)
Language selector
Language selector.png (932×1 px, 164 KB)
Language selection
Language selector selecting language.png (932×1 px, 166 KB)
Language search
Language selector search.png (932×1 px, 150 KB)
No results found
Language selector no results found.png (932×1 px, 149 KB)
  • The language selector opens after the user clicks on the dropdown button.
  • The user can either type a search query that filters the list of languages shown or select the one from the list.
  • Clicking on a language from the list completes the selection. Closing the selector automatically and updating the Wiki to search .
  • The custom form closes when taping outside the selector, pressing the "esc" key, or with a close action available. This cancels the selection.
  • The search box gets the input focus automatically when the selector is opened.
  • User input filters the list of languages based on prefix search as the user types.

Design file link

Event Timeline

@SGautam_WMF it would be a good time to start designing this.

This is a good example of an article that needs to preview from both English and Spanish Wikipedia.

Question: If user select the RTL language, should the Popover interface RTL too?

Regarding the birth of this component:

image.png (882×3 px, 359 KB)

Jpita added a subscriber: Jpita.

I'm seeing 2 weird behaviours:

  • if I search for "hebrew" language, no results appear
  • if I select hebrew language from searching "he" if there's no results, the language selector goes back to the previous language automatically, confusing the user

search on wikipedia website

if I select hebrew language from searching "he" if there's no results, the language selector goes back to the previous language automatically, confusing the user

Not able to replicate.

if I search for "hebrew" language, no results appear

Agree that searching for localized names is what we should aim for. I was talking to Amir and learned that CLDR is the way to go for localized names. The language-data we are now using does not include localized names and there doesn't seem to be plans to include it. There is a mediawiki extension for CLDR support (hence the video of it working in wikipedia), but so far no Node.js solution.

I think we should just create a new ticket.

@eamedina This is looking good, sharing my observations.

  • Can we reduce the spacing here?

Screen Shot 2021-11-16 at 10.21.19 AM.png (1×2 px, 221 KB)

  • How are we defining the default list of languages?
  • Can we bring back the focus on the search bar when we close the language selector?

  • Not sure if you could replicate this behavior, but I noticed the position of the custom form changes when you close it using the "ESC" key.

Can we reduce the spacing here?

Sadly this is surprisingly non-trivial but let me see what I can do

How are we defining the default list of languages?

It's just a hard-coded list, let me know if you'd like to update it to specific languages

Bringing this back to dev to look at all your feedback

Can we reduce the spacing here?

@SGautam_WMF I figured out a way to set a specific height and have set it to 392px as specified in the Figma link.

image.png (864×1 px, 480 KB)

Can we bring back the focus on the search bar when we close the language selector?

Fixed this too.

Not sure if you could replicate this behavior, but I noticed the position of the custom form changes when you close it using the "ESC" key.

This is a good find, looks like some of the keyboard controls messes up the anchoring. I have created T295803 for this issue, there's a couple of ways to trigger it and it doesn't seem to be related to the language selector itself (more info within new ticket).

Feel free to take a look in advance if you wish, the branch is T287146-follow-up. Moving this to code review in the meantime.

https://github.com/wikimedia/wikipediapreview-wordpress/pull/53

The follow-up PR is merged