Feature: Need to add “Show More” / “Show Less” toggle in Note.

[hbhalodia]

What?

Closes #72822

Why?

• Adds the feature to collapse the long notes and show a button called, show more and show less exactly as how google docs commenting works for larger notes.

How?

• Adds the state and effect to check for the comment length and add the button.
• Based on the button click, it shows the full comment or hide the same.

Testing Instructions

1. Go to any post/page.
2. Insert a block and add a note with more text.
3. Check the button for show more and show less, it should work as expected.

Testing Instructions for Keyboard

• The button should work with keyboard navigation, and functionality should work as expected.

Screenshots or screencast

Screen.Recording.2026-04-17.at.3.13.53.PM.mov

Use of AI Tools

• Claude Code.
• Model - Claude Sonnet 4.6
• Asked AI to review and issue and provide a quick and easy solution.
• Have reviewed the code generated and looks good, Some more review needed and we can land this PR.

[github-actions]

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.

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: hbhalodia <hbhalodia@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>
Co-authored-by: theminaldiwan <multidots1896@git.wordpress.org>

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

[t-hamano]

Thanks for the update!

There is one more point to correct. This button should not be displayed when editing a note.

[hbhalodia]

Thanks @t-hamano For the review.

Further, I have handled some more of edgecase. The overall functionality is like below,

1. If the note is large on initial render, it will be collapsed and will have Show more button.
2. If the note is small on initial render, it would not have any button.
3. When editing a note, despite of user's previous state, it would always would be uncollapsed mode (as user edited the note, so we should show them edited version in full), and would have button show less to make it collapsed.
4. No button is shown while editing the note.
5. When edited, if the note content is small, the button would not be shown.

Let me know if there are any other edge cases needs to be handled, I guess most of them are covered.

Thanks,

[t-hamano]

This PR works well for me.

@Mamaduka @adamsilverstein, Are there any better approaches besides using element.scrollHeight > element.clientHeight to detect element overflow and display a button?

[Mamaduka]

@t-hamano, I'll try to do a proper review later. I think some of the logic can be simplified/derived. But without design feedback, I think final reviews are low priority, since we're not sure what the end product will be.

[jasmussen]

Nice work! Good feedback has already been given, worth following.

Some of the nuance embedded in this is: we have this design to consider:

But this button is not the same. This button is for when a single comment note is very long and complicated. In that sense, the PR feels fairly close. Here's a quick sketch:

Some subtle differences to the PR:

• Small button
• Sentence case: "Show more" and "Show less", not "Show More" and "Show Less"

An awkward detail is that the tertiary button has left/right padding. The above mockup does not. So the text inside the button will not align with the text of the note. Probably this is fine?

[jasmussen]

Unless there's a true "text only" button we can use? CC: @ciampo

Edit: "Link" from @wordpress/ui might do it: #77743 (comment)

[ciampo]

Link and Button represent different semantics, and should be used interchangably — if I understand correctly from the screenshots, we need button semantics but the Button component doesn't expose a variant that matches those styles? What about the minimal variant?

cc @mirka and @jameskoster , and also mentioning #77098 as likely related.

[jameskoster]

Unless the element triggers a url change I agree this should be a button. I think this is the kind of scenario we added the Unstyled variant for. That way we can make the entire 'row' (including the strokes) interactive for a larger click target. Edit: I realised I was looking at the '3 more replies' element 🙈

[ciampo]

Unless the element triggers a url change I agree this should be a button. I think this is the kind of scenario we added the Unstyled variant for. That way we can make the entire 'row' (including the strokes) interactive for a larger click target.

Yes, we could try the unstyled variant + using:

• for the text color, --wpds-color-fg-interactive-brand for resting state (plus --wpds-color-fg-interactive-brand-active for hover/focus/active, --wpds-color-fg-interactive-neutral-disabled when disabeld)
• for typography:
  • either various --wpds-typography-* DS tokens
  • or the Text component