Override the backlink on the Live Preview

[okmttdhr]

Related to
#80595
WordPress/gutenberg#54174

Proposed Changes

Override the Back on the Live Preview with the 'core/edit-site' store. This PR solves #80595 and works after WordPress/gutenberg#54174.

Testing Instructions

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• https://wpcalypso.wordpress.com/devdocs/docs/testing/index.md for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-ajp-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-79956

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-79956&env=jetpack

[matticbot]

This PR modifies the release build for wpcom-block-editor

To test your changes on WordPress.com, run install-plugin.sh wpcom-block-editor add/themePreviewBackLink on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-l4k-p2

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[arthur791004]

We have to do it on Jetpack. See the site_editor_dashboard_link function and the block_editor_settings_all filter on atomic and wpcom

[okmttdhr]

@arthur791004
I'm a little confused because there are a few places in wpcom-block-editor where we're making changes to __experimentalDashboardLink.

wp-calypso/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js

Line 1027 in 288df6b

const dashboardLink = select( 'core/edit-site' )?.getSettings?.().__experimentalDashboardLink;

wp-calypso/apps/wpcom-block-editor/src/wpcom/features/site-editor-env-consistency.js

Line 20 in 288df6b

const backButtonUrl = siteEditor.getSettings().__experimentalDashboardLink;

Maybe we should move these into Jetpack?

[arthur791004]

wp-calypso/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js

I guess we might not need this for the site editor since we have un-iframed the site editor. But maybe page/post editor still relies on it.

wp-calypso/apps/wpcom-block-editor/src/wpcom/features/site-editor-env-consistency.js

This one seems for dev/test env to keep the consistency of the origin. I think Jetpack doesn't know that so we might still need to override the Back URL on the Live Preview 🤔 But the goal of this is to replace the origin instead of the destination.

[okmttdhr]

wp-calypso/apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js
I guess we might not need this for the site editor since we have un-iframed the site editor. But maybe page/post editor still relies on it.

wp-calypso/apps/wpcom-block-editor/src/wpcom/features/site-editor-env-consistency.js
This one seems for dev/test env to keep the consistency of the origin. I think Jetpack doesn't know that so we might still need to override the Back URL on the Live Preview 🤔 But the goal of this is to replace the origin instead of the destination.

Thanks for your explanation, @arthur791004 👍

Let's move this PR (and site-editor-env-consistency as well, in my opinion) into Jetpack!

[okmttdhr]

I've thought about this again, and I don't think the backlink for Live Preview should be changed in Jetpack (or in jetpack/modules/masterbar/admin-menu /class-admin-menu.php at least), because, looking at this comment, the backlink in the Site Editor does not belong to the admin menu.

And I use __experimentalThemePreviewBackLink instead of __experimentalDashboardLink as described in WordPress/gutenberg#54174, so the changes only affect the Site Editor, not the admin menu.

I had thought about implementing it in jetpack-mu-wpcom, but in that case, it would be better to migrate site-editor-env-consistency.js along with it for coherence.

Any thoughts, @arthur791004?

[arthur791004]

because, looking at this comment, the backlink in the Site Editor does not belong to the admin menu.

I think the important part is it belongs here because it's part of changing wp-admin links to their wp.com equivalents. The Site Editor is part of the wp-admin since the URL is /wp-admin/site-editor.php, and that settings are only used by the Site Editor as well ($settings, block_editor_settings_all)

it would be better to migrate site-editor-env-consistency.js along with it for coherence.

I think this is only for the consistency of the origin instead of the link. The better way might be to migrate them to jetpack-mu-wpcom as you mentioned 🙂

We have to avoid adding more and more features to wpcom-block-editor or ETK plugin since we have the plan to migrate them to Jetpack. See p9oQ9f-Ht-p2 and p58i-dox-p2

[okmttdhr]

Thanks for your comment again, @arthur791004, and that all makes sense to me.

• I'll raise a PR to plugins/jetpack.
• And it'd be nice if I can move site-editor-env-consistency.js into packages/jetpack-mu-wpcom.
• After looking at p9oQ9f-Ht-p2, I started to feel tracking implementation (e.g. Add sidebar click events on the Site Editor #80953) should be migrated into Jetpack as well.