Comments Query Loop: Add Post Comments Form block to Comments Query Loop template

[SantosGuillamot]

What?

Add the Post Comments Form block to the Comments Query Loop template to ensure it appears directly after inserting the comments in the editor.

Fixes #40225

Why?

It's reasonable to assume that, when users add the Comments Loop, they will want to use the Post Comments Form as well. They could always delete it if it isn't needed.

How?

Just adding the Post Comments Form block to the template.

Testing Instructions

In trunk:

1. Go to a Post, Page, or Site Editor and add the Comments Query Loop.
2. Check that only the Comment Template and the Comments Pagination blocks are added automatically. You would have to add the Post Comments Form manually.

In the PR branch:

1. Go to a Post, Page, or Site Editor and add the Comments Query Loop.
2. Check that, apart from the Comment Template and the Comments Pagination, the Post Comments Form is added automatically.

[github-actions]

Size Change: +8 B (0%)

Total Size: 1.22 MB

Filename	Size	Change
build/block-library/index.min.js	175 kB	+8 B (0%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	993 B
build/admin-manifest/index.min.js	1.24 kB
build/annotations/index.min.js	2.77 kB
build/api-fetch/index.min.js	2.27 kB
build/autop/index.min.js	2.15 kB
build/blob/index.min.js	487 B
build/block-directory/index.min.js	6.49 kB
build/block-directory/style-rtl.css	1.01 kB
build/block-directory/style.css	1.01 kB
build/block-editor/default-editor-styles-rtl.css	378 B
build/block-editor/default-editor-styles.css	378 B
build/block-editor/index.min.js	149 kB
build/block-editor/style-rtl.css	15.5 kB
build/block-editor/style.css	15.5 kB
build/block-library/blocks/archives/editor-rtl.css	61 B
build/block-library/blocks/archives/editor.css	60 B
build/block-library/blocks/archives/style-rtl.css	65 B
build/block-library/blocks/archives/style.css	65 B
build/block-library/blocks/audio/editor-rtl.css	150 B
build/block-library/blocks/audio/editor.css	150 B
build/block-library/blocks/audio/style-rtl.css	111 B
build/block-library/blocks/audio/style.css	111 B
build/block-library/blocks/audio/theme-rtl.css	125 B
build/block-library/blocks/audio/theme.css	125 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	59 B
build/block-library/blocks/avatar/style.css	59 B
build/block-library/blocks/block/editor-rtl.css	161 B
build/block-library/blocks/block/editor.css	161 B
build/block-library/blocks/button/editor-rtl.css	445 B
build/block-library/blocks/button/editor.css	445 B
build/block-library/blocks/button/style-rtl.css	560 B
build/block-library/blocks/button/style.css	560 B
build/block-library/blocks/buttons/editor-rtl.css	292 B
build/block-library/blocks/buttons/editor.css	292 B
build/block-library/blocks/buttons/style-rtl.css	275 B
build/block-library/blocks/buttons/style.css	275 B
build/block-library/blocks/calendar/style-rtl.css	207 B
build/block-library/blocks/calendar/style.css	207 B
build/block-library/blocks/categories/editor-rtl.css	84 B
build/block-library/blocks/categories/editor.css	83 B
build/block-library/blocks/categories/style-rtl.css	79 B
build/block-library/blocks/categories/style.css	79 B
build/block-library/blocks/code/style-rtl.css	103 B
build/block-library/blocks/code/style.css	103 B
build/block-library/blocks/code/theme-rtl.css	124 B
build/block-library/blocks/code/theme.css	124 B
build/block-library/blocks/columns/editor-rtl.css	108 B
build/block-library/blocks/columns/editor.css	108 B
build/block-library/blocks/columns/style-rtl.css	406 B
build/block-library/blocks/columns/style.css	406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css	125 B
build/block-library/blocks/comment-author-avatar/editor.css	125 B
build/block-library/blocks/comment-template/style-rtl.css	127 B
build/block-library/blocks/comment-template/style.css	127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css	123 B
build/block-library/blocks/comments-pagination-numbers/editor.css	121 B
build/block-library/blocks/comments-pagination/editor-rtl.css	222 B
build/block-library/blocks/comments-pagination/editor.css	209 B
build/block-library/blocks/comments-pagination/style-rtl.css	235 B
build/block-library/blocks/comments-pagination/style.css	231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css	95 B
build/block-library/blocks/comments-query-loop/editor.css	95 B
build/block-library/blocks/cover/editor-rtl.css	546 B
build/block-library/blocks/cover/editor.css	547 B
build/block-library/blocks/cover/style-rtl.css	1.56 kB
build/block-library/blocks/cover/style.css	1.56 kB
build/block-library/blocks/embed/editor-rtl.css	293 B
build/block-library/blocks/embed/editor.css	293 B
build/block-library/blocks/embed/style-rtl.css	417 B
build/block-library/blocks/embed/style.css	417 B
build/block-library/blocks/embed/theme-rtl.css	124 B
build/block-library/blocks/embed/theme.css	124 B
build/block-library/blocks/file/editor-rtl.css	300 B
build/block-library/blocks/file/editor.css	300 B
build/block-library/blocks/file/style-rtl.css	255 B
build/block-library/blocks/file/style.css	255 B
build/block-library/blocks/file/view.min.js	353 B
build/block-library/blocks/freeform/editor-rtl.css	2.44 kB
build/block-library/blocks/freeform/editor.css	2.44 kB
build/block-library/blocks/gallery/editor-rtl.css	961 B
build/block-library/blocks/gallery/editor.css	964 B
build/block-library/blocks/gallery/style-rtl.css	1.51 kB
build/block-library/blocks/gallery/style.css	1.51 kB
build/block-library/blocks/gallery/theme-rtl.css	122 B
build/block-library/blocks/gallery/theme.css	122 B
build/block-library/blocks/group/editor-rtl.css	333 B
build/block-library/blocks/group/editor.css	333 B
build/block-library/blocks/group/style-rtl.css	57 B
build/block-library/blocks/group/style.css	57 B
build/block-library/blocks/group/theme-rtl.css	78 B
build/block-library/blocks/group/theme.css	78 B
build/block-library/blocks/heading/style-rtl.css	76 B
build/block-library/blocks/heading/style.css	76 B
build/block-library/blocks/html/editor-rtl.css	332 B
build/block-library/blocks/html/editor.css	333 B
build/block-library/blocks/image/editor-rtl.css	731 B
build/block-library/blocks/image/editor.css	730 B
build/block-library/blocks/image/style-rtl.css	529 B
build/block-library/blocks/image/style.css	535 B
build/block-library/blocks/image/theme-rtl.css	124 B
build/block-library/blocks/image/theme.css	124 B
build/block-library/blocks/latest-comments/style-rtl.css	284 B
build/block-library/blocks/latest-comments/style.css	284 B
build/block-library/blocks/latest-posts/editor-rtl.css	199 B
build/block-library/blocks/latest-posts/editor.css	198 B
build/block-library/blocks/latest-posts/style-rtl.css	447 B
build/block-library/blocks/latest-posts/style.css	446 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 B
build/block-library/blocks/media-text/editor-rtl.css	266 B
build/block-library/blocks/media-text/editor.css	263 B
build/block-library/blocks/media-text/style-rtl.css	493 B
build/block-library/blocks/media-text/style.css	490 B
build/block-library/blocks/more/editor-rtl.css	431 B
build/block-library/blocks/more/editor.css	431 B
build/block-library/blocks/navigation-link/editor-rtl.css	708 B
build/block-library/blocks/navigation-link/editor.css	706 B
build/block-library/blocks/navigation-link/style-rtl.css	115 B
build/block-library/blocks/navigation-link/style.css	115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	299 B
build/block-library/blocks/navigation-submenu/editor.css	299 B
build/block-library/blocks/navigation-submenu/view.min.js	375 B
build/block-library/blocks/navigation/editor-rtl.css	2.03 kB
build/block-library/blocks/navigation/editor.css	2.04 kB
build/block-library/blocks/navigation/style-rtl.css	1.93 kB
build/block-library/blocks/navigation/style.css	1.92 kB
build/block-library/blocks/navigation/view.min.js	2.85 kB
build/block-library/blocks/nextpage/editor-rtl.css	395 B
build/block-library/blocks/nextpage/editor.css	395 B
build/block-library/blocks/page-list/editor-rtl.css	363 B
build/block-library/blocks/page-list/editor.css	363 B
build/block-library/blocks/page-list/style-rtl.css	175 B
build/block-library/blocks/page-list/style.css	175 B
build/block-library/blocks/paragraph/editor-rtl.css	157 B
build/block-library/blocks/paragraph/editor.css	157 B
build/block-library/blocks/paragraph/style-rtl.css	260 B
build/block-library/blocks/paragraph/style.css	260 B
build/block-library/blocks/post-author/style-rtl.css	175 B
build/block-library/blocks/post-author/style.css	176 B
build/block-library/blocks/post-comments-form/style-rtl.css	446 B
build/block-library/blocks/post-comments-form/style.css	446 B
build/block-library/blocks/post-comments/style-rtl.css	521 B
build/block-library/blocks/post-comments/style.css	521 B
build/block-library/blocks/post-excerpt/editor-rtl.css	73 B
build/block-library/blocks/post-excerpt/editor.css	73 B
build/block-library/blocks/post-excerpt/style-rtl.css	69 B
build/block-library/blocks/post-excerpt/style.css	69 B
build/block-library/blocks/post-featured-image/editor-rtl.css	721 B
build/block-library/blocks/post-featured-image/editor.css	721 B
build/block-library/blocks/post-featured-image/style-rtl.css	153 B
build/block-library/blocks/post-featured-image/style.css	153 B
build/block-library/blocks/post-template/editor-rtl.css	99 B
build/block-library/blocks/post-template/editor.css	98 B
build/block-library/blocks/post-template/style-rtl.css	323 B
build/block-library/blocks/post-template/style.css	323 B
build/block-library/blocks/post-terms/style-rtl.css	73 B
build/block-library/blocks/post-terms/style.css	73 B
build/block-library/blocks/post-title/style-rtl.css	80 B
build/block-library/blocks/post-title/style.css	80 B
build/block-library/blocks/preformatted/style-rtl.css	103 B
build/block-library/blocks/preformatted/style.css	103 B
build/block-library/blocks/pullquote/editor-rtl.css	198 B
build/block-library/blocks/pullquote/editor.css	198 B
build/block-library/blocks/pullquote/style-rtl.css	370 B
build/block-library/blocks/pullquote/style.css	370 B
build/block-library/blocks/pullquote/theme-rtl.css	167 B
build/block-library/blocks/pullquote/theme.css	167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css	122 B
build/block-library/blocks/query-pagination-numbers/editor.css	121 B
build/block-library/blocks/query-pagination/editor-rtl.css	221 B
build/block-library/blocks/query-pagination/editor.css	211 B
build/block-library/blocks/query-pagination/style-rtl.css	234 B
build/block-library/blocks/query-pagination/style.css	231 B
build/block-library/blocks/query/editor-rtl.css	369 B
build/block-library/blocks/query/editor.css	369 B
build/block-library/blocks/quote/style-rtl.css	213 B
build/block-library/blocks/quote/style.css	213 B
build/block-library/blocks/quote/theme-rtl.css	223 B
build/block-library/blocks/quote/theme.css	226 B
build/block-library/blocks/read-more/style-rtl.css	132 B
build/block-library/blocks/read-more/style.css	132 B
build/block-library/blocks/rss/editor-rtl.css	202 B
build/block-library/blocks/rss/editor.css	204 B
build/block-library/blocks/rss/style-rtl.css	289 B
build/block-library/blocks/rss/style.css	288 B
build/block-library/blocks/search/editor-rtl.css	165 B
build/block-library/blocks/search/editor.css	165 B
build/block-library/blocks/search/style-rtl.css	397 B
build/block-library/blocks/search/style.css	398 B
build/block-library/blocks/search/theme-rtl.css	64 B
build/block-library/blocks/search/theme.css	64 B
build/block-library/blocks/separator/editor-rtl.css	140 B
build/block-library/blocks/separator/editor.css	140 B
build/block-library/blocks/separator/style-rtl.css	233 B
build/block-library/blocks/separator/style.css	233 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	474 B
build/block-library/blocks/shortcode/editor.css	474 B
build/block-library/blocks/site-logo/editor-rtl.css	759 B
build/block-library/blocks/site-logo/editor.css	759 B
build/block-library/blocks/site-logo/style-rtl.css	181 B
build/block-library/blocks/site-logo/style.css	181 B
build/block-library/blocks/site-tagline/editor-rtl.css	86 B
build/block-library/blocks/site-tagline/editor.css	86 B
build/block-library/blocks/site-title/editor-rtl.css	84 B
build/block-library/blocks/site-title/editor.css	84 B
build/block-library/blocks/social-link/editor-rtl.css	177 B
build/block-library/blocks/social-link/editor.css	177 B
build/block-library/blocks/social-links/editor-rtl.css	674 B
build/block-library/blocks/social-links/editor.css	673 B
build/block-library/blocks/social-links/style-rtl.css	1.37 kB
build/block-library/blocks/social-links/style.css	1.36 kB
build/block-library/blocks/spacer/editor-rtl.css	332 B
build/block-library/blocks/spacer/editor.css	332 B
build/block-library/blocks/spacer/style-rtl.css	48 B
build/block-library/blocks/spacer/style.css	48 B
build/block-library/blocks/table/editor-rtl.css	471 B
build/block-library/blocks/table/editor.css	472 B
build/block-library/blocks/table/style-rtl.css	481 B
build/block-library/blocks/table/style.css	481 B
build/block-library/blocks/table/theme-rtl.css	188 B
build/block-library/blocks/table/theme.css	188 B
build/block-library/blocks/tag-cloud/style-rtl.css	226 B
build/block-library/blocks/tag-cloud/style.css	227 B
build/block-library/blocks/template-part/editor-rtl.css	149 B
build/block-library/blocks/template-part/editor.css	149 B
build/block-library/blocks/template-part/theme-rtl.css	101 B
build/block-library/blocks/template-part/theme.css	101 B
build/block-library/blocks/text-columns/editor-rtl.css	95 B
build/block-library/blocks/text-columns/editor.css	95 B
build/block-library/blocks/text-columns/style-rtl.css	166 B
build/block-library/blocks/text-columns/style.css	166 B
build/block-library/blocks/verse/style-rtl.css	87 B
build/block-library/blocks/verse/style.css	87 B
build/block-library/blocks/video/editor-rtl.css	571 B
build/block-library/blocks/video/editor.css	572 B
build/block-library/blocks/video/style-rtl.css	173 B
build/block-library/blocks/video/style.css	173 B
build/block-library/blocks/video/theme-rtl.css	124 B
build/block-library/blocks/video/theme.css	124 B
build/block-library/common-rtl.css	934 B
build/block-library/common.css	932 B
build/block-library/editor-rtl.css	10.2 kB
build/block-library/editor.css	10.2 kB
build/block-library/reset-rtl.css	478 B
build/block-library/reset.css	478 B
build/block-library/style-rtl.css	11.3 kB
build/block-library/style.css	11.3 kB
build/block-library/theme-rtl.css	689 B
build/block-library/theme.css	694 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.83 kB
build/blocks/index.min.js	46.9 kB
build/components/index.min.js	223 kB
build/components/style-rtl.css	14.9 kB
build/components/style.css	14.9 kB
build/compose/index.min.js	11.2 kB
build/core-data/index.min.js	14.5 kB
build/customize-widgets/index.min.js	11 kB
build/customize-widgets/style-rtl.css	1.39 kB
build/customize-widgets/style.css	1.39 kB
build/data-controls/index.min.js	663 B
build/data/index.min.js	8.64 kB
build/date/index.min.js	32 kB
build/deprecated/index.min.js	518 B
build/dom-ready/index.min.js	336 B
build/dom/index.min.js	4.58 kB
build/edit-navigation/index.min.js	15.8 kB
build/edit-navigation/style-rtl.css	4.04 kB
build/edit-navigation/style.css	4.05 kB
build/edit-post/classic-rtl.css	546 B
build/edit-post/classic.css	547 B
build/edit-post/index.min.js	30 kB
build/edit-post/style-rtl.css	7.18 kB
build/edit-post/style.css	7.18 kB
build/edit-site/index.min.js	46.9 kB
build/edit-site/style-rtl.css	7.79 kB
build/edit-site/style.css	7.76 kB
build/edit-widgets/index.min.js	16.3 kB
build/edit-widgets/style-rtl.css	4.4 kB
build/edit-widgets/style.css	4.39 kB
build/editor/index.min.js	38.4 kB
build/editor/style-rtl.css	3.71 kB
build/editor/style.css	3.71 kB
build/element/index.min.js	4.29 kB
build/escape-html/index.min.js	548 B
build/format-library/index.min.js	6.62 kB
build/format-library/style-rtl.css	571 B
build/format-library/style.css	571 B
build/hooks/index.min.js	1.66 kB
build/html-entities/index.min.js	454 B
build/i18n/index.min.js	3.79 kB
build/is-shallow-equal/index.min.js	535 B
build/keyboard-shortcuts/index.min.js	1.83 kB
build/keycodes/index.min.js	1.41 kB
build/list-reusable-blocks/index.min.js	1.75 kB
build/list-reusable-blocks/style-rtl.css	838 B
build/list-reusable-blocks/style.css	838 B
build/media-utils/index.min.js	2.94 kB
build/notices/index.min.js	957 B
build/nux/index.min.js	2.12 kB
build/nux/style-rtl.css	751 B
build/nux/style.css	749 B
build/plugins/index.min.js	1.98 kB
build/preferences/index.min.js	1.2 kB
build/primitives/index.min.js	949 B
build/priority-queue/index.min.js	611 B
build/react-i18n/index.min.js	704 B
build/react-refresh-entry/index.min.js	8.44 kB
build/react-refresh-runtime/index.min.js	7.31 kB
build/redux-routine/index.min.js	2.69 kB
build/reusable-blocks/index.min.js	2.24 kB
build/reusable-blocks/style-rtl.css	256 B
build/reusable-blocks/style.css	256 B
build/rich-text/index.min.js	11.2 kB
build/server-side-render/index.min.js	1.61 kB
build/shortcode/index.min.js	1.52 kB
build/token-list/index.min.js	668 B
build/url/index.min.js	1.99 kB
build/vendors/react-dom.min.js	38.5 kB
build/vendors/react.min.js	4.34 kB
build/viewport/index.min.js	1.08 kB
build/warning/index.min.js	280 B
build/widgets/index.min.js	7.21 kB
build/widgets/style-rtl.css	1.16 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.07 kB

_{compressed-size-action}

[c4rl0sbr4v0]

LGTM!

[paaljoachim]

WP 5.9.3.
Using this method to test the PR Gutenberg build.
Twenty Twenty Two.
Chrome

I removed the Post Comments block and added in the Comments Query Loop block. This is what I see:

Backend

Frontend

Looks good!

Btw.
Post comments block should be removed making the Comments Query Loop the default.

[paaljoachim]

Great! It does the job.
Thank you!

[paaljoachim]

The question comes up should this be backported to WP 6.0?
It would in general make it easier for the user if it was included.

[gziolo]

Noting that Post Comment block is still marked as experimental in the Gutenberg plugin:

gutenberg/packages/block-library/src/index.js

Lines 265 to 276 in 415e404

	export const __experimentalRegisterExperimentalCoreBlocks = process.env
	.IS_GUTENBERG_PLUGIN
	? ( { enableFSEBlocks } = {} ) => {
	[
	// Experimental blocks.
	postAuthorName,
	// Full Site Editing blocks.
	...( enableFSEBlocks
	? [
	commentAuthorAvatar,
	navigationArea,
	postComment,

[adamziel]

@paaljoachim post-comments-form is an experimental block, it would have to be stabilized for this change to be backported.

[paaljoachim]

Alrighty! Thanks for the feedback Greg @gziolo and Adam @adamziel !

[c4rl0sbr4v0]

I found some differences between the behavior of this block vs the form that is being rendered on the Post Comments block function.

Also, there is a "bug" in Core that, if we have the Core comment-reply.js file enqueued. It is having a display issue.

I will create an issue.

[michalczaplinski]

Could you link the issue here @c4rl0sbr4v0 ? 🙂

[ockham]

Could you link the issue here @c4rl0sbr4v0 ? 🙂

I think Carlos didn't end up filing one after we decided that we'll include most relevant information in #40268. (I think that most of these issues will now be fixed by the latest state of #40268, plus maybe some additional styling of the Post Comments Form block.)

[ockham]

@adamziel and @gziolo If we're going to ship the Comment Query Loop block (and friends, i.e. Comment Template, Comment Author Name, Comment Content, etc) in WP 6.0, we really need the Post Comments Form block. Can we still stabilize it and get it into WP 6.0?

[michalczaplinski]

Thank you @ockham ! :)

Yup, I saw this now - I was just looking for more context when I first saw this PR!

[gziolo]

@adamziel and @gziolo If we're going to ship the Comment Query Loop block (and friends, i.e. Comment Template, Comment Author Name, Comment Content, etc) in WP 6.0, we really need the Post Comments Form block. Can we still stabilize it and get it into WP 6.0?

@priethor, @annezazu - what do you think? I have never tried using the Post Comment Form block so I can’t tell without testing. Is there any demo presenting the block?

[ockham]

@gziolo One thing I'm aware of is that the block is currently displaying the following in the editor:

I.e. we'll need to implement a placeholder that visually represents better what it looks like on the frontend.

[ockham]

Note that this PR is blocked since the Post Comments Form is still marked as experimental.

See the comments on the PR for further discussion.

[ockham]

@gziolo One thing I'm aware of is that the block is currently displaying the following in the editor:

I.e. we'll need to implement a placeholder that visually represents better what it looks like on the frontend.

FWIW, there's an old issue with some mockups for the Post Comments Form.

I forgot to say: We're not going to try to implement a full-fledged, editable, Comments Form Template block (as described in #24221) for now; that would be way beyond scope for WP 6.0.

[carolinan]

Without the comments form block or the post comments block, there is no way to add a comment when a block theme is active.

Personally, I would prefer if the basic, no template comments form was made stable because I am concerned that the alternative is to revert the addition of the new comment query blocks and revert the deprecation of the post comments block.
Why? Because you would have to use the post comments block for the form, and if you combined the post comments block with the query, the comments would be displayed twice.

(The post comment block which was mentioned is deprecated and displayed a single comment, using a comment id)

[ockham]

Thanks @carolinan! I agree with your reasoning 😄 We've started work required for stabilizing the Post Comments Form block.

[ockham]

I've filed a small PR (#40452) that marks the Post Comments Form block as stable. We should merge it after #40368 has been merged, which will then unblock this PR.

[ockham]

#40368 and #40452 have been merged, thus unblocking this PR 😄

[gziolo]

Cherry-picked to wp/6.0 branch for WordPress 6.0 Beta 3 release.