Skip to content

Block Editor: Fix iframe widget field lifecycle and repeater TinyMCE#2308

Open
Misplon wants to merge 17 commits intodevelopfrom
feature/sowb-block-editor-iframe-asset-clone
Open

Block Editor: Fix iframe widget field lifecycle and repeater TinyMCE#2308
Misplon wants to merge 17 commits intodevelopfrom
feature/sowb-block-editor-iframe-asset-clone

Conversation

@Misplon
Copy link
Copy Markdown
Member

@Misplon Misplon commented Apr 30, 2026

Summary

Fixes legacy SiteOrigin widget forms inside WordPress iframe editors by restoring the iframe asset/bootstrap path and hardening field initialization after the form DOM and cloned scripts mount asynchronously.

What Changed

  • Detect the WP 6.5+ post-editor iframe (iframe[name="editor-canvas"]) as well as the Site Editor canvas when resolving widget forms.
  • Clone the required WordPress/SOWB scripts, styles, and templates into the editor iframe from the correct parent document.
  • Avoid latching failed iframe asset clone attempts so setup can retry after the iframe body exists.
  • Keep keyed form initialization and send staged iframe sowbBlockFormInit messages after form mount.
  • Remove repeater-wide iframe init broadcasts from add/open/copy flows and use targeted sowsetupformfield triggers for visible repeater fields.
  • Persist copied TinyMCE repeater editor IDs to real data-tinymce-id attributes so IDs survive cloning/replacement.
  • Reinitialize TinyMCE fields when the field says initialized but editor chrome is missing, and use safer editor teardown fallbacks.
  • Observe iframe form mutations for late TinyMCE and Date Range fields, waiting for iframe dependencies such as jQuery and Pikaday when needed.
  • Stabilize Icon picker selection coverage in the iframe.
  • Add Site Editor E2E coverage for Icon selection and repeater TinyMCE chrome in Hero/Features widgets.

Why

Iframe editors can mount widget form HTML and cloned admin scripts out of order. That left some field scripts present in the iframe but not actually initialized, and TinyMCE repeater editors after the first item could render as bare textareas because copied/replaced editors only kept transient jQuery data for their IDs.

This PR covers both layers of the fix: the original iframe asset delivery problem and the follow-up repeater field lifecycle problem from #2307.

Validation

  • node --check base/inc/fields/js/date-range-field.js
  • node --check compat/block-editor/widget-block.js
  • node --check tests/e2e/wb-form-field-site-editor.test.js
  • npx playwright test tests/e2e/wb-form-field-site-editor.test.js -g "Test the Blog widget" --project="Google Chrome" --retries=0
  • npm run test:e2e (9 passed)

Reviewer Checklist

  • WP 6.9/7.0 Site Editor: Icon widget initializes and stores the selected icon value.
  • WP 6.9/7.0 Site Editor: Blog widget Date Range picker opens and stores a selected date.
  • WP 6.9/7.0 Site Editor: Editor widget TinyMCE media flow still inserts an image.
  • WP 6.9/7.0 Site Editor: Hero and Features repeaters render full TinyMCE editor chrome for at least three items.
  • WP 6.9/7.0 post editor iframe: widget forms initialize, repeaters expand/reorder, and color/icon/media fields still work.
  • widgets.php Block Widgets screen: repeater and field initialization behavior regresses neither iframe nor non-iframe screens.
  • Browser console shows no LoadError, window.error, unhandledrejection, or sowbBlockFormInit message storm during normal add/open/copy flows.

Notes

@Misplon Misplon changed the title Block Editor: Restore widget-form interactivity in WP 6.5+ post-editor iframe Block Editor: Restore iframe widget field lifecycle May 3, 2026
@Misplon Misplon requested a review from AlexGStapleton May 3, 2026 20:01
@Misplon Misplon changed the title Block Editor: Restore iframe widget field lifecycle Block Editor: Fix iframe widget field lifecycle and repeater TinyMCE May 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Block Editor: TinyMCE editor field renders only in first repeater item inside post-editor iframe

1 participant