@wordpress/block-library 7.0.0 → 7.0.2

package/src/comment-template/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useMemo, memo } from '@wordpress/element';
+import { useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
@@ -17,7 +17,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { convertToTree } from './util';
+import { useCommentQueryArgs, useCommentTree } from './hooks';
 
 const TEMPLATE = [
 	[ 'core/comment-author-avatar' ],
@@ -28,6 +28,56 @@ const TEMPLATE = [
 	[ 'core/comment-edit-link' ],
 ];
 
+/**
+ * Function that returns a comment structure that will be rendered with default placehoders.
+ *
+ * @param {Object}  settings                       Discussion Settings.
+ * @param {number}  [settings.perPage]             - Comments per page setting or block attribute.
+ * @param {boolean} [settings.threadComments]      - Enable threaded (nested) comments setting.
+ * @param {number}  [settings.threadCommentsDepth] - Level deep of threaded comments.
+ *
+ * @typedef {{id: null, children: EmptyComment[]}} EmptyComment
+ * @return {EmptyComment[]}                 		Inner blocks of the Comment Template
+ */
+const getCommentsPlaceholder = ( {
+	perPage,
+	threadComments,
+	threadCommentsDepth,
+} ) => {
+	// In case that `threadCommentsDepth` is falsy, we default to a somewhat
+	// arbitrary value of 3.
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	const commentsDepth = Math.min( threadCommentsDepth || 3, 3 );
+
+	// We set a limit in order not to overload the editor of empty comments.
+	const defaultCommentsToShow =
+		perPage <= commentsDepth ? perPage : commentsDepth;
+	if ( ! threadComments || defaultCommentsToShow === 1 ) {
+		// If displaying threaded comments is disabled, we only show one comment
+		return [ { commentId: null, children: [] } ];
+	} else if ( defaultCommentsToShow === 2 ) {
+		return [
+			{
+				commentId: null,
+				children: [ { commentId: null, children: [] } ],
+			},
+		];
+	}
+
+	// In case that the value is set but larger than 3 we truncate it to 3.
+	return [
+		{
+			commentId: null,
+			children: [
+				{
+					commentId: null,
+					children: [ { commentId: null, children: [] } ],
+				},
+			],
+		},
+	];
+};
+
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
@@ -56,10 +106,10 @@ function CommentTemplateInnerBlocks( {
 			{ comment === ( activeComment || firstComment ) ? children : null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
-			is ALWAYS rendered and the preview for the active block is hidden. 
-			This ensures that when switching the active block, the component is not 
+			is ALWAYS rendered and the preview for the active block is hidden.
+			This ensures that when switching the active block, the component is not
 			mounted again but rather it only toggles the `isHidden` prop.
-			
+
 			The same strategy is used for preventing the flicker in the Post Template
 			block. */ }
 			<MemoizedCommentTemplatePreview
@@ -140,9 +190,9 @@ const CommentsList = ( {
 } ) => (
 	<ol { ...blockProps }>
 		{ comments &&
-			comments.map( ( comment ) => (
+			comments.map( ( comment, index ) => (
 				<BlockContextProvider
-					key={ comment.commentId }
+					key={ comment.commentId || index }
 					value={ comment }
 				>
 					<CommentTemplateInnerBlocks
@@ -159,54 +209,58 @@ const CommentsList = ( {
 
 export default function CommentTemplateEdit( {
 	clientId,
-	context: { postId, 'comments/perPage': perPage, 'comments/order': order },
+	context: {
+		postId,
+		'comments/perPage': perPage,
+		'comments/order': order,
+		'comments/defaultPage': defaultPage,
+		'comments/inherit': inherit,
+	},
 } ) {
 	const blockProps = useBlockProps();
 
 	const [ activeComment, setActiveComment ] = useState();
-	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().__experimentalDiscussionSettings;
+	const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return getSettings().__experimentalDiscussionSettings;
+		}
+	);
+
+	const commentQuery = useCommentQueryArgs( {
+		postId,
+		perPage,
+		defaultPage,
+		inherit,
 	} );
-	const { rawComments, blocks } = useSelect(
+
+	const { topLevelComments, 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',
-					commentQuery
-				),
+				// Request only top-level comments. Replies are embedded.
+				topLevelComments: commentQuery
+					? getEntityRecords( 'root', 'comment', commentQuery )
+					: null,
 				blocks: getBlocks( clientId ),
 			};
 		},
-		[ postId, clientId, order ]
+		[ clientId, commentQuery ]
 	);
 
-	// TODO: Replicate the logic used on the server.
-	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
-	// take into account nested comments.
-	const comments = useMemo(
-		() => convertToTree( rawComments ).slice( 0, perPage ),
-		[ rawComments, perPage ]
+	order = inherit || ! order ? commentOrder : order;
+
+	// Generate a tree structure of comment IDs.
+	let commentTree = useCommentTree(
+		// Reverse the order of top comments if needed.
+		order === 'desc' && topLevelComments
+			? [ ...topLevelComments ].reverse()
+			: topLevelComments
 	);
 
-	if ( ! rawComments ) {
+	if ( ! topLevelComments ) {
 		return (
 			<p { ...blockProps }>
 				<Spinner />
@@ -214,13 +268,21 @@ export default function CommentTemplateEdit( {
 		);
 	}
 
-	if ( ! comments.length ) {
+	if ( ! postId ) {
+		commentTree = getCommentsPlaceholder( {
+			perPage,
+			threadComments,
+			threadCommentsDepth,
+		} );
+	}
+
+	if ( ! commentTree.length ) {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
 	return (
 		<CommentsList
-			comments={ comments }
+			comments={ commentTree }
 			blockProps={ blockProps }
 			blocks={ blocks }
 			activeComment={ activeComment }

package/src/comment-template/hooks.js

@@ -0,0 +1,151 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Return an object with the query args needed to fetch the default page of
+ * comments.
+ *
+ * @param {Object}  props             Hook props.
+ * @param {number}  props.postId      ID of the post that contains the comments.
+ * @param {number}  props.perPage     The number of comments included per page.
+ * @param {string}  props.defaultPage Page shown by default (newest/oldest).
+ * @param {boolean} props.inherit     Overwrite props with values from WP
+ *                                    discussion settings.
+ *
+ * @return {Object} Query args to retrieve the comments.
+ */
+export const useCommentQueryArgs = ( {
+	postId,
+	perPage,
+	defaultPage,
+	inherit,
+} ) => {
+	// Initialize the query args that are not going to change.
+	const queryArgs = {
+		status: 'approve',
+		order: 'asc',
+		context: 'embed',
+		parent: 0,
+		_embed: 'children',
+	};
+
+	// Get the Discussion settings that may be needed to query the comments.
+	const { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
+
+	// Overwrite the received attributes if `inherit` is true.
+	if ( inherit ) {
+		perPage = commentsPerPage;
+		defaultPage = defaultCommentsPage;
+	}
+
+	// If a block props is not set, use the settings value to generate the
+	// appropriate query arg.
+	perPage = perPage || commentsPerPage;
+	defaultPage = defaultPage || defaultCommentsPage;
+
+	// Get the number of the default page.
+	const page = useDefaultPageIndex( {
+		defaultPage,
+		postId,
+		perPage,
+		queryArgs,
+	} );
+
+	// Merge, memoize and return all query arguments, unless the default page's
+	// number is not known yet.
+	return useMemo( () => {
+		return page
+			? {
+					...queryArgs,
+					post: postId,
+					per_page: perPage,
+					page,
+			  }
+			: null;
+	}, [ postId, perPage, page ] );
+};
+
+/**
+ * Return the index of the default page, depending on whether `defaultPage` is
+ * `newest` or `oldest`. In the first case, the only way to know the page's
+ * index is by using the `X-WP-TotalPages` header, which forces to make an
+ * additional request.
+ *
+ * @param {Object} props             Hook props.
+ * @param {string} props.defaultPage Page shown by default (newest/oldest).
+ * @param {number} props.postId      ID of the post that contains the comments.
+ * @param {number} props.perPage     The number of comments included per page.
+ * @param {Object} props.queryArgs   Other query args.
+ *
+ * @return {number} Index of the default comments page.
+ */
+const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
+	// Store the default page indices.
+	const [ defaultPages, setDefaultPages ] = useState( {} );
+	const key = `${ postId }_${ perPage }`;
+	const page = defaultPages[ key ] || 0;
+
+	useEffect( () => {
+		// Do nothing if the page is already known or not the newest page.
+		if ( page || defaultPage !== 'newest' ) {
+			return;
+		}
+		// We need to fetch comments to know the index. Use HEAD and limit
+		// fields just to ID, to make this call as light as possible.
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/comments', {
+				...queryArgs,
+				post: postId,
+				per_page: perPage,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} ).then( ( res ) => {
+			setDefaultPages( {
+				...defaultPages,
+				[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),
+			} );
+		} );
+	}, [ defaultPage, postId, perPage, setDefaultPages ] );
+
+	// The oldest one is always the first one.
+	return defaultPage === 'newest' ? page : 1;
+};
+
+/**
+ * Generate a tree structure of comment IDs from a list of comment entities. The
+ * children of each comment are obtained from `_embedded`.
+ *
+ * @typedef {{ commentId: number, children: CommentNode }} CommentNode
+ *
+ * @param {Object[]} topLevelComments List of comment entities.
+ * @return {{ commentTree: CommentNode[]}} Tree of comment IDs.
+ */
+export const useCommentTree = ( topLevelComments ) => {
+	const commentTree = useMemo(
+		() =>
+			topLevelComments?.map( ( { id, _embedded } ) => {
+				const [ children ] = _embedded?.children || [ [] ];
+				return {
+					commentId: id,
+					children: children.map( ( child ) => ( {
+						commentId: child.id,
+					} ) ),
+				};
+			} ),
+		[ topLevelComments ]
+	);
+
+	return commentTree;
+};

package/src/comment-template/index.php

@@ -68,6 +68,14 @@ function render_block_core_comment_template( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$comment_order = empty( $block->context['comments/inherit'] ) && ! empty( $block->context['comments/order'] )
+		? $block->context['comments/order']
+		: get_option( 'comment_order' );
+
+	if ( 'desc' === $comment_order ) {
+		$comments = array_reverse( $comments );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 
 	return sprintf(

package/src/comment-template/util.js

@@ -29,6 +29,7 @@
  */
 export const convertToTree = ( data ) => {
 	const table = {};
+
 	if ( ! data ) return [];
 
 	// First create a hash table of { [id]: { ...comment, children: [] }}

package/src/comments-pagination-next/block.json

@@ -12,7 +12,14 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "postId", "comments/perPage", "comments/paginationArrow" ],
+	"usesContext": [
+		"postId",
+		"comments/perPage",
+		"comments/order",
+		"comments/inherit",
+		"comments/defaultPage",
+		"comments/paginationArrow"
+	],
 	"supports": {
 		"reusable": false,
 		"html": false,

package/src/comments-pagination-next/index.php

@@ -15,15 +15,13 @@
  * @return string Returns the next comments link for the query pagination.
  */
 function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
-	$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' );
-		}
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
 	}
-	$comments_number  = (int) get_comments_number();
-	$max_page         = 0 !== $per_page ? (int) floor( $comments_number / $per_page ) : 0;
+
+	$comment_vars     = build_comment_query_vars_from_block( $block );
+	$max_page         = ( new WP_Comment_Query( $comment_vars ) )->max_num_pages;
 	$default_label    = __( 'Newer Comments' );
 	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
 	$pagination_arrow = get_comments_pagination_arrow( $block, 'next' );

package/src/comments-pagination-numbers/block.json

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

package/src/comments-pagination-numbers/index.php

@@ -20,17 +20,10 @@ function render_block_core_comments_pagination_numbers( $attributes, $content, $
 		return '';
 	}
 
-	$comments_query = new WP_Comment_Query(
-		build_comment_query_vars_from_block( $block )
-	);
-	$total          = $comments_query->max_num_pages;
+	$comment_vars = build_comment_query_vars_from_block( $block );
 
-	// Get the current comment page from the URL.
-	$current = get_query_var( 'cpage' );
-	if ( ! $current ) {
-		// Get the number of the default page.
-		$current = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
-	}
+	$total   = ( new WP_Comment_Query( $comment_vars ) )->max_num_pages;
+	$current = $comment_vars['paged'];
 
 	// Render links.
 	$content = paginate_comments_links(

package/src/comments-query-loop/block.json

@@ -22,11 +22,16 @@
 		"tagName": {
 			"type": "string",
 			"default": "div"
+		},
+		"defaultPage": {
+			"type": "string",
+			"default": "oldest"
 		}
 	},
 	"providesContext": {
 		"comments/perPage": "perPage",
 		"comments/order": "order",
+		"comments/defaultPage": "defaultPage",
 		"comments/inherit": "inherit"
 	},
 	"supports": {

package/src/comments-query-loop/edit/comments-inspector-controls.js

@@ -21,10 +21,20 @@ const orderOptions = [
 	},
 ];
 
+const defaultPageOptions = [
+	{
+		label: __( 'Newest' ),
+		value: 'newest',
+	},
+	{
+		label: __( 'Oldest' ),
+		value: 'oldest',
+	},
+];
+
 export default function CommentsInspectorControls( {
-	attributes: { TagName, perPage, order, inherit },
+	attributes: { TagName, perPage, order, inherit, defaultPage },
 	setAttributes,
-	defaultSettings: { defaultPerPage, defaultOrder },
 } ) {
 	return (
 		<InspectorControls>
@@ -35,8 +45,6 @@ export default function CommentsInspectorControls( {
 					onChange={ () => {
 						setAttributes( {
 							inherit: ! inherit,
-							order: inherit ? defaultOrder : null,
-							perPage: inherit ? defaultPerPage : null,
 						} );
 					} }
 				/>
@@ -52,6 +60,16 @@ export default function CommentsInspectorControls( {
 								} );
 							} }
 						/>
+						<SelectControl
+							label={ __( 'Default page' ) }
+							value={ defaultPage }
+							options={ defaultPageOptions }
+							onChange={ ( value ) => {
+								setAttributes( {
+									defaultPage: value,
+								} );
+							} }
+						/>
 						<NumberControl
 							__unstableInputWidth="60px"
 							label={ __( 'Items per Page' ) }

package/src/comments-query-loop/edit.js

@@ -1,17 +1,12 @@
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import CommentsInspectorControls from './edit/comments-inspector-controls';
-import { useSelect } from '@wordpress/data';
 
 const TEMPLATE = [
 	[ 'core/comment-template' ],
@@ -26,21 +21,11 @@ export default function CommentsQueryLoopEdit( { attributes, setAttributes } ) {
 		template: TEMPLATE,
 	} );
 
-	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const { __experimentalDiscussionSettings } = getSettings();
-		return __experimentalDiscussionSettings;
-	} );
-
 	return (
 		<>
 			<CommentsInspectorControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
-				defaultSettings={ {
-					defaultOrder: commentOrder,
-					defaultPerPage: commentsPerPage,
-				} }
 			/>
 			<TagName { ...innerBlocksProps } />
 		</>