Description

Add a floating "Add note" button that appears next to a live text selection inside a block, matching the Medium / Google Docs on-select pattern. This is the popover variant of the entry point shown in @jasmussen's mock in #76316.

Today, the inline-note creation entry point lives in the rich-text toolbar at the top of the canvas (#78218 registers the core/note format with a RichTextToolbarButton). That works, but the floating-next-to-selection variant is more discoverable and matches the design direction.

Why split this out

The popover variant needs:

• DOM range tracking (the Popover needs a virtual anchor whose getBoundingClientRect follows the selection as the user adjusts it).
• Iframe-aware getSelection() — the Site Editor renders the canvas in an iframe; the Post Editor does not. The anchor's ownerDocument needs to resolve correctly in both.
• Dismissal logic — hide when the selection collapses, when focus moves outside the canvas, when the user clicks the button (so it doesn't double-render with the form), or when an existing inline note covers the selection (the rich-text toolbar's existing format-active state already handles re-selecting an existing note).
• Coordination with the existing rich-text toolbar button so the two don't compete visually.

Each of these is a small change in isolation, but the combined surface area is enough to warrant a focused PR rather than tacking it onto the Phase 4 UI-polish PR.

Scope

In:

• A FloatingAddNoteButton component, rendered from NotesSidebar, that:
  • Reads getSelectionStart() / getSelectionEnd() from @wordpress/block-editor.
  • Renders only when the selection is non-collapsed, sits inside a single block's rich-text attribute, and no core/note format is already active at that range.
  • Anchors a Popover to the visible DOM Range via a virtual anchor element.
  • On click, triggers the same flow as the existing rich-text toolbar button (opens the sidebar to a "new" note for the captured selection).
• Iframe-aware anchor resolution (use the canvas iframe's defaultView.getSelection() when present).
• Tests: unit coverage for the visibility predicates; an E2E spec that selects text and verifies the floating button appears + click triggers the form.

Out:

• Replacing the existing rich-text toolbar button. Both entry points coexist (per Joen's mocks Medium/Notion both show on-select toolbars in addition to the top toolbar). The toolbar button remains the canonical/keyboard-accessible entry; the floating button is the discoverability boost.
• Selection-aware "Suggest" mode entry, mentioned in #73410. That's a separate UX surface.

Designs

See @jasmussen's mock in #76316 under "Adding notes, even inline".

Acceptance criteria

• Selecting text inside a paragraph (Post Editor) surfaces a floating button positioned above the selection.
• Selecting text inside a paragraph (Site Editor, iframe canvas) does the same.
• Click → opens the sidebar to a new-note form anchored to the selection; thread persists with the captured _wp_note_selection meta and core/note marker.
• Button disappears when: the selection collapses; focus moves outside the canvas; a core/note format is already active at the selection.
• Keyboard parity: the existing rich-text toolbar entry still works; the floating button is an addition, not a replacement.
• Existing findNoteRange and useAnnotateBlocks behavior is unaffected (already covered by 7 unit tests in #78218).

Related

• Parent overview: #59445
• 7.1 iteration: #76316
• Multi-note per block (prerequisite): #75147
• Inline notes hybrid (prerequisite): #78218
• UI polish (sibling): #78219