Automattic / Automattic/wp-calypso
Launch: cleaner way of redirecting the Calypso window from within the block editor
- 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
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