Page MenuHomePhabricator

Gutenburg custom format - form
Closed, ResolvedPublic

Description

Problem

With the existing Wikipedia Preview WordPress plugin based on the detectLinks feature, editors have to navigate to Wikipedia to find the URL of the article they want to link to so they can create a hyperlink. This is costing time and hurting focus.

Solution

A Gutenburg custom format that allows adding a preview directly instead of a hyperlink. It has a form for configuring the article title.

  • Works the same as the hyperlink tool.
  • Can add a preview to the selected text.
  • Can be used without selection, will insert the article title as text.
  • The form has 1 field
    • Article title: defaults to the selected text if any
  • UI elements are localizable

Design

Preview without selectionPreview with selection
01. Basic Preview Add flow without word.png (1×2 px, 490 KB)
01. Basic Preview Add flow with word.png (1×2 px, 486 KB)

Figma Link

Event Timeline

SBisson renamed this task from Gutenburg custom format to Gutenburg custom format - form.Jun 8 2021, 7:19 PM
SBisson triaged this task as High priority.
SBisson updated the task description. (Show Details)
hueitan removed hueitan as the assignee of this task.
hueitan moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.
hueitan moved this task from Dev to Backlog on the Inuka-Team (Kanban) board.
hueitan added a subscriber: hueitan.

PR https://github.com/wikimedia/wikipediapreview-wordpress/pull/23
Remember to read the notes here, which will be changed in the next task (search form)

The PR is merged but the feature is hidden so we can still release updates to the plugin without this feature showing up until it is ready. To test it, just add this url param: wikipediapreview_gutenburg=1 when using the Gutenburg editor and the Wikipedia Preview custom format should be available.

Jpita added a subscriber: Jpita.
This comment was removed by Jpita.

@Jpita it looks like you've answered your own question. Is it still waiting for feedback on anything?

@Jpita it looks like you've answered your own question. Is it still waiting for feedback on anything?

forgot to move it forward :(

Looks good to me. For the official release, I think we can go with simple styling of the link then the current one(blue rectangle with border and info. icon).