Automattic / Automattic/wp-calypso

Launch: cleaner way of redirecting the Calypso window from within the block editor

Open
#47,762 2 comments 0 reactions 0 assignees View on GitHub
[Pri] Normal [Status] Blocked / Hold Enhancement Focused Launch
Dominant language
TypeScript
Stars
12.6k
Forks
2k
Avg merge
1d 17h
Merged PRs (30d)
538

Description

The Focused Launch flow, included in the `@automattic/launch` package, needs to be imported both directly into Calypso and in the iframed block editor.

The `LaunchContext` is used to abstract some of the differences that those different environments have. One of the properties available on the `LaunchContext` is the [`redirectTo` function](https://github.com/Automattic/wp-calypso/blob/trunk/packages/launch/src/context.ts#L15).

When invoked from within the context of the `iframe`, at the moment [the `redirectTo` function specified by Editing Toolkit is a bit hacky](https://github.com/Automattic/wp-calypso/blob/trunk/apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/attach-focused-launch.tsx#L35), as it uses `window.top.location` and hardcodes the `https://wordpress.com` origin.

We should rewrite this functionality in a cleaner way, which would also allow us to avoid hardcoding the origin.

This is one way of implementing these changes:

- [ ] we should define a hook (from the `@wordpress/hooks` library) in `apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js`. The hook callback would use the `MessageChannel` APIs to communicate to the `iframe`'s parent window
- [ ] In `client/gutenberg/editor/calypsoify-iframe.tsx`, we should listen for this newly defined `MessageChannel` action. In the callback, we should be able to `window.location.href = path` (no need to access `window.top` or to specify the origin)
- [ ] in the `redirectTo` function defined in `apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/attach-focused-launch.tsx`, instead of imperatively changing the `window.top.location`, we should invoke the newly defined hook, if available (in wp-admin context, there is no iframe; see #47803 and https://github.com/Automattic/wp-calypso/issues/47542#issuecomment-738643660)

Contributor guide

Open the contributing guide

Research direction

Start by reading the redirectTo implementation in apps/editing-toolkit/editing-toolkit-plugin/editor-site-launch/src/attach-focused-launch.tsx, then trace the iframe bridge in apps/wpcom-block-editor/src/calypso/features/iframe-bridge-server.js and client/gutenberg/editor/calypsoify-iframe.tsx. Done means iframe redirects use the new MessageChannel path without window.top or a hardcoded origin, while the non-iframe context remains supported.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.