Probe the editor canvas iframe for block colors - #8179
Merged
Merged
Conversation
The color probe read the theme's button colors from the outer document. The post editor now renders inside an iframe, so those styles live only in the canvas document and the probe returned empty values, leaving course/lesson blocks without their theme color defaults. Probe the editor-canvas iframe document when present, falling back to the outer document otherwise, and read computed styles from that document's own window. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
WordPress Playground PreviewThe changes in this pull request can previewed and tested using a WordPress Playground instance. 
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes block default color probing in WordPress’ iframed post editor by resolving the hidden “probe” element against the editor-canvas iframe document (where the active theme styles actually live), while still supporting non-iframed editor contexts.
Changes:
- Detect the editor-canvas iframe and probe styles within its
contentDocument(fallback to the outerdocumentwhen not present). - Read computed styles using the probed document’s own
defaultView(instead of the outer window). - Add a unit test covering the iframed-editor probing behavior, plus a changelog entry.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
assets/react-hooks/probe-styles.js |
Probes block colors against the editor-canvas iframe document (when present) and uses that document’s window for computed styles. |
assets/react-hooks/probe-styles.test.js |
Adds coverage to ensure probing prefers the iframe’s styles and resets memoization between tests. |
changelog/block-color-probe-iframe |
Records the user-facing fix in the changelog. |
Suppressed comments (1)
assets/react-hooks/probe-styles.js:107
- To make the memoization safe now that getProbeStyles depends on probeDocument, add a resolver so lodash keys the cache by the probed document (instead of the implicit undefined key).
} );
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Key the probe cache by the probed document so a call made before the editor canvas iframe mounts does not cache the outer document's values for the iframed document. Fall back to the outer window when the probed document has no defaultView. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or 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
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.
Resolves SEN-141.
Proposed Changes
Course and lesson blocks (Course Outline modules, Course Progress, Course
Results) pick their default colors from the active theme by reading the
computed styles of a hidden probe element. The post editor now renders inside
an iframe, so the theme's styles live only inside that iframe's document. The
probe was still added to the outer document, where those styles don't exist, so
it read empty values — blocks lost their theme color defaults and fell back to a
different color.
This resolves the probe against the editor-canvas iframe document when present,
falls back to the outer document when it isn't (non-iframed editors), and reads
computed styles from that document's own window.
Screenshots
Testing Instructions
Changelog entry
Changelog Entry Details
Significance
Type
Message
Fixed course and lesson block colors not matching the theme in the iframed post editor.