Set the API context when using Comlink.wrap() #1085
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Fixes WordPress Playground Block not loading when the Site Editor is wrapped in an iframe. Playground uses Comlink to talk to the remote API via `window.postMessage()`. By default, Comlink binds the `message` event listener to the current global window object. However, when the Site Editor is iframed, the `startPlaygroundWeb` function runs in the global `window` context, but the Playground iframe lives inside of the Editor Canvas iframe context. Playground's `remote.html` would then send a much of messages (via `postMessage`) to its parent window (Editor Canvas), and Comlink would never notice. This PR ensires the `context` argument is always set to Playground's iframe parent window. ## Testing instructions 1. Clone https://github.com/WordPress/playground-tools/tree/trunk/packages/wordpress-playground-block 1. Update the remote URL to `http://localhost:5400/remote.html` 1. Build the `@wp-playground/client` package in this repo and substitute the block's dependency with it (or use npm link) 1. Run the Playground block in the dev mode (as described in its README) 1. Install the Gutenberg plugin to enable iframe-based Canvas 1. Insert the Playground block 1. Confirm Playground loads correctly
adamziel
added
[Type] Bug
adamziel
added a commit
that referenced
this pull request
Mar 6, 2024
Follows up on #1085 that correctly identified the issue with `postMessage` event handlers, but passed the context argument to the wrong function call. `wrap()` uesd in that PR is not responsible for binding the message event handler. `windowEndpoint()` is. This PR fixes the mistake.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes WordPress Playground Block not loading when the Site Editor is wrapped in an iframe.
Playground uses Comlink to talk to the remote API via
window.postMessage(). By default, Comlink binds themessageevent listener to the current global window object. However, when the Site Editor is iframed, thestartPlaygroundWebfunction runs in the globalwindowcontext, but the Playground iframe lives inside of the Editor Canvas iframe context. Playground'sremote.htmlwould then send all its messages (viapostMessage) to the parent window, which is Editor Canvas and not the globalwindow. As a result, Comlink would never notice any communication and the Playground wouldn't load.This PR ensires the
contextargument is always set to Playground's iframe parent window.Testing instructions
This is convoluted:
http://localhost:5400/remote.html@wp-playground/clientpackage in this repo and substitute the block's dependency with it (or use npm link)