diff --git a/packages/block-library/src/comment-template/hooks.js b/packages/block-library/src/comment-template/hooks.js index fa10b0ccf2ee68..30c40c8b58b50c 100644 --- a/packages/block-library/src/comment-template/hooks.js +++ b/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,7 +32,8 @@ 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 ); @@ -37,6 +41,14 @@ export const useCommentQueryArgs = ( { postId } ) => { 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, diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js index 780a544514f4ea..e656d35406e3c0 100644 --- a/packages/block-library/src/comments-pagination/edit.js +++ b/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 ( + + { __( + 'Comments Pagination block: paging comments is disabled in the Discussion Settings' + ) } + + ); + } + return ( <> { hasNextPreviousBlocks && (