Page MenuHomePhabricator

Gutenburg custom format - search
Open, In Progress, Needs TriagePublic

Description

Problem

While the basic Gutenburg custom format allows adding a preview without leaving the WordPress editing experience, the editor has to know the exact title of the article they want to add. For disambiguation or other reasons, article are often not named with the exact word(s) we would guess. This can cause waste of time and the impression that the concept they want to link to is not present on Wikipedia.

Solution

Add article title search/autocomplete to the article title field of the custom format form.

  • Uses prefix search to display a list of possible articles after each typed character.
  • Shows article title, description, and thumbnail.
  • Very similar to search bar on Wikipedia.
  • Typing the full title of an article has the same effect as selecting it from the list.
  • Search within article if text in search field does not match any page/article title.
Design details
General
  • Search bar is in active state whether user selects the word for preview or opens the Wikipedia Preview custom form without selecting any word.
  • Expand the height of menu based on the search results.
  • Hovering search result list will show with a Base80(#EAECF0) background.
  • Preview gets added when a user selects any of the search results.
  • Clear icon removes the typed query.
  • Scrollbar appears while search list goes past the menu size.
  • Press outside the search window to close it down.
Search
  • Show image placeholder as a thumbnail for results without lead image.
  • Exclude showing disambiguation pages.
  • Article title can go upto two lines.
  • End article description with (...) if it goes past the defined limit.
No word selectionSearching WikipediaSelecting PreviewPreview added
01. When word is not highlighted.png (1×2 px, 473 KB)
01. When word is highlighted.png (1×2 px, 528 KB)
03. Searching from the list.png (1×2 px, 520 KB)
04. Preview added.png (1×2 px, 563 KB)
Word selectedSelecting PreviewPreview added
02. Searching Wikipedia.png (1×2 px, 520 KB)
02. When word is highlighted.png (1×2 px, 529 KB)
03. When word is highlighted.png (1×2 px, 563 KB)
Figma Link

Event Timeline

Typing the full title of an article has the same effect as selecting it from the list.

What's the expected behaviour of this? Does it show the search list result, and when does it happen?

I merged the PR in order to not block another PR changing some of the same files.

can't see the search, discussion going on on slack

Jpita changed the task status from Open to In Progress.Thu, Sep 30, 7:56 AM

I found an issue :

if two preview enabled words are together, the i icon on the left one (second created) shows the one on the right (first created).

this is an edge case but can be confusing for the user.

Steps:
1-write "ASD" and wait for the tool box to show
2-bring up the wikipedia preview and search for an article and select it
3-select the "ASD" by double clicking it and select the wikipedia preview for it
4-click the i icon on the left word
ACTUAL RESULT:
5-the preview demo shows for the right word
EXPECTED RESULT:
5-the preview demo shows for the left word


@Jpita has it been fixed? or any ticket we have created to take care of this?

Overall search feature is looking great. I have made a couple of observations which could further improve it.

  • Are we excluding disambiguation pages from search results? If not, I think it's best if we do it.
Screen Shot 2021-10-11 at 3.14.43 PM.png (564×589 px, 62 KB)
  • Possibly an edge case scenario, We can move longer search queries to their left instead of overlapping with the clear icon.
Screen Shot 2021-10-11 at 3.19.40 PM.png (564×589 px, 80 KB)
  • For testing purposes, are we restricting number of search results? as I didn't see a scrollbar appearing anytime for me.

Let me know if we want a new ticket for these changes or we can include them in this one.

@Jpita has it been fixed? or any ticket we have created to take care of this?

https://phabricator.wikimedia.org/T292155

  • Are we excluding disambiguation pages from search results? If not, I think it's best if we do it.

I don't know if this is possible, the namespace 0 we use to query includes the disambiguation page. The suggested alternative solution from me T293594: [Suggestion] Show disambiguation extract in preview instead of redirect disambiguation suggested text when available

  • Possibly an edge case scenario, We can move longer search queries to their left instead of overlapping with the clear icon.

Yes, we will need to take care of this edge case.

  • For testing purposes, are we restricting number of search results? as I didn't see a scrollbar appearing anytime for me.

We limit to 5 right now, let us know the new number so we can update it.