Comments Query Loop: Add discuss options to the block

docs/reference-guides/core-blocks.md

@@ -204,7 +204,7 @@ An advanced block that allows displaying post comments based on different query
 -	**Name:** core/comments-query-loop
 -	**Category:** theme
 -	**Supports:** align (full, wide), color (background, gradients, link, text), ~~html~~
--	**Attributes:** perPage, tagName
+-	**Attributes:** inherit, order, perPage, tagName
 
 ## Cover
 

lib/compat/experimental/blocks.php

@@ -16,9 +16,9 @@
 	 * @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.
@@ -52,6 +52,11 @@ function build_comment_query_vars_from_block( $block ) {
 			}
 		}
 
+		$comment_args['order'] = ! empty( $block->context['comments/order'] ) ? $block->context['comments/order'] : null;
+		if ( empty( $comment_args['order'] ) && get_option( 'comment_order' ) ) {
+			$comment_args['order'] = get_option( 'comment_order' );
+		}
+
 		return $comment_args;
 	}
 }
@@ -90,3 +95,24 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) {
 		return null;
 	}
 }
+
+if ( ! function_exists( 'extend_block_editor_settings_with_discussion_settings' ) ) {
+	/**
+	 * Workaround for getting discussion settings as block editor settings
+	 * so any user can access to them without needing to be an admin.
+	 *
+	 * @param array $settings Default editor settings.
+	 *
+	 * @return array Filtered editor settings.
+	 */
+	function extend_block_editor_settings_with_discussion_settings( $settings ) {
+		$settings['__experimentalDiscussionSettings'] = array(
+			'pageComments'        => get_option( 'page_comments' ),
+			'commentsPerPage'     => get_option( 'comments_per_page' ),
+			'defaultCommentsPage' => get_option( 'default_comments_page' ),
+			'commentOrder'        => get_option( 'comment_order' ),
+		);
+		return $settings;
+	}
+}
+add_filter( 'block_editor_settings_all', 'extend_block_editor_settings_with_discussion_settings' );

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": [ "comments/perPage", "postId" ],
+	"usesContext": [ "comments/perPage", "postId", "comments/order" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

@@ -114,33 +114,46 @@ const CommentsList = ( {
 
 export default function CommentTemplateEdit( {
 	clientId,
-	context: { postId, 'comments/perPage': perPage },
+	context: { postId, 'comments/perPage': perPage, 'comments/order': order },
 } ) {
 	const blockProps = useBlockProps();
 
 	const [ activeComment, setActiveComment ] = useState();
-
+	const {
+		__experimentalDiscussionSettings: { commentOrder, commentsPerPage },
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings();
+	} );
 	const { rawComments, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
 
+			const commentQuery = {
+				post: postId,
+				status: 'approve',
+				context: 'embed',
+				order: order || commentOrder,
+			};
+
+			if ( order ) {
+				commentQuery.order = order;
+			}
 			return {
-				rawComments: getEntityRecords( 'root', 'comment', {
-					post: postId,
-					status: 'approve',
-					order: 'asc',
-					context: 'embed',
-				} ),
+				rawComments: getEntityRecords(
+					'root',
+					'comment',
+					commentQuery
+				),
 				blocks: getBlocks( clientId ),
 			};
 		},
-		[ postId, clientId ]
+		[ postId, clientId, order ]
 	);
 
 	// TODO: Replicate the logic used on the server.
-	perPage = perPage || 50;
-
+	perPage = perPage || commentsPerPage;
 	// We convert the flat list of comments to tree.
 	// Then, we show only a maximum of `perPage` number of comments.
 	// This is because passing `per_page` to `getEntityRecords()` does not

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

@@ -44,7 +44,7 @@ export const convertToTree = ( data ) => {
 			// If the comment has a "parent", then find that parent in the table that
 			// we have created above and push the current comment to the array of its
 			// children.
-			table[ item.parent ].children.push( table[ item.id ] );
+			table[ item.parent ]?.children.push( table[ item.id ] );
 		} else {
 			// Otherwise, if the comment has no parent (also works if parent is 0)
 			// that means that it's a top-level comment so we can find it in the table

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

@@ -7,7 +7,7 @@
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays a list of page numbers for comments pagination.",
 	"textdomain": "default",
-	"usesContext": [ "comments/perPage", "postId" ],
+	"usesContext": [ "comments/perPage", "postId", "comments/order" ],
 	"supports": {
 		"reusable": false,
 		"html": false

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

@@ -7,6 +7,14 @@
 	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
 	"textdomain": "default",
 	"attributes": {
+		"inherit": {
+			"type": "boolean",
+			"default": true
+		},
+		"order": {
+			"type": "string",
+			"default": null
+		},
 		"perPage": {
 			"type": "number",
 			"default": null
@@ -17,7 +25,9 @@
 		}
 	},
 	"providesContext": {
-		"comments/perPage": "perPage"
+		"comments/perPage": "perPage",
+		"comments/order": "order",
+		"comments/inherit": "inherit"
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
@@ -26,5 +36,6 @@
 			"gradients": true,
 			"link": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-comments-editor"
 }

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

@@ -2,51 +2,46 @@
  * WordPress dependencies
  */
 import {
-	BlockControls,
-	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import QueryToolbar from './toolbar';
+import CommentsInspectorControls from './edit/comments-inspector-controls';
+import { useSelect } from '@wordpress/data';
 
 const TEMPLATE = [
 	[ 'core/comment-template' ],
 	[ 'core/comments-pagination' ],
 ];
 
 export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
-	const { perPage, tagName: TagName } = attributes;
+	const { tagName: TagName } = attributes;
 
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
 
+	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+
 	return (
 		<>
-			<BlockControls>
-				<QueryToolbar perPage={ perPage } setQuery={ setAttributes } />
-			</BlockControls>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<aside>', value: 'aside' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-				/>
-			</InspectorControls>
+			<CommentsInspectorControls
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				defaultSettings={ {
+					defaultOrder: commentOrder,
+					defaultPerPage: commentsPerPage,
+				} }
+			/>
 			<TagName { ...innerBlocksProps } />
 		</>
 	);

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

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+	__experimentalNumberControl as NumberControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls } from '@wordpress/block-editor';
+
+const orderOptions = [
+	{
+		label: __( 'Newest to oldest' ),
+		value: 'desc',
+	},
+	{
+		label: __( 'Oldest to newest' ),
+		value: 'asc',
+	},
+];
+
+export default function CommentsInspectorControls( {
+	attributes: { TagName, perPage, order, inherit },
+	setAttributes,
+	defaultSettings: { defaultPerPage, defaultOrder },
+} ) {
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				<ToggleControl
+					label={ __( 'Inherit from Discussion Settings' ) }
+					checked={ inherit }
+					onChange={ () => {
+						setAttributes( {
+							inherit: ! inherit,
+							order: inherit ? defaultOrder : null,
+							perPage: inherit ? defaultPerPage : null,
+						} );
+					} }
+				/>
+				{ ! inherit && (
+					<>
+						<SelectControl
+							label={ __( 'Order by' ) }
+							value={ order }
+							options={ orderOptions }
+							onChange={ ( value ) => {
+								setAttributes( {
+									order: value,
+								} );
+							} }
+						/>
+						<NumberControl
+							__unstableInputWidth="60px"
+							label={ __( 'Items per Page' ) }
+							labelPosition="edge"
+							min={ 1 }
+							max={ 100 }
+							onChange={ ( value ) => {
+								const num = parseInt( value, 10 );
+								if ( isNaN( num ) || num < 1 || num > 100 ) {
+									return;
+								}
+								setAttributes( {
+									perPage: num,
+								} );
+							} }
+							step="1"
+							value={ perPage }
+							isDragEnabled={ false }
+						/>
+					</>
+				) }
+			</PanelBody>
+			<InspectorControls __experimentalGroup="advanced">
+				<SelectControl
+					label={ __( 'HTML element' ) }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+					value={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+				/>
+			</InspectorControls>
+		</InspectorControls>
+	);
+}

packages/block-library/src/comments-query-loop/editor.scss

@@ -0,0 +1,3 @@
+.block-library-comments-toolbar__popover .components-popover__content {
+	min-width: 230px;
+}