Content editing in site editor guidance

[SaxonF]

What problem does this address?

Provide some early guidance for users who are yet to experience content editing in the site editor.

What is your proposed solution?

Re-use the welcome modal in two different scenarios.

A user first hits the site editor with a page in context (e.g. after clicking a page in the pages sidebar)

welcome-page.mov

A user first switches to editing a template from a page

welcome-template.mov

The video files are attached below. We may need to convert these to gif .

toolbar-back.mp4

sidebar-demo.mp4

@WordPress/gutenberg-design

[jasmussen]

Nice one. Remember to choose the modern color scheme for demo work, though:

I wonder, can we/should we be more abstract in the representation, a la the welcome guide?

Screenshots and video age extremely quickly given how much UI work we still have to do, and if we can abstract this down, it'll likely have a longer shelf life.

[jameskoster]

I'd +1 the notion for a more abstract graphic – it'll be simpler to maintain. Using the Guide component probably makes sense too.

[richtabor]

I wonder, can we/should we be more abstract in the representation, a la the welcome guide?

How were this original ones made?

[SaxonF]

The thought was that since this is such a significant change and we don't currently have a tour component a more literal representation would be better in the short term. Long term we can change.

[noisysocks]

Will we want this in 6.3?

[SaxonF]

@noisysocks Ideally yes

[noisysocks]

Cool. Remove the Needs Design Feedback label when you're ready for me to start building it out. Since it's onboarding for a feature that's already landing in 6.3 it's fine to add this during the beta period.

[jasmussen]

I think we can go with a GIF/screenshot for now (though we want to be mindful of the compression), and then ticket a followup to replace it with an abstracted version later on.

That said, I would call it a blocker that it's using the classic WordPress blue. The imagery should use the modern colors.

[SaxonF]

Thanks @jasmussen, I'll update GIF tomorrow with modern theme enabled. @noisysocks you should be free to work on this now when you have a moment.

[priethor]

Related Trac ticket