Skip to content

Conversation

@adamsilverstein
Copy link
Member

@adamsilverstein adamsilverstein commented Oct 17, 2025

What?

Fix a bug where under certain conditions the comment reply form became inaccessible/cur off at the bottom of the screen

Closes #72440

Why?

With very long comments that do not fit in the viewport, users should still be able to enter a new reply.

Considerations:

  • The thread can easily get pushed off the top now, making the top of the thread hard to access for very long threads (in floating mode)
  • Another approach would be to grow the main editor area to accommodate the floating note height, that way a scrollbar would appear. Can someone suggest how/where to do that?

How?

The current PR

  • Checks the bottom of the active thread against the bottom of the sidebar container
  • If there is an overlap shift the active thread up to avoid
  • Ensure other threads are also shifted up.

Testing Instructions

See issue

Testing Instructions for Keyboard

Screenshots or screencast

Adjusting while typing

make.room.at.the.bottom.mp4

@github-actions
Copy link

github-actions bot commented Oct 17, 2025

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: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: jeffpaul <jeffpaul@git.wordpress.org>

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

@adamsilverstein adamsilverstein added [Type] Bug An existing feature does not function as intended [Feature] Notes Phase 3 of the Gutenberg roadmap around block commenting labels Oct 17, 2025
@github-actions
Copy link

Size Change: +44 B (0%)

Total Size: 2.2 MB

Filename Size Change
build/editor/index.min.js 161 kB +44 B (+0.03%)
ℹ️ View Unchanged
Filename Size
build-module/a11y/index.min.js 355 B
build-module/block-editor/utils/fit-text-frontend.min.js 551 B
build-module/block-library/accordion/view.min.js 520 B
build-module/block-library/file/view.min.js 346 B
build-module/block-library/form/view.min.js 528 B
build-module/block-library/image/view.min.js 1.64 kB
build-module/block-library/navigation/view.min.js 1.03 kB
build-module/block-library/query/view.min.js 518 B
build-module/block-library/search/view.min.js 497 B
build-module/interactivity-router/full-page.min.js 451 B
build-module/interactivity-router/index.min.js 11.6 kB
build-module/interactivity/debug.min.js 18.5 kB
build-module/interactivity/index.min.js 14.9 kB
build-module/latex-to-mathml/index.min.js 56.5 kB
build-module/latex-to-mathml/loader.min.js 131 B
build/a11y/index.min.js 1.06 kB
build/annotations/index.min.js 2.38 kB
build/api-fetch/index.min.js 2.83 kB
build/autop/index.min.js 2.18 kB
build/blob/index.min.js 631 B
build/block-directory/index.min.js 8.04 kB
build/block-directory/style-rtl.css 1.05 kB
build/block-directory/style.css 1.05 kB
build/block-editor/content-rtl.css 4.81 kB
build/block-editor/content.css 4.8 kB
build/block-editor/default-editor-styles-rtl.css 224 B
build/block-editor/default-editor-styles.css 224 B
build/block-editor/index.min.js 296 kB
build/block-editor/style-rtl.css 16.2 kB
build/block-editor/style.css 16.2 kB
build/block-library/accordion-heading/style-rtl.css 340 B
build/block-library/accordion-heading/style.css 340 B
build/block-library/accordion-item/style-rtl.css 213 B
build/block-library/accordion-item/style.css 213 B
build/block-library/accordion-panel/style-rtl.css 99 B
build/block-library/accordion-panel/style.css 99 B
build/block-library/archives/editor-rtl.css 61 B
build/block-library/archives/editor.css 61 B
build/block-library/archives/style-rtl.css 90 B
build/block-library/archives/style.css 90 B
build/block-library/audio/editor-rtl.css 149 B
build/block-library/audio/editor.css 151 B
build/block-library/audio/style-rtl.css 132 B
build/block-library/audio/style.css 132 B
build/block-library/audio/theme-rtl.css 134 B
build/block-library/audio/theme.css 134 B
build/block-library/avatar/editor-rtl.css 115 B
build/block-library/avatar/editor.css 115 B
build/block-library/avatar/style-rtl.css 104 B
build/block-library/avatar/style.css 104 B
build/block-library/breadcrumbs/style-rtl.css 203 B
build/block-library/breadcrumbs/style.css 203 B
build/block-library/button/editor-rtl.css 265 B
build/block-library/button/editor.css 265 B
build/block-library/button/style-rtl.css 554 B
build/block-library/button/style.css 554 B
build/block-library/buttons/editor-rtl.css 291 B
build/block-library/buttons/editor.css 291 B
build/block-library/buttons/style-rtl.css 349 B
build/block-library/buttons/style.css 349 B
build/block-library/calendar/style-rtl.css 239 B
build/block-library/calendar/style.css 239 B
build/block-library/categories/editor-rtl.css 132 B
build/block-library/categories/editor.css 131 B
build/block-library/categories/style-rtl.css 152 B
build/block-library/categories/style.css 152 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/code/editor-rtl.css 53 B
build/block-library/code/editor.css 53 B
build/block-library/code/style-rtl.css 139 B
build/block-library/code/style.css 139 B
build/block-library/code/theme-rtl.css 122 B
build/block-library/code/theme.css 122 B
build/block-library/columns/editor-rtl.css 108 B
build/block-library/columns/editor.css 108 B
build/block-library/columns/style-rtl.css 421 B
build/block-library/columns/style.css 421 B
build/block-library/comment-author-avatar/editor-rtl.css 124 B
build/block-library/comment-author-avatar/editor.css 124 B
build/block-library/comment-author-name/style-rtl.css 72 B
build/block-library/comment-author-name/style.css 72 B
build/block-library/comment-content/style-rtl.css 120 B
build/block-library/comment-content/style.css 120 B
build/block-library/comment-date/style-rtl.css 65 B
build/block-library/comment-date/style.css 65 B
build/block-library/comment-edit-link/style-rtl.css 70 B
build/block-library/comment-edit-link/style.css 70 B
build/block-library/comment-reply-link/style-rtl.css 71 B
build/block-library/comment-reply-link/style.css 71 B
build/block-library/comment-template/style-rtl.css 191 B
build/block-library/comment-template/style.css 191 B
build/block-library/comments-pagination-numbers/editor-rtl.css 122 B
build/block-library/comments-pagination-numbers/editor.css 121 B
build/block-library/comments-pagination/editor-rtl.css 168 B
build/block-library/comments-pagination/editor.css 168 B
build/block-library/comments-pagination/style-rtl.css 201 B
build/block-library/comments-pagination/style.css 201 B
build/block-library/comments-title/editor-rtl.css 75 B
build/block-library/comments-title/editor.css 75 B
build/block-library/comments/editor-rtl.css 842 B
build/block-library/comments/editor.css 842 B
build/block-library/comments/style-rtl.css 637 B
build/block-library/comments/style.css 637 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/cover/editor-rtl.css 631 B
build/block-library/cover/editor.css 631 B
build/block-library/cover/style-rtl.css 1.7 kB
build/block-library/cover/style.css 1.69 kB
build/block-library/details/editor-rtl.css 65 B
build/block-library/details/editor.css 65 B
build/block-library/details/style-rtl.css 86 B
build/block-library/details/style.css 86 B
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.6 kB
build/block-library/editor.css 11.6 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/embed/editor-rtl.css 331 B
build/block-library/embed/editor.css 331 B
build/block-library/embed/style-rtl.css 419 B
build/block-library/embed/style.css 419 B
build/block-library/embed/theme-rtl.css 133 B
build/block-library/embed/theme.css 133 B
build/block-library/file/editor-rtl.css 324 B
build/block-library/file/editor.css 324 B
build/block-library/file/style-rtl.css 278 B
build/block-library/file/style.css 278 B
build/block-library/footnotes/style-rtl.css 198 B
build/block-library/footnotes/style.css 197 B
build/block-library/form-input/editor-rtl.css 229 B
build/block-library/form-input/editor.css 229 B
build/block-library/form-input/style-rtl.css 366 B
build/block-library/form-input/style.css 366 B
build/block-library/form-submission-notification/editor-rtl.css 344 B
build/block-library/form-submission-notification/editor.css 341 B
build/block-library/form-submit-button/style-rtl.css 69 B
build/block-library/form-submit-button/style.css 69 B
build/block-library/freeform/editor-rtl.css 2.59 kB
build/block-library/freeform/editor.css 2.59 kB
build/block-library/gallery/editor-rtl.css 615 B
build/block-library/gallery/editor.css 616 B
build/block-library/gallery/style-rtl.css 1.84 kB
build/block-library/gallery/style.css 1.84 kB
build/block-library/gallery/theme-rtl.css 108 B
build/block-library/gallery/theme.css 108 B
build/block-library/group/editor-rtl.css 335 B
build/block-library/group/editor.css 335 B
build/block-library/group/style-rtl.css 103 B
build/block-library/group/style.css 103 B
build/block-library/group/theme-rtl.css 79 B
build/block-library/group/theme.css 79 B
build/block-library/heading/style-rtl.css 188 B
build/block-library/heading/style.css 188 B
build/block-library/html/editor-rtl.css 357 B
build/block-library/html/editor.css 358 B
build/block-library/image/editor-rtl.css 763 B
build/block-library/image/editor.css 763 B
build/block-library/image/style-rtl.css 1.6 kB
build/block-library/image/style.css 1.59 kB
build/block-library/image/theme-rtl.css 137 B
build/block-library/image/theme.css 137 B
build/block-library/index.min.js 266 kB
build/block-library/latest-comments/style-rtl.css 355 B
build/block-library/latest-comments/style.css 354 B
build/block-library/latest-posts/editor-rtl.css 139 B
build/block-library/latest-posts/editor.css 138 B
build/block-library/latest-posts/style-rtl.css 520 B
build/block-library/latest-posts/style.css 520 B
build/block-library/list/style-rtl.css 107 B
build/block-library/list/style.css 107 B
build/block-library/loginout/style-rtl.css 61 B
build/block-library/loginout/style.css 61 B
build/block-library/media-text/editor-rtl.css 321 B
build/block-library/media-text/editor.css 320 B
build/block-library/media-text/style-rtl.css 543 B
build/block-library/media-text/style.css 542 B
build/block-library/more/editor-rtl.css 393 B
build/block-library/more/editor.css 393 B
build/block-library/navigation-link/editor-rtl.css 625 B
build/block-library/navigation-link/editor.css 628 B
build/block-library/navigation-link/style-rtl.css 190 B
build/block-library/navigation-link/style.css 188 B
build/block-library/navigation-submenu/editor-rtl.css 295 B
build/block-library/navigation-submenu/editor.css 294 B
build/block-library/navigation/editor-rtl.css 2.24 kB
build/block-library/navigation/editor.css 2.24 kB
build/block-library/navigation/style-rtl.css 2.27 kB
build/block-library/navigation/style.css 2.25 kB
build/block-library/nextpage/editor-rtl.css 392 B
build/block-library/nextpage/editor.css 392 B
build/block-library/page-list/editor-rtl.css 356 B
build/block-library/page-list/editor.css 356 B
build/block-library/page-list/style-rtl.css 192 B
build/block-library/page-list/style.css 192 B
build/block-library/paragraph/editor-rtl.css 251 B
build/block-library/paragraph/editor.css 251 B
build/block-library/paragraph/style-rtl.css 341 B
build/block-library/paragraph/style.css 340 B
build/block-library/post-author-biography/style-rtl.css 74 B
build/block-library/post-author-biography/style.css 74 B
build/block-library/post-author-name/style-rtl.css 69 B
build/block-library/post-author-name/style.css 69 B
build/block-library/post-author/style-rtl.css 188 B
build/block-library/post-author/style.css 189 B
build/block-library/post-comments-count/style-rtl.css 72 B
build/block-library/post-comments-count/style.css 72 B
build/block-library/post-comments-form/editor-rtl.css 96 B
build/block-library/post-comments-form/editor.css 96 B
build/block-library/post-comments-form/style-rtl.css 525 B
build/block-library/post-comments-form/style.css 525 B
build/block-library/post-comments-link/style-rtl.css 71 B
build/block-library/post-comments-link/style.css 71 B
build/block-library/post-content/style-rtl.css 61 B
build/block-library/post-content/style.css 61 B
build/block-library/post-date/style-rtl.css 62 B
build/block-library/post-date/style.css 62 B
build/block-library/post-excerpt/editor-rtl.css 71 B
build/block-library/post-excerpt/editor.css 71 B
build/block-library/post-excerpt/style-rtl.css 155 B
build/block-library/post-excerpt/style.css 155 B
build/block-library/post-featured-image/editor-rtl.css 719 B
build/block-library/post-featured-image/editor.css 717 B
build/block-library/post-featured-image/style-rtl.css 347 B
build/block-library/post-featured-image/style.css 347 B
build/block-library/post-navigation-link/style-rtl.css 215 B
build/block-library/post-navigation-link/style.css 214 B
build/block-library/post-template/style-rtl.css 414 B
build/block-library/post-template/style.css 414 B
build/block-library/post-terms/style-rtl.css 96 B
build/block-library/post-terms/style.css 96 B
build/block-library/post-time-to-read/style-rtl.css 70 B
build/block-library/post-time-to-read/style.css 70 B
build/block-library/post-title/style-rtl.css 162 B
build/block-library/post-title/style.css 162 B
build/block-library/preformatted/style-rtl.css 125 B
build/block-library/preformatted/style.css 125 B
build/block-library/pullquote/editor-rtl.css 133 B
build/block-library/pullquote/editor.css 133 B
build/block-library/pullquote/style-rtl.css 365 B
build/block-library/pullquote/style.css 365 B
build/block-library/pullquote/theme-rtl.css 176 B
build/block-library/pullquote/theme.css 176 B
build/block-library/query-pagination-numbers/editor-rtl.css 121 B
build/block-library/query-pagination-numbers/editor.css 118 B
build/block-library/query-pagination/editor-rtl.css 154 B
build/block-library/query-pagination/editor.css 154 B
build/block-library/query-pagination/style-rtl.css 237 B
build/block-library/query-pagination/style.css 237 B
build/block-library/query-title/style-rtl.css 64 B
build/block-library/query-title/style.css 64 B
build/block-library/query-total/style-rtl.css 64 B
build/block-library/query-total/style.css 64 B
build/block-library/query/editor-rtl.css 438 B
build/block-library/query/editor.css 438 B
build/block-library/quote/style-rtl.css 238 B
build/block-library/quote/style.css 238 B
build/block-library/quote/theme-rtl.css 233 B
build/block-library/quote/theme.css 236 B
build/block-library/read-more/style-rtl.css 131 B
build/block-library/read-more/style.css 131 B
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/rss/editor-rtl.css 126 B
build/block-library/rss/editor.css 126 B
build/block-library/rss/style-rtl.css 284 B
build/block-library/rss/style.css 283 B
build/block-library/search/editor-rtl.css 199 B
build/block-library/search/editor.css 199 B
build/block-library/search/style-rtl.css 665 B
build/block-library/search/style.css 666 B
build/block-library/search/theme-rtl.css 113 B
build/block-library/search/theme.css 113 B
build/block-library/separator/editor-rtl.css 100 B
build/block-library/separator/editor.css 100 B
build/block-library/separator/style-rtl.css 248 B
build/block-library/separator/style.css 248 B
build/block-library/separator/theme-rtl.css 195 B
build/block-library/separator/theme.css 195 B
build/block-library/shortcode/editor-rtl.css 286 B
build/block-library/shortcode/editor.css 286 B
build/block-library/site-logo/editor-rtl.css 773 B
build/block-library/site-logo/editor.css 770 B
build/block-library/site-logo/style-rtl.css 218 B
build/block-library/site-logo/style.css 218 B
build/block-library/site-tagline/editor-rtl.css 87 B
build/block-library/site-tagline/editor.css 87 B
build/block-library/site-tagline/style-rtl.css 65 B
build/block-library/site-tagline/style.css 65 B
build/block-library/site-title/editor-rtl.css 85 B
build/block-library/site-title/editor.css 85 B
build/block-library/site-title/style-rtl.css 143 B
build/block-library/site-title/style.css 143 B
build/block-library/social-link/editor-rtl.css 314 B
build/block-library/social-link/editor.css 314 B
build/block-library/social-links/editor-rtl.css 339 B
build/block-library/social-links/editor.css 338 B
build/block-library/social-links/style-rtl.css 1.51 kB
build/block-library/social-links/style.css 1.51 kB
build/block-library/spacer/editor-rtl.css 346 B
build/block-library/spacer/editor.css 346 B
build/block-library/spacer/style-rtl.css 48 B
build/block-library/spacer/style.css 48 B
build/block-library/style-rtl.css 15.6 kB
build/block-library/style.css 15.6 kB
build/block-library/table-of-contents/style-rtl.css 83 B
build/block-library/table-of-contents/style.css 83 B
build/block-library/table/editor-rtl.css 394 B
build/block-library/table/editor.css 394 B
build/block-library/table/style-rtl.css 641 B
build/block-library/table/style.css 640 B
build/block-library/table/theme-rtl.css 152 B
build/block-library/table/theme.css 152 B
build/block-library/tag-cloud/editor-rtl.css 92 B
build/block-library/tag-cloud/editor.css 92 B
build/block-library/tag-cloud/style-rtl.css 248 B
build/block-library/tag-cloud/style.css 248 B
build/block-library/template-part/editor-rtl.css 368 B
build/block-library/template-part/editor.css 368 B
build/block-library/template-part/theme-rtl.css 113 B
build/block-library/template-part/theme.css 113 B
build/block-library/term-count/style-rtl.css 63 B
build/block-library/term-count/style.css 63 B
build/block-library/term-description/style-rtl.css 126 B
build/block-library/term-description/style.css 126 B
build/block-library/term-name/style-rtl.css 62 B
build/block-library/term-name/style.css 62 B
build/block-library/term-template/editor-rtl.css 225 B
build/block-library/term-template/editor.css 225 B
build/block-library/term-template/style-rtl.css 114 B
build/block-library/term-template/style.css 114 B
build/block-library/text-columns/editor-rtl.css 95 B
build/block-library/text-columns/editor.css 95 B
build/block-library/text-columns/style-rtl.css 165 B
build/block-library/text-columns/style.css 165 B
build/block-library/theme-rtl.css 715 B
build/block-library/theme.css 719 B
build/block-library/verse/style-rtl.css 98 B
build/block-library/verse/style.css 98 B
build/block-library/video/editor-rtl.css 413 B
build/block-library/video/editor.css 414 B
build/block-library/video/style-rtl.css 202 B
build/block-library/video/style.css 202 B
build/block-library/video/theme-rtl.css 134 B
build/block-library/video/theme.css 134 B
build/block-serialization-default-parser/index.min.js 1.16 kB
build/block-serialization-spec-parser/index.min.js 3.08 kB
build/blocks/index.min.js 56.6 kB
build/commands/index.min.js 17.4 kB
build/commands/style-rtl.css 999 B
build/commands/style.css 1 kB
build/components/index.min.js 271 kB
build/components/style-rtl.css 14 kB
build/components/style.css 14 kB
build/compose/index.min.js 13.8 kB
build/core-commands/index.min.js 4.1 kB
build/core-data/index.min.js 85.1 kB
build/customize-widgets/index.min.js 12.3 kB
build/customize-widgets/style-rtl.css 1.44 kB
build/customize-widgets/style.css 1.44 kB
build/data-controls/index.min.js 793 B
build/data/index.min.js 9.61 kB
build/date/index.min.js 23.6 kB
build/deprecated/index.min.js 755 B
build/dom-ready/index.min.js 476 B
build/dom/index.min.js 4.91 kB
build/edit-post/classic-rtl.css 426 B
build/edit-post/classic.css 427 B
build/edit-post/index.min.js 15.8 kB
build/edit-post/style-rtl.css 3.33 kB
build/edit-post/style.css 3.33 kB
build/edit-site/index.min.js 260 kB
build/edit-site/posts-rtl.css 9.96 kB
build/edit-site/posts.css 9.95 kB
build/edit-site/style-rtl.css 15.9 kB
build/edit-site/style.css 15.9 kB
build/edit-widgets/index.min.js 20 kB
build/edit-widgets/style-rtl.css 4.59 kB
build/edit-widgets/style.css 4.59 kB
build/editor/style-rtl.css 9.96 kB
build/editor/style.css 9.96 kB
build/element/index.min.js 5.19 kB
build/escape-html/index.min.js 586 B
build/format-library/index.min.js 10.6 kB
build/format-library/style-rtl.css 308 B
build/format-library/style.css 308 B
build/hooks/index.min.js 1.83 kB
build/html-entities/index.min.js 494 B
build/i18n/index.min.js 2.46 kB
build/is-shallow-equal/index.min.js 568 B
build/keyboard-shortcuts/index.min.js 1.57 kB
build/keycodes/index.min.js 1.53 kB
build/latex-to-mathml/index.min.js 56.7 kB
build/list-reusable-blocks/index.min.js 2.44 kB
build/list-reusable-blocks/style-rtl.css 1.02 kB
build/list-reusable-blocks/style.css 1.02 kB
build/media-utils/index.min.js 3.96 kB
build/notices/index.min.js 1.11 kB
build/nux/index.min.js 1.88 kB
build/nux/style-rtl.css 622 B
build/nux/style.css 618 B
build/patterns/index.min.js 8.63 kB
build/patterns/style-rtl.css 703 B
build/patterns/style.css 703 B
build/plugins/index.min.js 2.14 kB
build/preferences-persistence/index.min.js 2.15 kB
build/preferences/index.min.js 3.3 kB
build/preferences/style-rtl.css 415 B
build/preferences/style.css 415 B
build/primitives/index.min.js 1.01 kB
build/priority-queue/index.min.js 1.61 kB
build/private-apis/index.min.js 1.03 kB
build/react-i18n/index.min.js 832 B
build/react-refresh-entry/index.min.js 9.44 kB
build/react-refresh-runtime/index.min.js 3.59 kB
build/redux-routine/index.min.js 3.36 kB
build/reusable-blocks/index.min.js 2.92 kB
build/reusable-blocks/style-rtl.css 275 B
build/reusable-blocks/style.css 275 B
build/rich-text/index.min.js 12.9 kB
build/router/index.min.js 5.96 kB
build/server-side-render/index.min.js 1.9 kB
build/shortcode/index.min.js 1.58 kB
build/style-engine/index.min.js 2.31 kB
build/token-list/index.min.js 740 B
build/undo-manager/index.min.js 915 B
build/url/index.min.js 3.98 kB
build/vendors/react-dom.min.js 43 kB
build/vendors/react-jsx-runtime.min.js 691 B
build/vendors/react.min.js 4.27 kB
build/viewport/index.min.js 1.22 kB
build/warning/index.min.js 454 B
build/widgets/index.min.js 7.83 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@github-actions
Copy link

Flaky tests detected in c73f774.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/18602854315
📝 Reported issues:

@jasmussen
Copy link
Contributor

Thanks for the video. I wouldn't extend the canvas to fit the comments if we can find an alternative. I don't think we character limit notes, so inevitably they can become very long, and I believe how we elide and collapse is going to be something we evolve over time, such as always collapsing comments with a "read more" when they are longer than n characters, and even collapsing threads when there are more than n comments. I have a feeling @jarekmorawski may hae instincts around this.

But for the immediate future, I wonder if we can apply a max-height to comments, and then allow them to scroll. We might need canvas extension for extreme cases, after all, but we probably still need to pair that with scrolling. What do you think?

// otherwise the user may not be able to add a reply.
let threadBottom = selectedThreadTop + selectedThreadHeight;
const sidebarHeight =
commentSidebarRef.current?.getBoundingClientRect().height || 0;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's declare commentSidebarRef as a dependency to fix the ESLint warning.

@Mamaduka
Copy link
Member

I can confirm that this fixes the mentioned issue. But I agree that there's room for improvement.

Currently, if you have notes with a large body of text, some notes for remaining blocks might not be visible. Also, when replying to a large note, there is no way to scroll up to the previous comment, which will make actual replies harder.

Screencast

CleanShot.2025-10-20.at.15.02.03.mp4

@ntsekouras
Copy link
Contributor

Currently, if you have notes with a large body of text, some notes for remaining blocks might not be visible. Also, when replying to a large note, there is no way to scroll up to the previous comment, which will make actual replies harder.

Yeah, I just tested the PR and you cannot read the top of the comments, so I'm not sure how usable it's going to be this way either. I haven't checked this feature much and possible technical restrictions, but I'd expect some kind of overflow/scrollbars to be the proper fix..

@jeffpaul jeffpaul added the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 27, 2025
@adamsilverstein
Copy link
Member Author

Yeah, I just tested the PR and you cannot read the top of the comments, so I'm not sure how usable it's going to be this way either. I haven't checked this feature much and possible technical restrictions, but I'd expect some kind of overflow/scrollbars to be the proper fix..

True. Still, the most important part is being able to add a new comment, which this PR addresses.

One way to fix the top cutoff would be if the user scrolled to the top, push the notes down from the top. Another idea is making the notes themselves scrollable.

@jeffpaul
Copy link
Member

One way to fix the top cutoff would be if the user scrolled to the top, push the notes down from the top. Another idea is making the notes themselves scrollable.

I'm more in favor of the former and not the later, meaning I'd prefer to avoid another scrollbar/scrolling experience specific for notes. In testing in Google Docs, seems as though they treat comments there as within the doc canvas itself where the doc can scroll out of view if comments are lengthy enough. That handling won't work (or at least feels suboptimal) within Gutenberg, so aiming for the "if the user scrolled to the top, push the notes down from the top" would be my preference.

@adamsilverstein
Copy link
Member Author

Currently, if you have notes with a large body of text, some notes for remaining blocks might not be visible. Also, when replying to a large note, there is no way to scroll up to the previous comment, which will make actual replies harder.

aiming for the "if the user scrolled to the top, push the notes down from the top" would be my preference.

I'm going to work on this idea - if the user scrolls to the top of the editor while commenting on a thread, we can push down the thread so it doesn't overlap there as well.

We will still have an edge case where you create a very short post with no scrolling, then add a very long comment thread. Perhaps the best solution would be to detect this scenario and use an alternate solution in that instance such as making the thread itself be scrollable.

@adamsilverstein
Copy link
Member Author

@jeffpaul I gave #72547 a test and was surprised how well it works, can you give it a try? You can test in in Playground. It does add scrolling, but its a fairly intuitive and browser native approach.

@jeffpaul
Copy link
Member

@adamsilverstein I concur, testing that Playground link for 72547 is a definite improvement. Any immediate concerns you have with moving towards merging that in place of this PR (asked differently, anything from this PR that you feel pairs well with the work in 72547)?

@adamsilverstein
Copy link
Member Author

@adamsilverstein I concur, testing that Playground link for 72547 is a definite improvement. Any immediate concerns you have with moving towards merging that in place of this PR (asked differently, anything from this PR that you feel pairs well with the work in 72547)?

No, but for completeness sake, I also created a PR to test out the idea of resizing the editor iframe (body) to set its min-height to match the notes required space. Has some rough edges, but gets the idea across: #72811

@adamsilverstein
Copy link
Member Author

Closing in favor of #72811

@github-project-automation github-project-automation bot moved this from 🔎 Needs Review to ✅ Done in WordPress 6.9 Editor Tasks Oct 31, 2025
@ellatrix ellatrix removed the Backport to WP 6.9 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 2, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Notes Phase 3 of the Gutenberg roadmap around block commenting [Type] Bug An existing feature does not function as intended

Projects

Development

Successfully merging this pull request may close these issues.

Floating notes sometimes cut off at page bottom

7 participants