Wp-calypso: Preview: "Edit" button expected behavior is confusing

[sixhours]

Steps to reproduce

1. Starting at URL: /view/{site}
2. It's not clear what will happen when I click "Edit". I expect it to edit the page/post/whatever I'm looking at, but it always edits the home page.

What I expected

"Edit" is just vague enough that I expected to be able to edit whatever I was seeing in the preview.

What happened instead

Instead, I was only able to edit my home page. Maybe it would help to clarify in the button copy "Edit site" or "Edit homepage", if we can't know what page the previewer is looking at.

Screenshot / Video

Viewing the "About" page, I click "Edit" in the upper right:

I'm brought to this editor, which looks nothing like what I wanted to edit:

[sunnyssr]

I would suggest to go with Edit Homepage button since the button for same action at home page ( url /home/{site} ) says Edit Homepage.

I would love to send the pull request for this one if this sounds good to you.

[davemart-in]

Maybe it would help to clarify in the button copy "Edit site" or "Edit homepage", if we can't know what page the previewer is looking at.

"Edit Homepage" sounds good to me.

I would love to send the pull request for this one if this sounds good to you.

@sunnyssr it's all yours! Let me know once you have a PR ready and I'll make sure it gets reviewed and deployed. Thanks!

[lcollette]

Is it possible to have the edit button link to the page that's currently being viewed within the preview? That feels more expected to me.

[sunnyssr]

@lcollette
Yes that's possible but that would require a way to figure out what exactly current URL refers to. It would require to figure out whether is a blog post or page.
Thanks a lot!

Update: I tried to find a way to do so but this is beyond me since it would require to change things in preview page itself rather than in calypso because that's not sending the edit url alongside pathname when url changes.

[lcollette]

Update: I tried to find a way to do so but this is beyond me since it would require to change things in preview page itself rather than in calypso because that's not sending the edit url alongside pathname when url changes.

Got it. Thanks so much for trying, @sunnyssr!! Really appreciate the effort. :)

[davemart-in]

@sunnyssr just following up to see if you're still working on this issue, or if you've moved on from it. You had mentioned:

I tried to find a way to do so but this is beyond me

and i was unsure whether that was related to Lynn's ask specifically or this whole issue. Mind clarifying when you have a chance?

Thanks!

[sunnyssr]

@davemart-in
I've already sent the pull request for this one. Right now it makes sense to show Edit homepage instead of edit because whatever url you visit inside iframe and then click Edit, it will always take you to homepage edit page.

and i was unsure whether that was related to Lynn's ask specifically or this whole issue. Mind clarifying when you have a chance?

It was specific to Lynn's ask since she was right that it would be better that on clicking edit it should take directly to the edit page of that particular preview page. This is beyond me, it is not something related to wp-calypso since it is not receiving edit url from iframe. This is only possible by making changes in preview page itself which require changes to send edit url from iframe to parent window.

[davemart-in]

I've already sent the pull request for this one.

Thanks! Sorry I missed that.

Right now it makes sense to show Edit homepage instead of edit because whatever url you visit inside iframe and then click Edit, it will always take you to homepage edit page.

Sounds smart.

@jeryj would you or @mreishus mind reviewing and then deploying this please?

[mreishus]

The change looks good to me, but I am not completely familiar with the calypso process yet, and am unsure how to proceed. I tagged the PR with "Needs Review" which I think will summon someone from the calypso team to look at it. Also tagging @jeryj for input.

[sixhours]

@mreishus 👋 I added the String Freeze tag to make sure the new string is translated in our database, and if not, it can be sent for translation. Also tagged you as a reviewer so you can review the PR and approve it; no need for someone from Calypso to check it out. :)

[sunnyssr]

@sixhours
I think translation would already be there in database since that string is being used at multiple places.

[getdave]

@davemart-in Building on the excellent work by @sunnyssr I've run some tests on the viability of adding the page target to the Edit button (eg: Edit Homepage) but it's not going to cut the mustard.

To this end I started an analysis of if it's possible to do what @lcollette suggested; namely:

Is it possible to have the edit button link to the page that's currently being viewed within the preview?

I'll post my findings here as I go:

• The preview is rendered in an iframe via the WebPreview component which is in turn rendered by the <PreviewMain> component.
• The iframe component communicates upwards via postMessage to the <PreviewMain> component whenever it's URL changes.

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/components/web-preview/content.jsx#L54

• This post message is then handled here:

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/components/web-preview/content.jsx#L116-L118

...which ultimately ends up in the updateSiteLocation callback function being called in <PreviewMain>:

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/my-sites/preview/main.jsx#L146-L153

Note that the pathname is the only data available from the iframe about which page was navigated to.

• The <PreviewMain> component is responsible for updating the "chrome" of the WebPreview (ie: around the iframe itself) including the Edit button which is handled here:

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/my-sites/preview/main.jsx#L196

• The state.editUrl is set by calling:

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/my-sites/preview/main.jsx#L131-L136

• this.props.editorURL is provided by a call to the state selector

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/state/selectors/get-editor-url.js

• When this state selector is called within <PreviewMain> we pass the Homepage post ID, which means the Edit button will _always_ be set to go to the Homepage within the editor.

https://github.com/Automattic/wp-calypso/blob/141eea097085674e0cea0772680b38ac092dc2e4/client/my-sites/preview/main.jsx#L221

The issue is that

1. The Edit button is always set to be the Homepage.
2. We don't have the necessary information to update the button in response to changes in the Preview iframe.

In regard to #2 above, the iframe postMessage does provide the pathname for the page being navigated to in the Preview. If there is a way to use that to retrieve the ID of the post which has a matching slug then we might be able to update the Edit button to link directly to editing the post. Some more insight on that here.

[davemart-in]

Thanks for the summary @getdave. Based on the amount of effort that has already gone into this issue I would say that unless we are close to wrapping things up that we might consider closing this one out as a "won't fix".

[getdave]

Based on the amount of effort that has already gone into this issue I would say that unless we are close to wrapping things up that we might consider closing this one out as a "won't fix".

I think perhaps someone might be able to get this working if they can find a way to get the post ID from the path provided by the iframe postMessage.

I tried using a selector to grab a posts by name (ie: slug) but the posts in the state don't seem to be populated when in the Preview pane.

If we can get some guidance here I think I could be doable or at least we'd be 100% clear that it isn't reasonably possible.

Update: I asked here p1598624219003400-slack-calypso-framework and <QueryPosts> was suggested.

[getdave]

For various reasons we've run out of time on this Janitor rotation to see this one through. I've provided a detailed summary above.

I would suggest that unless @davemart-in objects, it's worth the _next_ rotation giving this one more go to see if they can grab the post to be edited from the path provided by the preview iframe.

To do this please read through the context above here and here.

[davemart-in]

Our Janitorial backlog is starting to grow beyond what I'm comfortable with. I'm going to transfer this to the Ajax team's backlog @obenland.