Comments Query Loop: Improve the context handling in inner blocks

lib/compat/experimental/blocks.php

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Temporary compatibility shims for features present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'build_comments_query_vars_from_block' ) ) {
+	/**
+	 * Helper function that constructs a comment query vars array from the passed block properties.
+	 *
+	 * It's used with the Comment Query Loop inner blocks.
+	 *
+	 * @param WP_Block $block Block instance.
+	 *
+	 * @return array Returns the comment query parameters to use with the WP_Comment_Query constructor.
+	 */
+	function build_comment_query_vars_from_block( $block ) {
+		$comment_args = array(
+			'orderby'                   => 'comment_date_gmt',
+			'order'                     => 'ASC',
+			'status'                    => 'approve',
+			'no_found_rows'             => false,
+			'update_comment_meta_cache' => false, // We lazy-load comment meta for performance.
+		);
+
+		if ( ! empty( $block->context['postId'] ) ) {
+			$comment_args['post_id'] = (int) $block->context['postId'];
+		}
+
+		if ( get_option( 'thread_comments' ) ) {
+			$comment_args['hierarchical'] = 'threaded';
+		} else {
+			$comment_args['hierarchical'] = false;
+		}
+
+		$per_page = ! empty( $block->context['comments/perPage'] ) ? (int) $block->context['comments/perPage'] : 0;
+		if ( 0 === $per_page && get_option( 'page_comments' ) ) {
+			$per_page = (int) get_query_var( 'comments_per_page' );
+			if ( 0 === $per_page ) {
+				$per_page = (int) get_option( 'comments_per_page' );
+			}
+		}
+		if ( $per_page > 0 ) {
+			$comment_args['number'] = $per_page;
+			$page                   = (int) get_query_var( 'cpage' );
+
+			if ( $page ) {
+				$comment_args['offset'] = ( $page - 1 ) * $per_page;
+			} elseif ( 'oldest' === get_option( 'default_comments_page' ) ) {
+				$comment_args['offset'] = 0;
+			}
+		}
+
+		return $comment_args;
+	}
+}

lib/load.php

@@ -116,6 +116,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php';
 require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php';
 require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php';
+require __DIR__ . '/compat/experimental/blocks.php';
 
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/block-patterns.php';

packages/block-library/src/comment-template/block.json

@@ -7,7 +7,7 @@
 	"parent": [ "core/comments-query-loop" ],
 	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [ "queryId", "queryPerPage", "postId" ],
+	"usesContext": [ "postId" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -114,7 +114,7 @@ const CommentsList = ( {
 
 export default function CommentTemplateEdit( {
 	clientId,
-	context: { postId, queryPerPage },
+	context: { postId, 'comments/perPage': perPage },
 } ) {
 	const blockProps = useBlockProps();
 
@@ -139,12 +139,12 @@ export default function CommentTemplateEdit( {
 	);
 
 	// We convert the flat list of comments to tree.
-	// Then, we show only a maximum of `queryPerPage` number of comments.
+	// Then, we show only a maximum of `perPage` number of comments.
 	// This is because passing `per_page` to `getEntityRecords()` does not
 	// take into account nested comments.
 	const comments = useMemo(
-		() => convertToTree( rawComments ).slice( 0, queryPerPage ),
-		[ rawComments, queryPerPage ]
+		() => convertToTree( rawComments ).slice( 0, perPage ),
+		[ rawComments, perPage ]
 	);
 
 	if ( ! rawComments ) {

packages/block-library/src/comment-template/index.php

@@ -53,25 +53,17 @@ function block_core_comment_template_render_comments( $comments, $block ) {
  * defined by the block's inner blocks.
  */
 function render_block_core_comment_template( $attributes, $content, $block ) {
-
-	$post_id = $block->context['postId'];
-
 	// Bail out early if the post ID is not set for some reason.
-	if ( ! isset( $post_id ) ) {
+	if ( empty( $block->context['postId'] ) ) {
 		return '';
 	}
 
-	$number = $block->context['queryPerPage'];
-
-	// Get an array of comments for the current post.
-	$comments = get_approved_comments(
-		$post_id,
-		array(
-			'number'       => $number,
-			'hierarchical' => 'threaded',
-		)
+	$comment_query = new WP_Comment_Query(
+		build_comment_query_vars_from_block( $block )
 	);
 
+	// Get an array of comments for the current post.
+	$comments = $comment_query->get_comments();
 	if ( count( $comments ) === 0 ) {
 		return '';
 	}

packages/block-library/src/comments-pagination-numbers/block.json

@@ -3,11 +3,11 @@
 	"apiVersion": 2,
 	"name": "core/comments-pagination-numbers",
 	"title": "Comments Pagination Numbers",
-  "category": "theme",
+	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",
 	"textdomain": "default",
-	"usesContext": [ "queryId", "queryPerPage", "postId" ],
+	"usesContext": [ "postId" ],
 	"supports": {
 		"reusable": false,
 		"html": false

packages/block-library/src/comments-pagination-numbers/index.php

@@ -15,37 +15,26 @@
  * @return string Returns the pagination numbers for the comments.
  */
 function render_block_core_comments_pagination_numbers( $attributes, $content, $block ) {
-	// Get the post ID from which comments should be retrieved.
-	$post_id = isset( $block->context['postId'] )
-		? $block->context['postId']
-		: get_the_id();
-
-	if ( ! $post_id ) {
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
 		return '';
 	}
 
-	// Get the 'comments per page' setting.
-	$per_page = isset( $block->context['queryPerPage'] )
-		? $block->context['queryPerPage']
-		: get_option( 'comments_per_page' );
-
-	// Get the total number of pages.
-	$comments = get_approved_comments( $post_id );
-	$total    = get_comment_pages_count( $comments, $per_page );
-
-	// Get the number of the default page.
-	$default_page = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
+	$comments_query = new WP_Comment_Query(
+		build_comment_query_vars_from_block( $block )
+	);
 
 	// Get the current comment page from the URL.
 	$current = get_query_var( 'cpage' );
 	if ( ! $current ) {
-		$current = $default_page;
+		// Get the number of the default page.
+		$current = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
 	}
 
 	// Render links.
 	$content = paginate_comments_links(
 		array(
-			'total'     => $total,
+			'total'     => $comments_query->max_num_pages,
 			'current'   => $current,
 			'prev_next' => false,
 			'echo'      => false,

packages/block-library/src/comments-query-loop/block.json

@@ -7,21 +7,16 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"queryId": {
+		"perPage": {
 			"type": "number"
 		},
-		"queryPerPage": {
-			"type": "number",
-			"default": 50
-		},
 		"tagName": {
 			"type": "string",
 			"default": "div"
 		}
 	},
 	"providesContext": {
-		"queryId": "queryId",
-		"queryPerPage": "queryPerPage"
+		"comments/perPage": "perPage"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],

packages/block-library/src/comments-query-loop/edit.js

@@ -18,7 +18,7 @@ import QueryToolbar from './toolbar';
 const TEMPLATE = [ [ 'core/comment-template' ] ];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { queryPerPage, tagName: TagName } = attributes;
+	const { perPage, tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -28,10 +28,7 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<BlockControls>
-				<QueryToolbar
-					queryPerPage={ queryPerPage }
-					setQuery={ setAttributes }
-				/>
+				<QueryToolbar perPage={ perPage } setQuery={ setAttributes } />
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl

packages/block-library/src/comments-query-loop/toolbar.js

@@ -11,7 +11,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
 
-export default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {
+export default function CommentsQueryLoopToolbar( { perPage, setQuery } ) {
 	return (
 		<ToolbarGroup>
 			<Dropdown
@@ -41,11 +41,11 @@ export default function CommentsQueryLoopToolbar( { queryPerPage, setQuery } ) {
 										return;
 									}
 									setQuery( {
-										queryPerPage: num,
+										perPage: num,
 									} );
 								} }
 								step="1"
-								value={ queryPerPage }
+								value={ perPage }
 								isDragEnabled={ false }
 							/>
 						</BaseControl>

test/integration/fixtures/blocks/core__comments-query-loop.json

@@ -4,7 +4,6 @@
 		"name": "core/comments-query-loop",
 		"isValid": true,
 		"attributes": {
-			"queryPerPage": 50,
 			"tagName": "div"
 		},
 		"innerBlocks": [],