Notes: Show an icon on the "Add note" block menu item

[adamsilverstein]

Claude drafted this one from the thread on #78205:

What?

Follow up to #78205 (comment)

Adds the Notes comment icon to the "Add note" item in the block Options (ellipsis) menu.

Why?

@jasmussen suggested that if we don't add a dedicated notes button to the block toolbar (#78205), the ellipsis menu item should at least get a notes icon and a shortcut key. This PR is that alternative, so both approaches can be compared side by side.

The shortcut half already exists on trunk: core/editor/new-note (Cmd+Option+M / Ctrl+Alt+M) was added in #75287 and is already shown next to the menu item. So the only missing piece was the icon.

How?

• Pass icon={ commentIcon } to the MenuItem in add-note-menu-item.jsx. It's the same icon the Notes sidebar toggle and the Notes: Add an "Add note" block toolbar button once the post has notes #78205 toolbar button use.
• MenuItem renders the icon on the right, after the shortcut, the same way the Lock item shows its lock icon.
• Add an e2e test checking the menu item shows both an icon and a shortcut. It fails on trunk and passes with the change.

Testing Instructions

1. Open a post and add a paragraph.
2. Open the block toolbar Options menu.
3. The "Add note" item shows the shortcut followed by the notes icon.
4. Click it, the new note form opens as before.

Testing Instructions for Keyboard

1. Select a block, press Cmd+Option+M (Ctrl+Alt+M on Windows/Linux), the new note form opens.
2. Open the Options menu with the keyboard and arrow down to "Add note", the icon doesn't change the item's accessible name or focus behavior.

Screenshots or screencast

Testing Instructions

Use of AI Tools

Code and description both written with 🤖 Claude Code, after I pointed it at the review thread. I will review and test.

🤖 Generated with Claude Code

https://claude.ai/code/session_01LaS1xrdxmR6Hpkv1xTe5CV

[github-actions]

🤖 PR meta 🤖

🎉 Props

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

Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: -71 B (0%)

Total Size: 8.22 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	613 kB	-71 B (-0.01%)

_{575818f Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	d641142	trunk	% Change
timeToFirstByte	56.6 ms +12.37% -1.77%	57.6 ms +7.55% -2.52%	-1.74%
largestContentfulPaint	98 ms +10.2% -6.12%	100 ms +0% -8%	-2%
lcpMinusTtfb	35.85 ms +26.22% -2.65%	35.45 ms +17.91% -5.78%	1.13%
wpBeforeTemplate	28.61 ms +18.04% -1.4%	28.99 ms +10.62% -0.97%	-1.31%
wpTemplate	24.48 ms +3.15% -3.47%	24.55 ms +3.91% -3.83%	-0.29%
wpTotal	52.92 ms +11.77% -1.68%	53.88 ms +7.74% -2.36%	-1.78%
wpMemoryUsage	7.61 MB +0% -0%	7.57 MB +0% -0%	0.51%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	d641142	trunk	% Change
timeToFirstByte	47.8 ms +7.43% -1.57%	47.75 ms +6.6% -2.41%	0.1%
largestContentfulPaint	104 ms +3.85% -3.85%	104 ms +0% -3.85%	0%
lcpMinusTtfb	55.55 ms +2.25% -3.87%	53.85 ms +3.81% -0.84%	3.16%
wpBeforeTemplate	26.56 ms +6.4% -1.84%	26.32 ms +7.18% -2.28%	0.91%
wpTemplate	18.43 ms +4.34% -3.53%	18.1 ms +3.09% -1.6%	1.82%
wpTotal	44.69 ms +7.92% -1.52%	44.78 ms +6.63% -2.43%	-0.2%
wpMemoryUsage	6.22 MB +0% -0%	6.19 MB +0% -0%	0.58%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	d641142	trunk	% Change
mediaProcessingJpeg	398.3 ms +0.24% -0.56%	399.24 ms +0.78% -0.61%	-0.24%
mediaProcessingAvif	6071.1 ms +0.16% -0.22%	6079.99 ms +0.67% -0.06%	-0.15%
mediaProcessingJpegToAvif	4203.93 ms +0.13% -0.54%	4202.58 ms +0.2% -0.1%	0.03%

media-upload

Metric	d641142	trunk	% Change
jpegUploadProcessing	1433.45 ms +35.76% -2.01%	1425.48 ms +0.95% -0.37%	0.56%
pngUploadProcessing	185.84 ms +20.82% -4.09%	218.45 ms +14.46% -18.83%	-14.93%
largeJpegUploadProcessing	1406.87 ms +0.47% -0.24%	1413.87 ms +0.95% -0.91%	-0.5%
multipleImageUploadProcessing	1615.19 ms +6.57% -2.08%	1590.33 ms +32.55% -0.8%	1.56%

post-editor

Metric	d641142	trunk	% Change
serverResponse	482.67 ms +5.52% -3.85%	502.21 ms +3.4% -6.85%	-3.89%
firstPaint	195.67 ms +10.29% -9.72%	208.21 ms +14.09% -18.88%	-6.02%
domContentLoaded	1074.39 ms +0.38% -1.75%	1069.82 ms +0.9% -1.79%	0.43%
loaded	1075.64 ms +0.38% -1.76%	1070.91 ms +0.95% -1.76%	0.44%
firstContentfulPaint	422.19 ms +6.27% -8.07%	431.51 ms +4.48% -2.63%	-2.16%
firstBlock	3213.22 ms +0.33% -0.55%	3191.15 ms +1.04% -0.73%	0.69%
type	17.24 ms +9.8% -4.7%	18.07 ms +8.41% -8.8%	-4.59%
typeWithoutInspector	17.67 ms +5.55% -5.43%	17.26 ms +4% -5.68%	2.38%
typeWithTopToolbar	24.18 ms +4.34% -9.97%	22.28 ms +8.57% -4.04%	8.53%
typeContainer	8.68 ms +7.95% -3%	8.95 ms +3.58% -8.6%	-3.02%
focus	71.21 ms +5.67% -8.71%	67.58 ms +6.48% -1.76%	5.37%
firstFocus	217.54 ms +0% -0%	223.63 ms +0% -0%	-2.72%
selectAll	517.08 ms +5.13% -0.6%	508.21 ms +4.87% -0.86%	1.75%
listViewOpen	59.9 ms +8.98% -3.44%	62.83 ms +2.47% -4.65%	-4.66%
inserterOpen	22.32 ms +10.93% -7.03%	24.6 ms +23.66% -10.04%	-9.27%
inserterHover	2.14 ms +10.28% -14.02%	2.15 ms +14.88% -9.77%	-0.47%
inserterSearch	7.8 ms +5.77% -5.38%	7.53 ms +11.95% -10.36%	3.59%
loadPatterns	611.67 ms +2.09% -3.22%	613.9 ms +2.98% -2.35%	-0.36%
wpTotal	473.14 ms +5.49% -4.06%	492.68 ms +3.33% -6.98%	-3.97%
wpMemoryUsage	13.14 MB +0% -0%	13.11 MB +0% -0%	0.28%
wpDbQueries	54 +0% -0%	54 +0% -0%	0%

site-editor

Metric	d641142	trunk	% Change
serverResponse	333.95 ms +0.74% -1.46%	341.92 ms +1.74% -4.01%	-2.33%
firstPaint	178.54 ms +17.21% -10.15%	185.74 ms +9.38% -12.36%	-3.88%
domContentLoaded	859.35 ms +1.29% -3.61%	856.76 ms +1.29% -2.27%	0.3%
loaded	860.15 ms +1.28% -3.6%	857.59 ms +1.3% -2.26%	0.3%
firstContentfulPaint	353.8 ms +2.21% -1.4%	349.11 ms +4.31% -17.67%	1.34%
firstBlock	3029.23 ms +0.84% -0.44%	3039.8 ms +2.12% -1.06%	-0.35%
type	15.04 ms +7.31% -4.59%	15.51 ms +3.8% -3.68%	-3.03%
navigate	91.75 ms +18.83% -7.86%	88.45 ms +16.47% -5.98%	3.73%
loadPatterns	952.01 ms +4.1% -5.28%	966.99 ms +3.75% -12.03%	-1.55%
loadPages	1079.76 ms +1.67% -1.43%	1090.87 ms +0.45% -0.34%	-1.02%
wpTotal	325.47 ms +0.86% -1.45%	333.69 ms +1.75% -4.23%	-2.46%
wpMemoryUsage	12.11 MB +0% -0%	12.09 MB +0% -0%	0.13%
wpDbQueries	44 +0% -2.27%	44 +0% -2.27%	0%

_{575818f Run}

[adamsilverstein]

@jasmussen I'm not sure how I feel about the placement of the icon, what do you think?

Also, going back to the Figma designs, I see you specced the floating add note button:

I have this approach testable in:

• Add floating "Add note" button beside the selected block or text selection #78223

[jasmussen]

Let's do it.

One aspect: I would have liked the icon on the left, so things line up better. But that requires an options-menu refactor to the new Menu V2, which is out of scope for this effort. So to start, this works for me.

[richtabor]

I don't think it's really adding anything more but noise to the menu.

[adamsilverstein]

I don't think it's really adding anything more but noise to the menu.

What do you think of the other approaches proposed: promoting to the block toolbar or putting in a floating popup similar to Google Docs?

[fcoveram]

Agree with Rich. This solution feels noisy. The main affordance challenge is what #78205 is trying to solve rather than tweaking the menu.

[annezazu]

Conceptually, I thought I'd like this a lot more than I do. As is, I don't think this adds a ton of value though.

[annezazu]

Close this out. Let's not pursue it.