Editor: Add compact notes mode for Notes sidebar#74985
Conversation
Add a "Compact notes" preference toggle in the View menu that collapses floating Note threads into small avatar indicators. This reduces visual clutter while maintaining awareness that feedback exists. Features: - Toggle in Options > View menu to enable compact mode - Collapsed state shows single avatar with unread indicator dot - Hover/focus expands to show author name and timestamp - Click expands the full thread inline - Keyboard accessible with proper ARIA attributes Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @ofadam, @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. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +472 B (+0.01%) Total Size: 6.84 MB
ℹ️ View Unchanged
|
|
Thanks, @annezazu! I think this is a nice start. A couple of surface notes, before I do a full review:
Pinging more folks for feedback, @adamsilverstein, @jasmussen, @t-hamano |
|
Good call with the unread indicator. I took the design too literally. I’ll update to remove the unread concept for now when I have time. Should I wait for more comments on the component piece or shall I implement what you shared? Cc @Duthie for thoughts here too. |
If you have time, I think we can move forward with the current feedback + fixing the lint issues. |
- Consolidate MinifiedThreadIndicator into Thread component with variant prop - Remove separate minified-thread-indicator.js file - Remove unread dot indicator (no actual unread tracking exists) - Use human-readable relative timestamps (e.g., "3 days ago") Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Alright! Did another round of updates. Recap:
Here's a look: Screen.Recording.2026-01-27.at.3.11.56.PM.movKeep the feedback coming! |
There was a problem hiding this comment.
I was expecting less duplication when suggesting a new variant prop for the Thread component.
There's nothing wrong with duplication, but we'll end up maintaining some crucial logic (interactions, a11y) in two places, which can result in variant behavior being out of sync.
Update
Pushed b4815c0 as an example of what I had in mind for simplification. I think there's more room for improvement.
I've also noticed that after you click the compact note, the focus is lost when it's expanded.
Screencast
CleanShot.2026-01-28.at.13.31.53.mp4
|
For some reason—but this happens in trunk too—I'm now getting JS errors when trying to add a comment. Any ideas? Based on the videos, this looks like a promising start. I would love to have tested this with a site that doesn't have a white background color: for me it's still critical that these notes feel like part of the canvas (i.e. same background behind the notes "margin" as in the main canvas), as the metaphor is that of grammar, notes your teacher would add to your essay: underlines, scribbles in the margin, and so on. I also think we need something other than a top level menu item preference called "Compact notes", that seems to have WAY too much prominence for something that on the majority of your posts and pages won't even have a visible effect on yoru document. It can be a preference under appearance, but I also wonder, is it even a preference at all or is it simply that the Notes tray is collapsible? Like this: 
I don't mean to be a blocker to necessarily land this, and in general I'm not against adding options. For me that's about meeting people where they are. But in this case, I'm genuinely unsure if this is a toggle, or just a collapse button in context of the Notes tray. I can see you collapsing/expanding depending on your mood, which speaks more to the collapse button than a set and forget toggle. |
Unfortunately, I'm unable to reproduce the error. The notes e2e tests are also passing, so it might be a local issue.
I think it's a good starting point, though I agree it's too prominent for a similar feature. I like the idea of a collapsed sidebar; we already have something similar for metaboxes. Though I wonder which option is better for discoverability? |
|
I think the discoverability issue is not really the issue to optimize for here, because it is already related to notes which is an important, but still secondary feature to blogging/writing/site building. The problem is, these options accumulate and come with a hidden cost: every item added to the menu reduces the value of every other option already there through the added cognitive overhead. It's a delicate balance that isn't easy to measure. But it's why I would put this option anywhere else than where it currently is. Can be inside the Preferences modal, or it can be a collapse button in the canvas as noted. |
This seems like a genuinely useful feature to add. At a minimum, we could highlight notes that were new or had a new reply (added since the last time the user edited the post). This would only require tracking the last time the user opened the post. I will open a new issue to discuss this feature since I didn't see it anywhere.
Noting that in Google Docs the compact mode is an option under View->Comments (minimize comments): 
One other possibility would be to automatically enter the compact mode when the size/number of comments results in overflow (eg. notes longer that editor canvas). I'm not sure how users would react to this, but it would lead to the feature being used when its most useful (and would help with discovery). |
|
Thank you for helping with this PR @Mamaduka!
I totally agree with this and we need to be careful. In terms of addressing this feedback, in trying to create a toggle for notes, I'm finding it to be pretty finicky space wise, if we use the same design as metaboxes. The toggle overlaps with the notes themselves. If I then move it to the top left, it looks very out of place. toggle.for.notes.movMy preference for now would be to add it to Preferences > Appearance and iterate on an in the experience expand/collapse option in another PR. What do you all think? |
I created this issue to consider tracking unread notes so we could potentially add an indicator: #75026 |
What about putting a dropdown below the existing notes icon that could switch between note modes (collapsed, floating, sidebar) similar to Docs View->comments menu? 
|
Oooh, I personally really like that idea! We'd need to figure out how the overall interaction is meant to work though as right now, selecting that, opens and closes the Notes: notes.icon.movPerhaps, it's a drop down to show all notes, minified, and expanded? |
|
Here's a hacked together "design" for now as food for thought: 
Alternative phrasing: 
|
|
Messing around more while I have time and this actually works pretty darn well: notes.notes.notes.movWhat do you all think? Great thinking, Adam. I haven't pushed the code yet but I can so folks can play around and review. |
Thanks for mocking that up! I like it overall, curious to see how others feel. One UX note, the menu should disappear once a selection is made - in the screencast, it looks like it is requiring an extra click (maybe thats just because its a mockup?). |
|
That's actually in code! In this case, I am matching the experience to the View menu. Here's a comparison: matching.menus.movI think this should be the same for consistency but can be argued out of it :) I can push this to the PR if folks want. Just lmk. |
I've read (and re-read) @jasmussen's thoughts above, spent some time trying to come up with other UX solutions for how/where Notes render (and generally only came up with "left side of canvas sidebar" as a functional difference) and how we could show Notes-adjacent content (e.g. dead links, accessibility errors), and generally continue to come back to the existing UX is fairly sufficient (especially when the Notes tray can collapse to the compact view).
So perhaps the best place to prospect for ideas and iterations next is potential technical solutions that allow for something more on-canvas in-the-margin and not in / using the sidebar? cc: @ellatrix @t-hamano @Mamaduka @adamsilverstein (as folks who've help lead efforts on Notes) |
|
Coming back to this after time off and a big thank you to everyone who has worked on this while I was out. I really was hoping to see this land for 7.0 but I respect the process and the complexity involved.
To me, yes. When I'm writing content and collaborating with others, it's helpful to get rid of the extra "noise" having the content of the comment visible adds. It's a way of simplifying the interface to return to edits before opening back up again to engage. Compared to the current UX, I think this PR is markedly better but I am very biased. Right now, every time I click on the Notes icon as is, I'm confused by what's being displayed in the sidebar. It's not clear as is that it's showing all notes whereas this adds some nice friction to better explain that as well as bringing a new feature in the form of compact notes. In my mind, we could ship this version for 7.0 and then iterate for 7.1 in having a collapsible view that automatically shifts things in and out of a minimize/expanded version. I'm light on the technical details though so please tell me immediately if that's absurd thinking 🙃 . |
|
If we could add a "Hide notes" mode, I think it would be more worthwhile to ship this PR. What do you think? There may be times, especially on smaller screens, when you want more width for your content. Another suggestion is to NOT persist the mode setting and not save user data to the database. This means that the mode will be initialized on browser reload, but it avoids the issue of keeping that data backwards compatible in the future. |
Do you mean add that as an option along with the rest (Show all, Minimize, Expand)? If so, yes I agree.
I'm also game for this to preserve flexibility in the future. Good thinking and thank you for helping here. |
|
Update:
I think the behavior is similar to Google Docs. Let me know what you think! 1e063bfe19c529c47be3e8226cede17d.mp4 |
|
The display mode toggle looks nice, but it doesn't solve the main issue with compact mode. Even when compact mode is enabled, the sidebar remains the same width. I think "Hide Notes" mode can be shipped separately as a small bugfix/improvement. |
|
Flaky tests detected in aaf9f0e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22137207623
|
I disagree. From the original issue created for this:
I think we can ship this and iterate for 7.1 to have a resizable sidebar as noted above. |
|
Before deciding whether to ship this PR, we might need to do some prototyping and feasibility audits to see how notes work in a narrow sidebar and whether floating notes on canvas is really possible. |
|
Coming back to this PR and thinking about 7.1, I've also explored adding filtering to the Notes panel in a new PR based on what Jay shared above. I still think this PR stands for 7.1 potentially as well since the new PR just touches the "All notes" and I do think this is a step in the right direction before bigger changes. If it's resizable sidebar or bust, I will need to pass that off to someone else to do considering what @t-hamano shared above about the sidebar being hardcoded and a potential private API being necessary. |
Add a dropdown menu to the Notes pinned toolbar icon with two options: - "Show all notes" — opens the All Notes sidebar - "Hide notes" — hides both floating and All Notes sidebars This is a more contained version of #74985, focusing only on the show/hide functionality without the compact notes mode. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
To also keep this PR more concise and not lose some of what feels smaller to ship, I've opened a PR that just has show/hide notes options: #76024 This is a smaller option to consider shipping outside of the compact notes option. |
|
I'm late to the discussion here, but wanted to jot down some feedback from Gannett's product group. We currently use Multicollab for inline notes pre-WP 7.0, and also have built a "Story" tab for the existing WP sidebar where a myriad of metadata options are held (from multiple headline fields to author attribution to classification settings.) These are required metadata fields for our users and there's an expectation that they remain visible while working on a story. Having those critical fields disappear every time there's interaction with a note would be a significant workflow hardship for our newsrooms. I'm happy to help describe our needs more in-depth if desired! |
Summary
Closes #73417
This PR adds a "Compact notes" preference that collapses floating Note threads into small avatar indicators, reducing visual clutter while maintaining awareness that feedback exists.
Video walkthrough
compact.notes.PR.mp4
Test plan
Of note (get it), @t-hamano https://github.com/t-hamano/notes-data-generator helps to test this as you can quickly add multiple notes from many users.
🤖 Generated with Claude Code
Open questions to answer
cc @WordPress/gutenberg-design in general for the above.