Wp-calypso: Site preview: Link to customizer

[johnHackworth]

When the user clicks on "preview" and we open the preview of the site in a modal, let's add a "edit your header" button in the top bar of the modal that links to the customizer.

Also, if possible, let's try to make the "close" button of the customizer to return to editing the front page if the user comes from there.

Implementation

We'll have to modify https://github.com/Automattic/wp-calypso/blob/b25ff2d/client/components/web-preview/toolbar.jsx

The header tab in the Customizer can be opened by linking to

https://wordpress.com/customize/identity/{siteSlug}

Like we do here.

We should probably ask design about their take on where the link should sit and how it should behave responsively.

[ramonjd]

Just checking, is this for Gutenboarding-only sites @johnHackworth ?

[johnHackworth]

Nope, this is a problem for every user right now. So let's try to help everyone :)

[ramonjd]

Another idea would be to add an "Edit menu" item too. I think it's a pain point for our support team. No one really knows how or where to edit their menus. :)

[ramonjd]

I haven't yet tested, but it might be the case that the user cannot use the Customizer if they haven't verified their email address. See: https://github.com/Automattic/wp-calypso/pull/13017

It might be only for menus and not the header though.

Getting the menu Customizer url still takes this into account: https://github.com/Automattic/wp-calypso/blob/b25ff2d/client/state/selectors/get-menus-url.js

[roo2]

I like @ramonjd's idea of having a link to editing the menu as well as editing the header, what do you think about that @johnHackworth ?

This is what it might look like with just the link to edit the header:

[johnHackworth]

I think having just the header is ok! most of the time that's what the user wants to modify first ... once they are in the customizer for the first time, they probably can reach everything else themselves!

[joanrho]

@johnHackworth @ramonjd @simison There's no specific “Edit Header” section in Customizer, however there are sections for Site Identity, Menus, and Widgets. This is what Customizer currently looks like:

Given that, I'd suggest adding two separate “Edit Site Identity” and “Edit Menus” buttons to the top of the "Preview" pane that are clearer about what users are able to edit. Here's a mock of that idea where I've moved over the device preview dropdown to the right next to the "View site" button, and placed the Edit buttons on the left to group them better by function:

The "Edit Site Identity" button should take users directly to the Site Identity submenu of Customizer:

And the "Edit Menus" button should take users directly to the Primary Menu submenu:

Closing out of Customizer should return users back to the Preview pane in the Editor.

[shaunandrews]

I think the customizer's default view is actually fairly friendly; The direct-manipulation icons are helpful, and the labels you see by default aren't _too_ bad.

With that in mind, and considering the existing complexity for the preview modal (there's already so much stuff on the screen here), I'd be in favor of a single, more general button. Something like "Edit site design" rather than two buttons.

[simison]

if possible, let's try to make the "close" button of the customizer to return to editing the front page if the user comes from there.

Yep, it's possible. Customizer can take in these URL args:

• url: the preview page/post
• return: where closing customizer should return you to
• autofocus[section]: if some customizer section should be pre-opened. It does it with nice animation so the context of what just happened isn't completely lost, and people would have some chances of understanding what happens if they click "back to the previous section" in Customizer.

[jordesign]

I think the customizer's default view is actually fairly friendly; The direct-manipulation icons are helpful, and the labels you see by default aren't too bad.

I'm inclined to agree with this. On arrival at the Custromizer it is relatively easy understand and select:

• Site Identity
• Menus