Add Expand, Minimize and Hide Notes modes to the Options (ellipsis) menu by adamsilverstein · Pull Request #79965 · WordPress/gutenberg

adamsilverstein · 2026-07-07T20:36:18Z

Summary

Adds a Minimize notes choice to the Notes group in the editor's Options (ellipsis) menu, introduced in #76024. Rebuilt on the canvas-margin floating notes architecture from #79864, and byte-identical to the implementation validated on the combined test branch #79971.

When minimized, floating note threads collapse to a small avatar pill anchored at the canvas edge:

Hovering or focusing a pill reveals the author name and time (CSS-only :hover/:focus-within).
Clicking a pill (or pressing Enter on it) expands the full thread, exactly like selecting a regular thread; Escape collapses it again.
The "All notes" sidebar is unaffected; only the floating threads minimize.

Variable reserved width

The space reserved inside the canvas now follows the presentation: 280px for full threads, 82px for minimized pills, and the boundary divider from #79864 scales with the active width. The panel also adapts automatically to the canvas width (the canvas is freely resizable): full threads collapse to pills below a 880px canvas, and the pills release their reserved space entirely below 482px, keeping a readable content column at every size. The e2e spec covers the Options-menu switching and the responsive collapse tiers.

The previous implementation (built on the retired FLOATING_NOTES_SIDEBAR plumbing) remains in history at 63a217b. Its four experimental notes keyboard shortcuts (access+j/i/e/a) are not carried over; they can return as a follow-up if still wanted.

Test plan

Open a post and add notes to a couple of blocks (notes-data-generator helps).
Open the Options (ellipsis) menu and choose Minimize notes: floating threads collapse to avatar pills at the canvas edge, and the reserved space (and divider) narrows to match.
Hover or Tab to a pill: the author name and time appear inline.
Click a pill (or press Enter): the full thread expands with the reply form; Escape collapses it back to a pill.
Choose Expand notes: full floating threads and the full reserved width return.
Narrow the editor (open the Settings sidebar and List View, or shrink the window): full threads collapse to pills automatically, then the pills yield entirely on very narrow canvases.

Screencast

export-1783962513403.mp4

Screenshot

github-actions · 2026-07-07T20:36:26Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @justinemshields.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: justinemshields.

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: manzoorwanijk <manzoorwanijk@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>

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

github-actions · 2026-07-07T20:44:34Z

Size Change: +397 B (+0.01%)

Total Size: 7.75 MB

📦 View Changed

Filename	Size	Change
`build/scripts/editor/index.min.js`	502 kB	+110 B (+0.02%)
`build/styles/editor/style-rtl.css`	31.3 kB	+78 B (+0.25%)
`build/styles/editor/style-rtl.min.css`	26.6 kB	+63 B (+0.24%)
`build/styles/editor/style.css`	31.3 kB	+80 B (+0.26%)
`build/styles/editor/style.min.css`	26.6 kB	+66 B (+0.25%)

_{compressed-size-action}

Add 'Expand notes' and 'Minimize notes' choices to the Notes toolbar dropdown introduced by #76024. When minimized, floating note threads collapse to an avatar pill anchored to the canvas edge; hovering or focusing a pill reveals the author name and time, and selecting the thread expands it fully. The hover reveal is CSS-only (:hover/:focus-within), so no extra React state is needed, and the floating board's ResizeObserver handles reflow when threads collapse or expand.

The DropdownMenu popover stayed open after selecting a choice, so a subsequent click on the toolbar toggle closed the menu instead of reopening it. Pass onClose through and call it on selection.

github-actions · 2026-07-07T21:55:01Z

Flaky tests detected in c870d33.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/29806905980
📝 Reported issues:

[Flaky Test] exits spotlight mode when pressing Escape key #80128 in /test/e2e/specs/editor/various/list-view-spotlight-mode.spec.js

adamsilverstein · 2026-07-08T15:51:56Z

Checking how this works in Docs:

A couple of changes we could make here:

Reverse the order so it goes from none to most/all.
Adjust the language to better match Docs (action based: hide/minimize/expand/show all)
Add a thin dividing line before the Show all (if our component enables that)
Add keyboard shortcuts, ideally matching docs

Reorder the display options from least to most visible (Hide, Minimize, Expand, Show all), rename Show notes to Expand notes, and separate Show all notes into its own menu group so a divider precedes it. This mirrors the comment display menu in Google Docs, which the feature is modeled on. Register keyboard shortcuts for each mode using WordPress conventions (access modifier) rather than Docs' exact chords to avoid conflicts, and surface the shortcut on each menu item. The four handlers share an applyNotesDisplayMode helper with the dropdown. Update the e2e assertions for the new order and label.

adamsilverstein · 2026-07-08T16:05:34Z

Addressed in 6d1cbf4:

Order reversed to none→all: Hide → Minimize → Expand → Show all.
Language now action-based to match Docs: "Show notes" → Expand notes (Hide / Minimize / Expand / Show all).
Divider before "Show all" via a separate MenuGroup (its own radio, still checked when active).
Keyboard shortcuts registered per mode and shown on each item. Docs' two-key chords (W then M/E) aren't expressible with registerShortcut, so I used WP-convention access (Ctrl+Alt / Shift+Alt) bindings instead of Docs' exact combos to avoid conflicts:
- Hide → access+J
- Minimize → access+I
- Expand → access+E
- Show all → access+A
Happy to bikeshed the exact letters. e2e assertions updated for the new order/label.

annezazu · 2026-07-09T17:26:03Z

Just a note that what blocked my PR on this last time was feedback that the dropdown menu isn't necessarily the right path forward and that folks wanted to see a resizable sidebar. We need to align with design here as that's where I got stuck. I'm not a design but I obviously am biased towards liking this approach haha. @WordPress/gutenberg-design for more feedback here, although I imagine not much has changed since this is quite close UX wise to the original PR (this PR is better code wise!).

# Conflicts: # packages/editor/src/components/collab-sidebar/index.js # test/e2e/specs/editor/various/block-notes.spec.js

The Options-menu items carry keyboard shortcut text in their accessible names, so an exact name match no longer finds them.

adamsilverstein · 2026-07-10T00:24:36Z

Synced with the base branch and applied jasmussen's feedback from #79971 (comment): the Hide / Minimize / Expand choices (with their keyboard shortcuts) now live in a "Notes" group in the editor's Options (ellipsis) menu instead of a dropdown on the pinned notes button, which is a plain "All notes" sidebar toggle again. The show-all keyboard shortcut still works. e2e updated; block-notes + collaboration suites (45 tests) pass locally.

annezazu · 2026-07-10T03:11:59Z

Fantastic! Thank you for taking this over.

Match the menu order from the design review, most visible mode first.

adamsilverstein · 2026-07-10T03:34:49Z

Merged the base branch and reordered the display choices to Expand / Minimize / Hide in 63a217b, per design feedback on #79971.

jasmussen · 2026-07-10T08:08:13Z

This is the major change:

In principle I'm for it, as a simple way to start that lets us keep the notes button a toggle. But it will very much benefit the feature to migrate to Menu with submenus, so it doesn't become so long as to scroll on mobile.

That's not a blocker, but let's probably note it as a followup for someone to tackle. That would also let us use the radio grouping mechanism instead of the checkbox indication for the item-exclusive options.

One thing for this branch: can you move the Notes group under "Panels"?

This is mostly a hierarchy thing. The choice is not that important.

…ture Port the Minimize notes mode onto the floating-notes-in-canvas-margin implementation from #79864, matching the combined test branch (#79971) byte for byte: - Minimized threads collapse to an avatar pill that reveals the author name and time on hover or focus; selecting a pill expands the thread. - The reserved canvas width follows the presentation: 280px for full threads, 82px for pills, and the boundary divider scales with it. - The panel also yields progressively as the canvas narrows: full threads collapse to pills below 880px and the pills release their reserved space below 482px.

Rebuilds the Minimize notes mode on the canvas-margin floating notes architecture from #79864, replacing the FLOATING_NOTES_SIDEBAR-based implementation (previous head 63a217b). The four experimental notes keyboard shortcuts from the previous implementation are not carried over; they can return as a follow-up if still wanted.

adamsilverstein · 2026-07-11T20:37:20Z

Rebuilt on the canvas-margin architecture; see the updated description. This PR now also carries the variable reserved width (280px full / 82px pills) and the responsive collapse tiers validated on #79971.

manzoorwanijk · 2026-07-19T06:46:19Z

This branch seems to have picked up irrelevant commits, probably due to a rebase issue.

Trunk renamed the pending note form class from editor-collab-sidebar-panel__thread to editor-collab-sidebar-panel__add-note, so the overlay's pointer-events carve-out no longer matched it and clicks fell through to the canvas iframe.

Tests added on trunk after this branch forked still located notes inside the docked Editor settings region; with the floating overlay they live in the Notes region. Also park the pointer before asserting the un-highlight on focus-out, since hovering a floating thread highlights its block.

t-hamano · 2026-07-20T11:54:22Z

@adamsilverstein, could you resolve the rebase issues so that we can review this PR?

adamsilverstein · 2026-07-20T17:28:38Z

This branch seems to have picked up irrelevant commits, probably due to a rebase issue.

Oops, fixing.

adamsilverstein · 2026-07-21T06:16:50Z

This branch seems to have picked up irrelevant commits, probably due to a rebase issue.

Oops, fixing.

Fixed and enabled the gh-stack feature, https://github.github.com/gh-stack/

# Conflicts: # test/e2e/specs/editor/various/block-notes.spec.js

adamsilverstein · 2026-07-23T02:41:56Z

Closing this in favor of #76024, which has been fast-forwarded to this branch'stip (5bcae66af61) - no code changes, just a branch pointer move. The two PRs wound up adding a menu then removing it so consolidating them made sense.

github-actions Bot added the [Package] Editor /packages/editor label Jul 7, 2026

adamsilverstein mentioned this pull request Jul 7, 2026

Editor: Add notes display modes to the Options menu #76024

Closed

adamsilverstein added 3 commits July 7, 2026 13:53

Close the Notes dropdown after choosing a display option

905931b

The DropdownMenu popover stayed open after selecting a choice, so a subsequent click on the toolbar toggle closed the menu instead of reopening it. Pass onClose through and call it on selection.

Add e2e coverage for the Minimize notes mode

ba2b8f2

adamsilverstein force-pushed the add/minimize-notes-mode branch from 34e662f to ba2b8f2 Compare July 7, 2026 20:54

adamsilverstein mentioned this pull request Jul 8, 2026

**Testing** Floating notes with type menu all / full / minimized / hidden #79971

Closed

adamsilverstein linked an issue Jul 8, 2026 that may be closed by this pull request

Add a “Minified Notes Mode” for reduced visual footprint (similar to Google Docs' “Minimize comments”) #73417

Closed

adamsilverstein mentioned this pull request Jul 8, 2026

Editor: Add compact notes mode for Notes sidebar #74985

Closed

Mamaduka self-requested a review July 8, 2026 16:32

adamsilverstein mentioned this pull request Jul 8, 2026

Notes: overlay floating notes on space reserved inside the canvas #79864

Closed

adamsilverstein added 2 commits July 9, 2026 17:12

Merge branch 'add/notes-visibility-toggle' into add/minimize-notes-mode

785592d

# Conflicts: # packages/editor/src/components/collab-sidebar/index.js # test/e2e/specs/editor/various/block-notes.spec.js

Notes: match menu item label prefix in display options e2e

019b2ab

The Options-menu items carry keyboard shortcut text in their accessible names, so an exact name match no longer finds them.

adamsilverstein added 2 commits July 9, 2026 20:29

Merge branch 'add/notes-visibility-toggle' into add/minimize-notes-mode

6f9a88a

Order the notes display choices as Expand, Minimize, Hide

63a217b

Match the menu order from the design review, most visible mode first.

adamsilverstein added 2 commits July 11, 2026 13:35

jasmussen self-requested a review July 13, 2026 07:51

adamsilverstein added 2 commits July 19, 2026 10:00

Restore pointer events on the floating new-note form

35aaf3c

Trunk renamed the pending note form class from editor-collab-sidebar-panel__thread to editor-collab-sidebar-panel__add-note, so the overlay's pointer-events carve-out no longer matched it and clicks fell through to the canvas iframe.

Merge branch 'add/notes-visibility-toggle' into add/minimize-notes-mode

4989b0b

This was referenced Jul 20, 2026

Add a toolbar control to show and hide notes #79963

Closed

Add a “Minified Notes Mode” for reduced visual footprint (similar to Google Docs' “Minimize comments”) #73417

Closed

Merge branch 'add/notes-visibility-toggle' into add/minimize-notes-mode

c870d33

This was referenced Jul 22, 2026

Notes: highlight the whole text block for block-level notes #80498

Closed

Notes: highlight tints reduce text contrast, and the strong state doubles the loss #80543

Closed

Merge branch 'add/notes-visibility-toggle' into add/minimize-notes-mode

5bcae66

# Conflicts: # test/e2e/specs/editor/various/block-notes.spec.js

adamsilverstein mentioned this pull request Aug 11, 2026

Migrate dropdown menu instances to @wordpress/ui's Menu component #61094

Open

19 of 59 tasks

Conversation

adamsilverstein commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Variable reserved width

Test plan

Screencast

Screenshot

Uh oh!

github-actions Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

github-actions Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adamsilverstein commented Jul 8, 2026

Uh oh!

adamsilverstein commented Jul 8, 2026

Uh oh!

annezazu commented Jul 9, 2026

Uh oh!

adamsilverstein commented Jul 10, 2026

Uh oh!

annezazu commented Jul 10, 2026

Uh oh!

adamsilverstein commented Jul 10, 2026

Uh oh!

jasmussen commented Jul 10, 2026

Uh oh!

adamsilverstein commented Jul 11, 2026

Uh oh!

manzoorwanijk commented Jul 19, 2026

Uh oh!

t-hamano commented Jul 20, 2026

Uh oh!

adamsilverstein commented Jul 20, 2026

Uh oh!

adamsilverstein commented Jul 21, 2026

Uh oh!

adamsilverstein commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

adamsilverstein commented Jul 7, 2026 •

edited

Loading

github-actions Bot commented Jul 7, 2026 •

edited

Loading

github-actions Bot commented Jul 7, 2026 •

edited

Loading

github-actions Bot commented Jul 7, 2026 •

edited

Loading

adamsilverstein commented Jul 23, 2026 •

edited

Loading