Page MenuHomePhabricator

Gutenburg custom format - preview
Closed, ResolvedPublic



With the basic Gutenburg custom format, and even with the search feature, the only way for an editor to be sure that the preview is truly appropriate to the article they are currently writing is to switch to the article view mode. This forces them to break their flow or batch a number of previews to validate later. Both options are suboptimal.


Make the custom format form exist in two modes so that the editors can see exactly the preview their readers will see when they read their site.

The modes are:

  1. Edit mode: this is the form as described in tasks(T279547)
  2. View mode: this is literally the Wikipedia Preview popup with the addition of a "edit" button to go back to the edit mode
  • When first adding a preview, with or without selected text, the form is in edit mode
  • When clicking on an existing preview target, the form is in view mode
Design details
01. Custom format preview.png (1×2 px, 557 KB)
02. Custom format preview hover.png (1×2 px, 558 KB)
03. Custom format preview RTL.png (1×2 px, 558 KB)
  • Show preview with two controls(change, remove).
  • Position control on the center of the preview card.
  • Selection of "change" opens the preview in editing mode.
  • Selection of "remove" discard the preview for highlighted word.
  • Hovering controls will show with a Base20(#54595d) background.
  • For RTL, change the position of the controls.

Figma link

Event Timeline

one styling question asked on GitHub -- link

When the Popover doesn't have enough space to show, what can we do to make it looks nice in this case?

image.png (477×569 px, 76 KB)

Jpita added a subscriber: Jpita.

it seems that clicking on the i icon doesn't really do anything while editing, only clicking the actual word brings up the preview demo.

is this ok or needs fixing?

is this ok or needs fixing?

We do the fix in another ticket.