Web-stories-wp: Pre-publish Tab and Checklist MVP

[jauyong]

Feature description

The helper tool is not fully described yet (if at all), but we're assuming it will contain some kind of smart positioning of elements in a grid, perhaps with margins.

The pre-publish checklist is a list with critical and recommended idea. Easy to visually make, but complex to create. UX and product has lead on this.

Product question: Should we think about opening this up to extension early? Should other plugins be able to provide items and rules for this checklist?

Product brief

MVP requirements (for this ticket)

1. P0: A simple list of errors, should indicate where the error is found (page #) at a minimum. Bonus points if by clicking on the error it takes me into the issue itself.
2. P0: List grouped by error type, P0 is errors, the rest are P1+ and could be added over time.
3. P0: If issues exist, they should not block creators from publishing their stories
4. P0: Add badging to Pre-publish tab so creators are aware issues exist.
5. P0: Add tooltip to publish button to help raise awareness that issues exist
6. P1: Add links to existing doc and help articles (bonus)
7. P1: Add badging to dashboard for stories (both draft and published) that have publishing issues.

Figma designs MVP Final

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

1. The helper component is created (framework, not including the canvas)
2. Additional helper features are able to be added in future tickets
3. The test for missing alt text is implemented
4. I am able to see if the post is live or not
5. I am able to view the post (story)
6. I am able to copy a link to the story
7. I am able to embed my story in a newly published WordPress post
8. I am able to embed my story in a newly drafted WordPress post
9. The checklist tells me if I am missing a feature image
10. The checklist tells me if a poster image is missing
    See #50 for multi resolution check on checklist

OLD AC (Additional tickets for the Helper Tool will be created) :

1. Helper is a mode that the user can turn ON and OFF to get design guidance.
2. After helper mode is turned on, the user sees visual guidance as they create their story.
3. The Pre-publish helper is shown on the right hand side under the Checklist Panel tab.
4. The same guidances from the helper are shown in the Checklist.

Implementation brief

QA testing instructions

Demo

Changelog entry

[jauyong]

This issue is a candidate to be turned into an epic.

[jauyong]

@samitron7 is the helper tool gone and is it just the prepublish tab now?

[samitron7]

@jauyong The helper tool is not gone but not a feature we'll expose till after stable. For now we'll go with the simple pre-publish list. Just hopping on to answer questions but I added this to my queue.

[o-fernandez]

For consideration - discussion with @pbakaus:

• How should pre-publish work? If someone clicks "publish" and there are pre-publish issues, what's the interaction like? Does it just publish or does it take you to pre-publish and ask you to fix or ignore?
• video too large to display (total resolution) can't be above 4K (or iPhones/top tier Androids) won't be able to play this.

[o-fernandez]

Drafted brief waiting for reviews.

[samitron7]

Just reviewed and left comment. On UX side, we basically need a list.

"For each detected error, the checklist should make it easy to find the error by letting the user directly go to the page and element where the error is found, or allow direct fixing (e.g., if missing title allow directly adding a title)"

@omar can you confirm if we're doing the above for stable versus a pure list you can't click on. The original design supported this but I removed it.

[o-fernandez]

Confirmed that it is in scope. Moving this to the UX queue given that most feedback is addressed.

[bmattb]

@carlos-kelly to speak with @barklund on the technical feasibilty of north star

[samitron7]

@barklund @carlos-kelly Please get back to me once you guys scope out what's possible as I may need to create a stop gap design for this.

[bmattb]

@barklund / @carlos-kelly following up on this - have you spoken about this ?

[barklund]

Have no idea what's required for this one. UX is still pending.

[o-fernandez]

Discussed during call, @barklund will estimate - but pushing to be post 1.0 Stable.

We should turn this into an epic to have:

• ticket for basic tab setup
• ticket for each general bucket/type of validations (errors, warnings, guidance)

That would make it easier to estimate overall.

[choumx]

EAP feedback: a link to AMP Test tool with story URL pre-filled on dashboard or editor would be helpful. I.e. https://search.google.com/test/amp?url=<encoded_story_url>

[aecheverriam]

HI @o-fernandez and team,

Designs for the Pre-publish checklist (MVP version) are ready for your implementation.

Figma File: https://www.figma.com/file/NHHMwIfxMnz39NxqkrFb7R/Stories---Post-Stable?node-id=1684%3A0

Please let us know if you have additional questions.