fix: update subtitle block for compatibility with iframed Post Editor

[jason10lee]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR updates the following block for compatibility with the iframed Post Editor:

• newspack-block-theme/article-subtitle

Addresses NPPM-2588: Newspack Block Theme (iframe Editor Compatibility).

How to test the changes in this Pull Request:

Prerequisites

1. Install and activate newspack-block-theme.
2. Make sure no other plugins are activated!
3. Create or choose a post and add a subtitle to its metadata. If you've got access to the CLI:

   wp post meta update <POST_ID> newspack_post_subtitle "This is a test subtitle"
   

   Note the post ID — you'll use the same post throughout testing.

Part 1: Post Editor — Verify the bug (before the PR)

Make sure newspack-block-theme is on the trunk branch (the state before this PR).

1. Open the test post in the editor (/wp-admin/post.php?post=<POST_ID>&action=edit).
2. Check whether the Post Editor is in iframe mode: in the DOM, the editor pane will be wrapped in an <iframe> tag if so. (Unlike other tests, the Post Editor will probably already be in iframe mode due to how the subtitle block is injected.)
3. With iframe mode active, look below the post title in the editor canvas. The subtitle field should be missing.
4. Visit the post on the frontend (/?p=<POST_ID>). The subtitle should still render correctly.

Part 2: Post Editor — Verify the fix (after the PR)

1. Apply this PR and rebuild.
2. Open the same test post in the editor.
3. Confirm the Post Editor is iframed.
4. Below the post title, verify you see an editable subtitle field.
5. Click the subtitle field, change the text, and save the post.
6. Refresh the editor — the updated subtitle should persist.
7. Visit the post on the frontend — the subtitle should show the updated text.

Other information:

Additional fixes

This PR addresses a few issues beyond the migration that either made testing difficult, or involved code we were changing already. I've been urged by Claude to list them here:

1. Unescaped subtitle in PHP render callback — $post_subtitle was output as raw HTML in sprintf(). Now wrapped in esc_html(). Fixed to avoid breaking test site when uploading odd test subtitles. (class-subtitle-block.php:55)
2. innerHTML used for plain text in post editor — The contenteditable input handler, comparison, and assignment all used innerHTML where textContent is appropriate. Now uses textContent throughout. Belt-and-suspenders fix with the above. (post-editor.js:57, 64-65)
3. Missing style.id caused duplicate style tags — The <style> element was never assigned SUBTITLE_STYLE_ID, so the getElementById deduplication check always returned null, injecting a new <style> tag on every call. Cosmetic, but caused confusion. (post-editor.js:38)
4. Site-editor/post-editor enqueue fall-through The site-editor if block didn't prevent execution from continuing to the post-editor check. Now uses if/elseif to make mutual exclusivity explicit. (class-subtitle-block.php:71-79)
5. Redundant apiVersion: 3 in site-editor.js Set explicitly then immediately overwritten by ...metadata spread from block.json. Tests as unneeded, and flagged by AI reviewers. (site-editor.js:22)

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

Updates the newspack-block-theme/article-subtitle block’s editor-side behavior so the subtitle field continues to appear and function when the Post Editor canvas is rendered inside an iframe (Gutenberg iframe mode).

Changes:

• Switch editor asset loading from enqueue_block_editor_assets to enqueue_block_assets with a wp_should_load_block_editor_scripts_and_styles() guard.
• Update the subtitle block’s editor implementations (site editor + post editor), including iframe-aware DOM targeting in the post editor injection.
• Add apiVersion: 3 / $schema metadata to the block definition.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
includes/class-core.php	Loads theme editor JS via enqueue_block_assets (guarded) to better support iframe editor contexts.
includes/blocks/subtitle-block/site-editor.js	Wraps subtitle output with useBlockProps() and sets apiVersion: 3 in registration data.
includes/blocks/subtitle-block/post-editor.js	Adds iframe-aware document selection + retry loop to inject the editable subtitle beneath the title in iframe mode.
includes/blocks/subtitle-block/class-subtitle-block.php	Moves subtitle block editor asset enqueueing to enqueue_block_assets and updates site-editor script deps.
includes/blocks/subtitle-block/block.json	Adds block.json schema reference and sets apiVersion to 3.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adekbadek]

Works as described, left some suggestions.

[rbcorrales]

LGTM. Left a nit on the mount effect closure.

[rbcorrales]

nit (but also a possible race condition): the mount effect here captures the initial subtitle in its closure, so if post meta comes back while the retry loop is still looking for the title wrapper, the element ends up with a stale value and the sync effect has already fired and missed it. A ref would keep tryAppend reading the latest value.

You could add this before line 87:

const subtitleRef = useRef( subtitle );
useEffect( () => {
    subtitleRef.current = subtitle;
}, [ subtitle ] );

Then on line 96:

Suggested change

	appendSubtitleToTitleDOMElement( subtitle, editorDoc, saveSubtitle );
	appendSubtitleToTitleDOMElement( subtitleRef.current, editorDoc, saveSubtitle );