Notes iteration for WordPress 7.1

[annezazu]

Following on from the work in #66377 and #73260 for the last two respective releases, this issue serves as the iteration issue for Notes enhancements, tasks, and bug fixes planned for WordPress 7.1.

• Support for Notes on specific content within a block (Inline block commenting Inline block commenting  #59445)
• Support for Notes on content across more than one block (e.g., text spanning multiple paragraph blocks) (Support Notes on content spanning multiple blocks #73416)
• Add support for rich text to Notes (Add support for rich text in Notes (emoji, basic formatting, images) #73413)
• Sending notifications for Notes (beyond what was achieved in Notes: Send email notifications to post author #73030, beginning with Add Notification support for Notes (fka Block Commenting) #72184). This should include for mentions, responses, follow a note.
• Minified Notes experience (Add a “Minified Notes Mode” for reduced visual footprint (similar to Google Docs' “Minimize comments”) #73417)
• Add "apply suggestions" feature to Notes (Explore “Suggest mode" support for Notes #73411)
• Introducing a new "Suggestion mode" tool for exposing Notes features (Explore editor view modes for Notes (similar to Google Docs viewing, editing, and suggesting modes) #73410)
• Add emoji reactions to Notes (Add emoji reactions as a first class comment type #75144, Notes: emoji reactions try storing as custom comment type #75549)

Designs

Pulling from @jasmussen lovely comment here, below are some designs for implementing aspects of the above scope.

Adding notes, even inline

Make a selection, click the floating button (or we add a button in the main block toolbar). Notes can exist in the canvas even with a sidebar open.

Managing notes

The notes top toolbar button appears when you have notes in a post or page, not before.

You can see notes also in the notes sidebar, with a clear visual separator between unresolved and resolved notes.

Suggesting

Making suggested changes requires us to find new space in the toolbar for a mode selector. Not much room there, an alternative is to integrate with the kebab menu:

The above leans into a PR by @youknowriad that simplifies “distraction” free to a boolean choice, and moves the individual properties into the Preferences page:

Note the addition of a new Show notes in the canvas toggle there, on by default. In context of compact notes, the motivation for compact notes is presumably to afford showing notes in the canvas, but without them taking up a full sidebars worth of space, and with lower emphasis.

By leveraging the chevron to expand/collapse the panel, we use existing patterns for toggling note footprint, we make it someting you can toggle on and off easily while you are working across many notes, and instead of fragmenting the choice of note style into none/compact/default, we make it a boolean choice: do you want notes in the canvas or not?

Other

Included also, previous notes on avatars:

... and multi-user cursors:

[jeffpaul]

@annezazu are you ok if we move here the still open enhancement, bug, or task tickets from the 7.0 iteration issue? Also, for the images above, can we get those added into relevant issues (and if none exist, new issues opened)?

[annezazu]

For features, I’m purposefully sharing in scope and priority issues right now. The rest can be listed as “nice to have”s minus any need to fix bugs of course.

[t-hamano]

Notes can exist in the canvas even with a sidebar open.

I'm wondering how this design should be adapted for tablet/mobile view. Perhaps something like this? We need to consider what it should look like in all scenarios, as we may have to reserve a dedicated area for the floating notes bar.

cc @jasmussen @Mamaduka @adamsilverstein

Also note that we are considering integrating device preview and resizable editors in #75121.

[jasmussen]

I'm wondering how this design should be adapted for tablet/mobile view. Perhaps something like this? We need to consider what it should look like in all scenarios, as we may have to reserve a dedicated area for the floating notes bar.

That's an excellent point to push, thank you. Here's a first draft, please share your pushback/feeback/thoughts. Desktop is as usual:

Tablet could benefit from compact notes:

Arguably missing from the above, what happens if you expand the notes tray? I imagine it would cover content until you collapse agin. But let me know instincts.

Mobile:

For mobile, in-canvas notes exist only insofar as their "markings" exist. Annotated images have a blue overlay, text selections have their marks. Click either of those to open a modal, which on mobile can show as a bottom sheet.

[jasmussen]

I'm wondering how this design should be adapted for tablet/mobile view. Perhaps something like this? We need to consider what it should look like in all scenarios, as we may have to reserve a dedicated area for the floating notes bar.

Your sketch feels valid to me.