Skip to content

Fix: Restore Custom HTML iframe previews in editor canvas and modal - #80197

Open
coderGtm wants to merge 2 commits into
WordPress:trunkfrom
coderGtm:fix/iframe-preview
Open

Fix: Restore Custom HTML iframe previews in editor canvas and modal#80197
coderGtm wants to merge 2 commits into
WordPress:trunkfrom
coderGtm:fix/iframe-preview

Conversation

@coderGtm

@coderGtm coderGtm commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

What?

Closes #79022

Fixes Custom HTML block iframe preview regressions so provider embeds (e.g. Dacast) render in the editor canvas and in the Edit HTML modal without enabling unsafe sandbox combinations.

Why?

After recent sandbox hardening changes, iframe-based embeds in core/html could fail to render video in editor preview (audio-only or blank preview), and the console could show origin-related postMessage errors.
A previous approach using allow-scripts + allow-same-origin in sandbox is not desirable and triggers browser security warnings.

This PR restores editor preview behavior for safe standalone iframe embeds while preserving stricter sandboxing for arbitrary HTML content.

How?

  • Added packages/block-library/src/html/preview-utils.js with guards to detect safe standalone iframe markup:
    • exactly one top-level <iframe>
    • network src only (https://, http://, or //)
    • rejects srcdoc
    • rejects inline event attributes (on*)
  • Added getSafeStandaloneIframeProps() to extract sanitized iframe attributes for preview rendering.
  • Updated packages/block-library/src/html/preview.js:
    • renders a direct sanitized <iframe> preview for safe standalone iframe markup
    • falls back to existing SandBox for all other HTML
  • Updated packages/block-library/src/html/edit.js:
    • uses the same safe-iframe detection in the normal editor canvas path
    • renders Preview inline for eligible iframe embeds instead of only showing raw InnerContent
  • Updated packages/block-library/src/html/editor.scss:
    • adds stable sizing/layout for iframe preview container/frame in editor preview
  • Added tests in packages/block-library/src/html/test/preview-utils.js.

Testing Instructions

  1. Open the post editor.
  2. Insert a Custom HTML block.
  3. Paste this Dacast embed: 
    <iframe src="https://iframe.dacast.com/vod/ce90b24a8ea4d52a5018b9958f1e1fcf/ca119dff-558d-41ac-9cef-38f61cba7116" width="100%" height="100%" frameborder="0" scrolling="no" allow="autoplay;encrypted-media" allowfullscreen style="position:absolute;top:0;left:0;"></iframe>
  4. Confirm the embed is visible in the normal editor canvas (not only in modal).
  5. Click Edit code and confirm preview still renders in the modal.
  6. Play the video in preview and verify video frames render (not audio-only/poster-only).
  7. Open browser console and confirm the sandbox warning about allow-scripts + allow-same-origin is not introduced by this block preview path.
  8. Verify non-iframe or mixed HTML in Custom HTML still renders through sandbox fallback.

Validation run:

  • npm run lint:js -- packages/block-library/src/html/edit.js packages/block-library/src/html/preview.js packages/block-library/src/html/preview-utils.js packages/block-library/src/html/test/preview-utils.js
  • npm run lint:css -- packages/block-library/src/html/editor.scss
  • npm run test:unit -- packages/block-library/src/html/test/index.js packages/block-library/src/html/test/utils.js packages/block-library/src/html/test/preview-utils.js

Testing Instructions for Keyboard

  1. Using keyboard only, navigate to inserter and add a Custom HTML block.
  2. Paste the Dacast iframe snippet into the block.
  3. Use Tab/arrow keys to move focus through block toolbar and inspector controls.
  4. Activate Edit code with keyboard and verify modal opens.
  5. Verify preview is visible both in canvas and modal without mouse interaction.
  6. Close modal with keyboard (Esc or focus + Enter on Cancel) and confirm focus returns predictably to the block controls.

Screenshots or screencast

Before After
Custom HTML Dacast iframe not visible in editor canvas; video may be audio-only/blank preview. Custom HTML Dacast iframe visible in editor canvas and modal preview; video renders correctly.
Screenshot 2026-07-13 at 8 22 41 PM Screenshot 2026-07-13 at 8 19 23 PM
Screenshot 2026-07-13 at 8 22 53 PM Screenshot 2026-07-13 at 8 19 35 PM

Use of AI Tools

AI assistance was used to help draft and iterate on the implementation and tests.
All generated code and test changes were reviewed, validated, and adjusted before submission.

@github-actions github-actions Bot added the [Package] Block library /packages/block-library label Jul 13, 2026
@coderGtm
coderGtm marked this pull request as ready for review July 13, 2026 14:54
@github-actions

github-actions Bot commented Jul 13, 2026

Copy link
Copy Markdown

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

  • Required label: Any label starting with [Type].
  • Labels found: [Package] Block library.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

@github-actions

github-actions Bot commented Jul 13, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @movieversalfilm-web.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: movieversalfilm-web.

Co-authored-by: coderGtm <gautam23@git.wordpress.org>
Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Package] Block library /packages/block-library

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Bug: Custom HTML Block Breaks Dacast Video Playback After Recent Update

1 participant

@coderGtm