Fix comments query loop pagination not respecting Discussion Settings (…

…#40284)

* hide comments pagination in the editor if not enabled

* if comments pagination not enabled fetch max allowed items

+ fix possible error where if someone set more than 100 it would return
zero results in the editor but work ok when rendered by the backend

* update selector to return only used data

Co-authored-by: George Mamadashvili <[email protected]>

* clarify that in editor we are rendering pagination placeholder

this is to enable styling the controls regardless of data and state

* Present a user facing warning if comments pagination was disabled.

This will take place of the pagination placeholder.
+ Remove unneeded comment about comments pagination being a placeholder.

* align disabled comments warning copy with other comments blocks

Co-authored-by: George Mamadashvili <[email protected]>

packages/block-library/src/comment-template/hooks.js

@@ -7,6 +7,9 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { addQueryArgs } from '@wordpress/url';
 import apiFetch from '@wordpress/api-fetch';
 
+// This is limited by WP REST API
+const MAX_COMMENTS_PER_PAGE = 100;
+
 /**
  * Return an object with the query args needed to fetch the default page of
  * comments.
@@ -29,14 +32,23 @@ export const useCommentQueryArgs = ( { postId } ) => {
 
 	// Get the Discussion settings that may be needed to query the comments.
 	const {
-		commentsPerPage: perPage,
+		pageComments,
+		commentsPerPage,
 		defaultCommentsPage: defaultPage,
 	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { __experimentalDiscussionSettings } = getSettings();
 		return __experimentalDiscussionSettings;
 	} );
 
+	// WP REST API doesn't allow fetching more than max items limit set per single page of data.
+	// As for the editor performance is more important than completeness of data and fetching only the
+	// max allowed for single page should be enough for the purpose of design and laying out the page.
+	// Fetching over the limit would return an error here but would work with backend query.
+	const perPage = pageComments
+		? Math.min( commentsPerPage, MAX_COMMENTS_PER_PAGE )
+		: MAX_COMMENTS_PER_PAGE;
+
 	// Get the number of the default page.
 	const page = useDefaultPageIndex( {
 		defaultPage,

packages/block-library/src/comments-pagination/edit.js

@@ -7,6 +7,7 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
+	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -53,6 +54,7 @@ export default function QueryPaginationEdit( {
 			].includes( innerBlock.name );
 		} );
 	}, [] );
+
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -63,6 +65,27 @@ export default function QueryPaginationEdit( {
 		],
 		__experimentalLayout: usedLayout,
 	} );
+
+	// Get the Discussion settings
+	const pageComments = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings?.pageComments;
+	}, [] );
+
+	// If paging comments is not enabled in the Discussion Settings then hide the pagination
+	// controls. We don't want to remove them from the template so that when the user enables
+	// paging comments, the controls will be visible.
+	if ( ! pageComments ) {
+		return (
+			<Warning>
+				{ __(
+					'Comments Pagination block: paging comments is disabled in the Discussion Settings'
+				) }
+			</Warning>
+		);
+	}
+
 	return (
 		<>
 			{ hasNextPreviousBlocks && (