Page MenuHomePhabricator

Gutenburg custom format - preview
Closed, ResolvedPublic

Assigned To
Authored By
SBisson
Jun 8 2021, 7:47 PM
Referenced Files
F34642061: image.png
Sep 13 2021, 5:26 PM
F34557452: 01. Custom format preview.png
Jul 20 2021, 11:27 AM
F34557454: 03. Custom format preview RTL.png
Jul 20 2021, 11:27 AM
F34557453: 02. Custom format preview hover.png
Jul 20 2021, 11:27 AM

Description

Problem

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.

Solution

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 (2,944×1,864 px, 557 KB)
02. Custom format preview hover.png (2,944×1,864 px, 558 KB)
03. Custom format preview RTL.png (2,944×1,864 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 (569×477 px, 76 KB)

Jpita subscribed.

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.