Block Comments: Match the comment form UI to the design#71898
Merged
Block Comments: Match the comment form UI to the design#71898
Conversation
t-hamano
added
[Type] Enhancement
t-hamano
commented
Sep 25, 2025
Comment on lines
+128
to
+132
| // Vertical padding is to match the standard 40px control height when rows=1, | ||
| // in conjunction with the 20px line-height. | ||
| // "Standard" metrics are 10px 12px, but subtracts 1px each to account for the border width. | ||
| padding: 9px 11px; | ||
| line-height: 20px !important; |
Contributor
Author
There was a problem hiding this comment.
This code is taken from the TextAreaControl component:
Contributor
There was a problem hiding this comment.
Thanks for clarifying and thanks for adding the CSS comments, very useful for the context.
|
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 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. |
Contributor
Author
|
@WordPress/gutenberg-design, I've used what I believe to be the best button text and placeholder text for the 6.9 release based on the discussion in #71774. Feedback is welcome. |
github-project-automation
bot
moved this to 🔎 Needs Review
in WordPress 6.9 Editor Tasks
|
Size Change: +177 B (+0.01%) Total Size: 1.95 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in c8b3b71. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18024647747
|
Mamaduka
reviewed
Sep 25, 2025
| __( | ||
| 'Adding a comment will re-open this discussion….' | ||
| ) | ||
| __( 'Comment to reopen' ) |
Member
There was a problem hiding this comment.
Having a placeholder for just this form variation seems inconsistent. If we want to highlight that actions reopen the comment, a help text may be more suitable for this purpose.
Contributor
Author
There was a problem hiding this comment.
If we want to highlight that actions reopen the comment, a help text may be more suitable for this purpose.
There was an error in the first screenshot I posted. The button text is "Resume and reply" and not "Reply" to be precise, so how about just removing the placeholder altogether? Updated in e1d0d59
| placeholder={ placeholderText || '' } | ||
| /> | ||
| <HStack spacing="3" justify="flex-start" wrap> | ||
| <HStack spacing="2" justify="flex-end" wrap> |
Member
There was a problem hiding this comment.
We need some guidelines for spacing. I'm never sure which one to use for these components 😓
jasmussen
approved these changes
Sep 25, 2025
Contributor
jasmussen
left a comment
jasmussen
left a comment
There was a problem hiding this comment.
This is good to go, nice work, thank you for the persistence and patience.
The table makes me notice an aspect of the block comments from the mockups that hasn't properly been communicated in the issues (apologies). To help explain, here's a grid of states:
1 and 2 seem well underway.
3, 4 and 5 have all the right ingredients in place, but the behavior isn't completely precise yet. To elaborate:
3 is the unfocused comment that is attached to the block that is selected. I.e. you open a document and it already has comments. You might click a block first, and ideally that highlights the sidebar comment as active.
The idea is that the 1.5px blue border is not a part of the active comment bubble style, it's part of its focus style. This is directly tied to the separate conversation on one of the issues that asks whether adding a comment should focus the bubble or the first tabbable inside. If we end up with focusing the input, it's not clear you'll ever see the active comment bubble with a blue border. But assuming the present state continues, then this would be the tab states:
Bubble, first tabbable, second tabbable, 3rd tabbable (input).
Not a blocker for this PR at all, it just occurred to me. Let me know if there's a better issue to move this to, or whether it needs a new issue.
Member
|
Thanks for clarifying the last three points, @jasmussen! One more question: can we have two comments in different states? For example, I've selected a heading block, and its comment is highlighted (state 3). Then, I clicked on the comment that belongs to an image block; this comment will be focused (state 4-5). The block selection remains on the heading; should its comment remain highlighted? |
Contributor
What I'm sharing is an instinct, and all such instincts will have to be malleable to what constraints are an aspect of the implementation. In another thread it was decided that selecting the block when clicking a comment attached to it wasn't appropriate, because selecting a block also transfers focus there. But the states above were nevertheless designed based on the idea that selecting a comment also selected a block, i.e. no, clicking another comment would focus that comment, AND select its block, so you wouldn't be able to get into the situation you describe. That only works if we have a function that is able to select a block without also transferring focus there. This is the same state you get to if you say, click a paragraph, then click an item in its inspector: the block is selected, but not focused. It feels valid to me, but again, I'm apprehensive of timelines and developer constraints, so I'm happy to support the most reasonable path forward. |
Member
I would like to find a workaround for this, but also want to be careful not to mess up anything in the I suppose we can implement a stopgap solution (in a separate PR) for now and then work on improving the selection. |
Contributor
Author
|
I took the exact figures from the Figma file and made some adjustments. What do you think?
|
Contributor
Author
|
I tried to truncate the button text instead of wrapping it in c8b3b71. How about this? 
|
Member
We could give it a try. We'll have more details with actual translations. |
Mamaduka
approved these changes
Sep 26, 2025
github-project-automation
bot
moved this from 🔎 Needs Review
to ✅ Done
in WordPress 6.9 Editor Tasks
Contributor
|
As I noted, not a blocker for this PR, or arguably 6.9, but just to follow up and be clear, this is the image I was thinking of: 
We can explain it of as focus-within for now, but it looks like two focus styles, one for the comment itself, and one for the input inside. That's where I'd expect when focus transfers to the input, the blue border around the comment falls back to a 1px gray 300 on the comment itself. |
Contributor
Author
|
@jasmussen To improve accessibility, I'm trying to make making threads themselves focusable: #71883 If that PR gets merged, I'll follow up by working on improving the focus style. |
Contributor
Author
|
I tried to implement the design provided in #71898 (review). I hope I understand correctly: #71961 |
t-hamano
added
[Feature] Notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #71774
What?
Update the UI of the comment form to match the design. There are no changes in functionality.
Screenshots or screencast
Add New Comment
Reply to Unresolved Thread
Reply to Resolved Thread