Summary

As suggested by @aaronjorbin in this comment, let's add the ability for users to leave emoji reactions on Notes. This allows quick, lightweight feedback on notes without requiring a full text reply, enabling more expressive and efficient collaboration between content creators and reviewers.

During development, it was decided to expand the scope of "reactions" to become a fully featured comment type. This approach enables emoji reactions to notes as well as to blocks themselves. In the future reactions could apply to Posts, Media, Comments or or data types.

Background & Motivation

Currently, Notes only support text-based replies. Emoji reactions provide several benefits:

1. Faster feedback loops - A quick thumbs up or heart is faster than typing "I agree" or "Looks good"
2. Reduced notification noise - Simple acknowledgments don't need full reply threads
3. Non-verbal expression - Emojis convey tone and sentiment that can be lost in text
4. Familiar UX pattern - Users expect this from tools like Slack, Google Docs, and GitHub

This aligns with the WordPress 7.0 Notes iteration goals of improving the collaborative editing experience.

Proposed Implementation

Based on Google Docs' implementation, the following features should be included:

Core Features

1. Add emoji reaction to a note

   • Display an emoji picker button on notes
   • Allow selecting from a set of common emoji reactions
   • Show aggregated emoji reactions below the note content

2. Multiple reactions support

   • Multiple users can react with the same or different emojis
   • Reactions of the same type stack with a count (e.g., "👍 2" next to a thumbs up)
   • Users can add multiple different reactions to the same note

3. Reaction details

   • Add "See emoji reaction details" option in the note's menu (...)
   • Show a panel/popover listing each reaction with:
     • The emoji
     • Who added it (user name/avatar)
     • When it was added (timestamp)

4. Remove reaction

   • Users can click their own reaction to remove it
   • Only the user who added a reaction can remove it

UI/UX Considerations

• Emoji reactions should display compactly below the note content
• The emoji picker should be easily accessible but not intrusive
• Use a curated subset of common emoji reactions (similar to GitHub/Slack approach):
  • Suggested set: 👍 👎 ❤️ 🎉 😄 😕 👀 🚀
• Reactions should update in real-time when Real-time Collaboration is enabled

Acceptance Criteria

• Users can add an emoji reaction to any note
• Users can add multiple different emoji reactions to the same note
• Multiple users can add the same emoji reaction (reactions stack with count)
• Emoji reactions display below the note content with counts
• Users can view reaction details showing who reacted and when (using readable time diffs eg. '3 days ago')
• Users can remove their own emoji reactions by clicking them
• Emoji reactions persist correctly (saved/loaded from database)
• Reactions work correctly with existing Notes permissions
• Accessibility: emoji picker and reactions are keyboard navigable and screen reader friendly

Out of Scope (for this issue)

• Emoji reactions directly on content (without a note) - this could be a separate feature
• Custom emoji support

Related Issues

• Parent: Notes iteration for WordPress 7.0 #73260 (Notes iteration for WordPress 7.0)
• Related: Inline block commenting  #59445 (Notes on specific content within a block)
• Related: Sync Engine and Real-Time Collaboration #52593 (Real-time Collaboration consideration)

Design Reference

See comment with Google Docs screenshots showing:

• Emoji reactions stacking on notes
• Reaction details panel showing who/when
• Multiple reactions from different users

Technical Notes

Existing Infrastructure

Codebase exploration found no existing emoji picker component in Gutenberg. However, these building blocks are available:

• UI Components: Button, Dropdown, Popover, and Menu components from @wordpress/components can be composed to build the emoji picker UI
• Comment System: Comments currently use TextareaAutosize with RawHTML rendering - reactions would be stored separately from comment content
• Rich Text: Emoji characters are already handled correctly in rich-text navigation and display
• Autocompleter Pattern: The existing autocompleter system (used for @mentions) demonstrates how to build selection UIs with emoji display

Implementation Approach

1. Build emoji reaction picker using Dropdown + Button components
2. Store reactions as note/comment metadata (likely via REST API extension)
3. Display reactions as compact Button components below note content
4. Add "See reaction details" menu item to existing note actions menu

Open Questions

• Exact data structure for storing reactions (comment meta vs. separate endpoint)
• Maximum reactions per user per note (suggest: 1 of each emoji type)
• Integration with notifications system