WP Manifestindependent plugin directory
manifest / editor / iframe-editor-examples

Iframed Editor Demos

Companion demo blocks for the WordPress 7.1 iframed post editor changes — broken and fixed versions of common patterns.

by Ryan Welcher · github.com/ryanwelcher/iframe-editor-examples

★ 1stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/ryanwelcher/iframe-editor-examples/archive/refs/heads/trunk.zip
Readme github.com/ryanwelcher/iframe-editor-examples ↗

Companion plugin for the article/video on the iframed post editor changes landing in WordPress 7.1. Every demo block exists in a broken and a fixed version so you can see exactly what the iframe changes break in custom blocks — and how to fix it.

The timeline

Version Behavior
WordPress 6.9 Console warning (with SCRIPT_DEBUG) for blocks registered with apiVersion ≤ 2. block.json schema only validates apiVersion: 3.
WordPress 7.0 Only blocks inserted in the post are checked (previously all registered blocks). All inserted blocks v3+ → editor is iframed. Insert one v2 block → iframe removed. Not enforced.
Gutenberg 22.6+ Iframe enforced regardless of theme — the plugin short-circuits the check entirely.
WordPress 7.1 Iframe enforced for block themes, regardless of apiVersion. Every other theme keeps the 7.0 rules for now; all themes in a future release.

The demos

Block What it shows
🕰️ Legacy API v2 Block Inserting it in WP 7.0 removes the iframe from the editor. Logs a deprecation warning in 6.9+ with SCRIPT_DEBUG.
❌/✅ Canvas Width Broken: reads window.innerWidth from the global (admin) window — wrong number, never updates with the canvas. Fixed: element.ownerDocument.defaultView via useRefEffect. Toggle Tablet/Mobile preview to compare.
❌/✅ Click Outside Broken: "close dropdown on outside click" bound to the global document — canvas clicks never reach it (admin clicks do — enjoy the weirdness). Fixed: listener on element.ownerDocument.
Editor Styles Demo Two banners: green from editorStyle in block.json (injected into the iframe — survives), red from enqueue_block_editor_assets (admin page only — vanishes when iframed). Count the banners to know where you are.
❌/✅ Admin-Scoped CSS Broken: editor styles scoped with .wp-admin — injected into the iframe, but the selector never matches the canvas body, so the border + banner silently vanish when iframed. Fixed: scope to the block's own class, no admin ancestor — styling survives everywhere.
❌/✅ Third-Party Library Broken: a legacy lib resolves a selector against the global document — finds nothing inside the iframe, silently no-ops. Fixed: the lib is "patched" (the patch-package technique) to resolve the document from an element.

The demo script

  1. Create a new post, insert the Editor Styles Demo and both Canvas Width blocks.
  2. On WP 7.0 (no Gutenberg plugin — theme makes no difference here): everything is iframed, red banner missing, broken width block lies to you.
  3. Insert the Legacy API v2 Block → the editor de-iframes. The red banner appears, the broken blocks start "working" again. This is the backward-compatibility behavior that goes away.
  4. Activate the Gutenberg plugin (22.6+) or WP 7.1 + block theme → iframe is enforced; the v2 block no longer rescues anything.
  5. Walk the broken/fixed pairs one at a time.

Setup

npm install
npm run build

Run it with wp-env:

npx wp-env start                      # WP latest, plugin active, SCRIPT_DEBUG on

To test with the iframe enforced everywhere (Gutenberg 22.6+), copy the override file and restart:

cp .wp-env.override.example.json .wp-env.override.json
npx wp-env start --update

Try it in Playground

No local setup required — launch the demos in WordPress Playground. There's a blueprint for each state:

▶️ Iframe enforced — installs the Gutenberg plugin, so the canvas is always iframed (the 7.1 experience). Every pill is blue; walk the broken/fixed pairs.

▶️ Stock 7.0 rules — no Gutenberg plugin. The preset Legacy API v2 block keeps the canvas out of the iframe (grey pills, broken blocks "work"). Delete it and watch the canvas reload into an iframe.

Both blueprints open a preset post with every demo block inserted. Note: they install the plugin from the iframed-editor-demos.zip committed to this repo (served via raw.githubusercontent.com, which sends the CORS headers Playground needs — GitHub release assets don't). Rebuild it with npm run plugin-zip and commit the result whenever the blocks change.

References