Fix: Title Generation: toolbar button disappears after toggling "Show template" off (normal editing mode), until reload

[hbhalodia]

What?

Closes #693

Why?

• PR reattaches the button to the title element.

How?

• Currently observable element was not observing after the element is attached. Updated to observe, reset and again add the element.

Use of AI Tools

• Yes, Claude Code, Opus 4.8.
• Used for RCA and implementation for the same.
• Implementation was tested and reviwed.

Testing Instructions

1. Enable the Title Generation experiment (and a connector).
2. Open an existing post in the post editor (normal editing mode, not the site/template editor).
3. Click into the post title — confirm the "Generate"/"Regenerate" button appears above the title.
4. Open the editor "view" menu (the display options dropdown) and choose Show template.
5. Open the same menu again and toggle Show template back off (return to normal editing mode).
6. Click into the post title again and look for the title generation button.
7. You would see the button now.

Screenshots or screencast

Screen.Recording.2026-06-10.at.1.23.34.PM.mov

Changelog Entry

Fixed - Title generation button disappears after toggling "Show template" off (normal editing mode).

---

AI Summary

Root cause

The Title Generation experiment attaches its "Generate"/"Regenerate" toolbar in normal editing mode via DOM injection in TitleToolbarWrapper.tsx (a registerPlugin render that manipulates the editor DOM directly, rather than rendering React into the editor tree).

Two pieces of logic made the attachment a one-time, irreversible operation:

1. The MutationObserver permanently disconnected after the first attach. Once isAttached became true, the observer callback called obs.disconnect() and stopped watching the editor DOM entirely.
2. findAndAttachToolbar() early-returns while isAttached is true. Even if something re-triggered it, the guard at the top would bail out.

When the user toggles Show template on, the editor swaps the post title region — the normal-mode .editor-post-title__input is replaced by the core/post-title block view. Toggling it back off recreates a fresh .editor-post-title__input, and React discards the old subtree, taking our injected .ai-title-toolbar-wrapper with it.

At that point the toolbar is gone from the DOM, but:

• isAttached is still true, and
• the observer has already been disconnected,

so nothing re-injects the toolbar onto the new title input. The component never unmounts during the toggle, so the effect's cleanup/re-run path never fires either. Only a full editor reload re-runs the useEffect and re-attaches — which is why a refresh "fixes" it.

What we fixed

In src/experiments/title-generation/components/TitleToolbarWrapper.tsx:

1. Keep the MutationObserver connected for the editor's lifetime. Removed the obs.disconnect() branch so the observer keeps watching after the first attach. (It still disconnects in the effect's cleanup on real unmount.)
2. Detect when our toolbar was torn down and re-attach. The observer now checks whether .ai-title-toolbar-wrapper still exists in the editor document. If we believe we're attached but the wrapper is gone, we reset our state and re-attach to the newly rendered title input.
3. Added a resetAttachmentState() helper that cleanly tears down the stale attachment before re-attaching — unmounts the React root, removes the title/toolbar focus-blur listeners, removes the orphaned wrapper node, and clears the isAttached/reference state. This prevents leaked React roots and dangling event listeners across re-attachments.

The re-attach is safe from infinite loops: inserting the wrapper triggers the observer again, but on that fire both isAttached and wrapperExists are true, so neither the reset nor the attach branch runs. The existing retry logic in findAndAttachToolbar() handles the brief window where the new title input hasn't rendered yet.

Result: toggling "Show template" off (or any editor interaction that recreates the title input) now re-injects the toolbar immediately, without requiring a page refresh.

[github-actions]

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.

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

Co-authored-by: hbhalodia <hbhalodia@git.wordpress.org>

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