@wordpress/block-library 7.1.0 → 7.3.0

package/src/comment-template/edit.js

@@ -20,7 +20,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { useCommentQueryArgs, useCommentTree } from './hooks';
 
 const TEMPLATE = [
-	[ 'core/comment-author-avatar' ],
+	[ 'core/avatar' ],
 	[ 'core/comment-author-name' ],
 	[ 'core/comment-date' ],
 	[ 'core/comment-content' ],
@@ -31,6 +31,10 @@ const TEMPLATE = [
 /**
  * Function that returns a comment structure that will be rendered with default placehoders.
  *
+ * Each comment has a `commentId` property that is always a negative number in
+ * case of the placeholders. This is to ensure that the comment does not
+ * conflict with the actual (real) comments.
+ *
  * @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.
@@ -54,12 +58,13 @@ const getCommentsPlaceholder = ( {
 		perPage <= commentsDepth ? perPage : commentsDepth;
 	if ( ! threadComments || defaultCommentsToShow === 1 ) {
 		// If displaying threaded comments is disabled, we only show one comment
-		return [ { commentId: null, children: [] } ];
+		// A commentId is negative in order to avoid conflicts with the actual comments.
+		return [ { commentId: -1, children: [] } ];
 	} else if ( defaultCommentsToShow === 2 ) {
 		return [
 			{
-				commentId: null,
-				children: [ { commentId: null, children: [] } ],
+				commentId: -1,
+				children: [ { commentId: -2, children: [] } ],
 			},
 		];
 	}
@@ -67,11 +72,11 @@ const getCommentsPlaceholder = ( {
 	// In case that the value is set but larger than 3 we truncate it to 3.
 	return [
 		{
-			commentId: null,
+			commentId: -1,
 			children: [
 				{
-					commentId: null,
-					children: [ { commentId: null, children: [] } ],
+					commentId: -2,
+					children: [ { commentId: -3, children: [] } ],
 				},
 			],
 		},
@@ -81,29 +86,32 @@ const getCommentsPlaceholder = ( {
 /**
  * Component which renders the inner blocks of the Comment Template.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comment]          - A comment object.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.firstComment]     - First comment in the array.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comment]            - A comment object.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.firstCommentId]     - ID of the first comment in the array.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from
+ *                                            getBlocks() in parent .
  * @return {WPElement}                 		Inner blocks of the Comment Template
  */
 function CommentTemplateInnerBlocks( {
 	comment,
-	activeComment,
-	setActiveComment,
-	firstComment,
+	activeCommentId,
+	setActiveCommentId,
+	firstCommentId,
 	blocks,
 } ) {
 	const { children, ...innerBlocksProps } = useInnerBlocksProps(
 		{},
 		{ template: TEMPLATE }
 	);
+
 	return (
 		<li { ...innerBlocksProps }>
-			{ comment === ( activeComment || firstComment ) ? children : null }
+			{ comment.commentId === ( activeCommentId || firstCommentId )
+				? children
+				: null }
 
 			{ /* To avoid flicker when switching active block contexts, a preview
 			is ALWAYS rendered and the preview for the active block is hidden.
@@ -114,17 +122,20 @@ function CommentTemplateInnerBlocks( {
 			block. */ }
 			<MemoizedCommentTemplatePreview
 				blocks={ blocks }
-				comment={ comment }
-				setActiveComment={ setActiveComment }
-				isHidden={ comment === ( activeComment || firstComment ) }
+				commentId={ comment.commentId }
+				setActiveCommentId={ setActiveCommentId }
+				isHidden={
+					comment.commentId === ( activeCommentId || firstCommentId )
+				}
 			/>
 
 			{ comment?.children?.length > 0 ? (
 				<CommentsList
 					comments={ comment.children }
-					activeComment={ activeComment }
-					setActiveComment={ setActiveComment }
+					activeCommentId={ activeCommentId }
+					setActiveCommentId={ setActiveCommentId }
 					blocks={ blocks }
+					firstCommentId={ firstCommentId }
 				/>
 			) : null }
 		</li>
@@ -133,8 +144,8 @@ function CommentTemplateInnerBlocks( {
 
 const CommentTemplatePreview = ( {
 	blocks,
-	comment,
-	setActiveComment,
+	commentId,
+	setActiveCommentId,
 	isHidden,
 } ) => {
 	const blockPreviewProps = useBlockPreview( {
@@ -142,7 +153,7 @@ const CommentTemplatePreview = ( {
 	} );
 
 	const handleOnClick = () => {
-		setActiveComment( comment );
+		setActiveCommentId( commentId );
 	};
 
 	// We have to hide the preview block if the `comment` props points to
@@ -172,35 +183,44 @@ const MemoizedCommentTemplatePreview = memo( CommentTemplatePreview );
 /**
  * Component that renders a list of (nested) comments. It is called recursively.
  *
- * @param {Object} props                    Component props.
- * @param {Array}  [props.comments]         - Array of comment objects.
- * @param {Array}  [props.blockProps]       - Props from parent's `useBlockProps()`.
- * @param {Array}  [props.activeComment]    - The block that is currently active.
- * @param {Array}  [props.setActiveComment] - The setter for activeComment.
- * @param {Array}  [props.blocks]           - Array of blocks returned from
- *                                          getBlocks() in parent .
+ * @param {Object} props                      Component props.
+ * @param {Array}  [props.comments]           - Array of comment objects.
+ * @param {Array}  [props.blockProps]         - Props from parent's `useBlockProps()`.
+ * @param {Array}  [props.activeCommentId]    - The ID of the comment that is currently active.
+ * @param {Array}  [props.setActiveCommentId] - The setter for activeCommentId.
+ * @param {Array}  [props.blocks]             - Array of blocks returned from getBlocks() in parent.
+ * @param {Object} [props.firstCommentId]     - The ID of the first comment in the array of
+ *                                            comment objects.
  * @return {WPElement}                 		List of comments.
  */
 const CommentsList = ( {
 	comments,
 	blockProps,
-	activeComment,
-	setActiveComment,
+	activeCommentId,
+	setActiveCommentId,
 	blocks,
+	firstCommentId,
 } ) => (
 	<ol { ...blockProps }>
 		{ comments &&
-			comments.map( ( comment, index ) => (
+			comments.map( ( { commentId, ...comment }, index ) => (
 				<BlockContextProvider
 					key={ comment.commentId || index }
-					value={ comment }
+					value={ {
+						// If the commentId is negative it means that this comment is a
+						// "placeholder" and that the block is most likely being used in the
+						// site editor. In this case, we have to set the commentId to `null`
+						// because otherwise the (non-existent) comment with a negative ID
+						// would be reqested from the REST API.
+						commentId: commentId < 0 ? null : commentId,
+					} }
 				>
 					<CommentTemplateInnerBlocks
-						comment={ comment }
-						activeComment={ activeComment }
-						setActiveComment={ setActiveComment }
+						comment={ { commentId, ...comment } }
+						activeCommentId={ activeCommentId }
+						setActiveCommentId={ setActiveCommentId }
 						blocks={ blocks }
-						firstComment={ comments[ 0 ] }
+						firstCommentId={ firstCommentId }
 					/>
 				</BlockContextProvider>
 			) ) }
@@ -209,29 +229,23 @@ const CommentsList = ( {
 
 export default function CommentTemplateEdit( {
 	clientId,
-	context: {
-		postId,
-		'comments/perPage': perPage,
-		'comments/order': order,
-		'comments/defaultPage': defaultPage,
-		'comments/inherit': inherit,
-	},
+	context: { postId },
 } ) {
 	const blockProps = useBlockProps();
 
-	const [ activeComment, setActiveComment ] = useState();
-	const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return getSettings().__experimentalDiscussionSettings;
-		}
-	);
+	const [ activeCommentId, setActiveCommentId ] = useState();
+	const {
+		commentOrder,
+		threadCommentsDepth,
+		threadComments,
+		commentsPerPage,
+	} = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().__experimentalDiscussionSettings;
+	} );
 
 	const commentQuery = useCommentQueryArgs( {
 		postId,
-		perPage,
-		defaultPage,
-		inherit,
 	} );
 
 	const { topLevelComments, blocks } = useSelect(
@@ -250,12 +264,10 @@ export default function CommentTemplateEdit( {
 		[ clientId, commentQuery ]
 	);
 
-	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
+		commentOrder === 'desc' && topLevelComments
 			? [ ...topLevelComments ].reverse()
 			: topLevelComments
 	);
@@ -270,7 +282,7 @@ export default function CommentTemplateEdit( {
 
 	if ( ! postId ) {
 		commentTree = getCommentsPlaceholder( {
-			perPage,
+			perPage: commentsPerPage,
 			threadComments,
 			threadCommentsDepth,
 		} );
@@ -285,8 +297,9 @@ export default function CommentTemplateEdit( {
 			comments={ commentTree }
 			blockProps={ blockProps }
 			blocks={ blocks }
-			activeComment={ activeComment }
-			setActiveComment={ setActiveComment }
+			activeCommentId={ activeCommentId }
+			setActiveCommentId={ setActiveCommentId }
+			firstCommentId={ commentTree[ 0 ]?.commentId }
 		/>
 	);
 }

package/src/comment-template/hooks.js

@@ -11,21 +11,13 @@ 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.
+ * @param {Object} props        Hook props.
+ * @param {number} props.postId ID of the post that contains the comments.
+ *                              discussion settings.
  *
  * @return {Object} Query args to retrieve the comments.
  */
-export const useCommentQueryArgs = ( {
-	postId,
-	perPage,
-	defaultPage,
-	inherit,
-} ) => {
+export const useCommentQueryArgs = ( { postId } ) => {
 	// Initialize the query args that are not going to change.
 	const queryArgs = {
 		status: 'approve',
@@ -36,23 +28,15 @@ export const useCommentQueryArgs = ( {
 	};
 
 	// Get the Discussion settings that may be needed to query the comments.
-	const { commentsPerPage, defaultCommentsPage } = useSelect( ( select ) => {
+	const {
+		commentsPerPage: perPage,
+		defaultCommentsPage: defaultPage,
+	} = 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,

package/src/comment-template/index.php

@@ -68,9 +68,7 @@ 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' );
+	$comment_order = get_option( 'comment_order' );
 
 	if ( 'desc' === $comment_order ) {
 		$comments = array_reverse( $comments );

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

@@ -5,21 +5,14 @@
 	"title": "Next Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
-	"description": "Displays the next comments page link.",
+	"description": "Displays the next comment's page link.",
 	"textdomain": "default",
 	"attributes": {
 		"label": {
 			"type": "string"
 		}
 	},
-	"usesContext": [
-		"postId",
-		"comments/perPage",
-		"comments/order",
-		"comments/inherit",
-		"comments/defaultPage",
-		"comments/paginationArrow"
-	],
+	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

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

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

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

@@ -5,7 +5,7 @@
 	"title": "Previous Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
-	"description": "Displays the previous comments page link.",
+	"description": "Displays the previous comment's page link.",
 	"textdomain": "default",
 	"attributes": {
 		"label": {
@@ -35,4 +35,4 @@
 			}
 		}
 	}
-}
+}

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

@@ -4,36 +4,14 @@
 	"name": "core/comments-query-loop",
 	"title": "Comments Query Loop",
 	"category": "theme",
-	"description": "An advanced block that allows displaying post comments based on different query parameters and visual configurations.",
+	"description": "An advanced block that allows displaying post comments using different visual configurations.",
 	"textdomain": "default",
 	"attributes": {
-		"inherit": {
-			"type": "boolean",
-			"default": true
-		},
-		"order": {
-			"type": "string",
-			"default": null
-		},
-		"perPage": {
-			"type": "number",
-			"default": null
-		},
 		"tagName": {
 			"type": "string",
 			"default": "div"
-		},
-		"defaultPage": {
-			"type": "string",
-			"default": "oldest"
 		}
 	},
-	"providesContext": {
-		"comments/perPage": "perPage",
-		"comments/order": "order",
-		"comments/defaultPage": "defaultPage",
-		"comments/inherit": "inherit"
-	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,

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

@@ -1,97 +1,16 @@
 /**
  * WordPress dependencies
  */
-import {
-	PanelBody,
-	SelectControl,
-	ToggleControl,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { SelectControl } 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',
-	},
-];
-
-const defaultPageOptions = [
-	{
-		label: __( 'Newest' ),
-		value: 'newest',
-	},
-	{
-		label: __( 'Oldest' ),
-		value: 'oldest',
-	},
-];
-
 export default function CommentsInspectorControls( {
-	attributes: { TagName, perPage, order, inherit, defaultPage },
+	attributes: { TagName },
 	setAttributes,
 } ) {
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					label={ __( 'Inherit from Discussion Settings' ) }
-					checked={ inherit }
-					onChange={ () => {
-						setAttributes( {
-							inherit: ! inherit,
-						} );
-					} }
-				/>
-				{ ! inherit && (
-					<>
-						<SelectControl
-							label={ __( 'Order by' ) }
-							value={ order }
-							options={ orderOptions }
-							onChange={ ( value ) => {
-								setAttributes( {
-									order: value,
-								} );
-							} }
-						/>
-						<SelectControl
-							label={ __( 'Default page' ) }
-							value={ defaultPage }
-							options={ defaultPageOptions }
-							onChange={ ( value ) => {
-								setAttributes( {
-									defaultPage: 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' ) }

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

@@ -9,7 +9,60 @@ import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 import CommentsInspectorControls from './edit/comments-inspector-controls';
 
 const TEMPLATE = [
-	[ 'core/comment-template' ],
+	[
+		'core/comment-template',
+		{},
+		[
+			[
+				'core/columns',
+				{},
+				[
+					[
+						'core/column',
+						{ width: '40px' },
+						[
+							[
+								'core/avatar',
+								{
+									size: 40,
+									style: {
+										border: { radius: '20px' },
+									},
+								},
+							],
+						],
+					],
+					[
+						'core/column',
+						{},
+						[
+							[ 'core/comment-author-name' ],
+							[
+								'core/group',
+								{
+									layout: { type: 'flex' },
+									style: {
+										spacing: {
+											margin: {
+												top: '0px',
+												bottom: '0px',
+											},
+										},
+									},
+								},
+								[
+									[ 'core/comment-date' ],
+									[ 'core/comment-edit-link' ],
+								],
+							],
+							[ 'core/comment-content' ],
+							[ 'core/comment-reply-link' ],
+						],
+					],
+				],
+			],
+		],
+	],
 	[ 'core/comments-pagination' ],
 ];
 

package/src/cover/block.json

@@ -10,6 +10,10 @@
 		"url": {
 			"type": "string"
 		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
+		},
 		"id": {
 			"type": "number"
 		},
@@ -72,6 +76,7 @@
 			"enum": [ "all", "insert", false ]
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": true,