@wordpress/block-library 7.2.0 → 7.3.2

package/src/block/edit.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
@@ -25,6 +25,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
@@ -40,6 +41,11 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	);
 	const isMissing = hasResolved && ! record;
 
+	const canRemove = useSelect(
+		( select ) => select( blockEditorStore ).canRemoveBlock( clientId ),
+		[ clientId ]
+	);
+
 	const {
 		__experimentalConvertBlockToStatic: convertBlockToStatic,
 	} = useDispatch( reusableBlocksStore );
@@ -103,16 +109,20 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 	return (
 		<RecursionProvider>
 			<div { ...blockProps }>
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ () => convertBlockToStatic( clientId ) }
-							label={ __( 'Convert to regular blocks' ) }
-							icon={ ungroup }
-							showTooltip
-						/>
-					</ToolbarGroup>
-				</BlockControls>
+				{ canRemove && (
+					<BlockControls>
+						<ToolbarGroup>
+							<ToolbarButton
+								onClick={ () =>
+									convertBlockToStatic( clientId )
+								}
+								label={ __( 'Convert to regular blocks' ) }
+								icon={ ungroup }
+								showTooltip
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+				) }
 				<InspectorControls>
 					<PanelBody>
 						<TextControl

package/src/column/block.json

@@ -35,6 +35,7 @@
 			}
 		},
 		"spacing": {
+			"blockGap": true,
 			"padding": true,
 			"__experimentalDefaultControls": {
 				"padding": true

package/src/comment-author-avatar/block.json

@@ -2,10 +2,10 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-author-avatar",
-	"title": "Comment Author Avatar",
+	"title": "Comment Author Avatar (deprecated)",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the avatar of this comment's author.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "This block is deprecated. Please use the Avatar block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"width": {

package/src/comment-author-name/block.json

@@ -4,13 +4,13 @@
 	"name": "core/comment-author-name",
 	"title": "Comment Author Name",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the author name of this comment.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "Displays the name of the author of the comment.",
 	"textdomain": "default",
 	"attributes": {
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": true
 		},
 		"linkTarget": {
 			"type": "string",
@@ -18,6 +18,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-author-name/index.php

@@ -27,6 +27,9 @@ function render_block_core_comment_author_name( $attributes, $content, $block )
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
 	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$comment_author     = get_comment_author( $comment );

package/src/comment-content/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comment-content",
 	"title": "Comment Content",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays the contents of a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],

package/src/comment-date/block.json

@@ -4,8 +4,8 @@
 	"name": "core/comment-date",
 	"title": "Comment Date",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
-	"description": "Add the date of this comment.",
+	"ancestor": [ "core/comment-template" ],
+	"description": "Displays the date on which the comment was posted.",
 	"textdomain": "default",
 	"attributes": {
 		"format": {
@@ -13,7 +13,11 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": true
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-date/index.php

@@ -23,7 +23,12 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$classes = '';
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(
 		isset( $attributes['format'] ) ? $attributes['format'] : '',
 		$comment

package/src/comment-edit-link/block.json

@@ -4,7 +4,7 @@
 	"name": "core/comment-edit-link",
 	"title": "Comment Edit Link",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays a link to edit the comment in the WordPress Dashboard. This link is only visible to users with the edit comment capability.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
@@ -15,6 +15,10 @@
 		},
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-edit-link/index.php

@@ -31,6 +31,9 @@ function render_block_core_comment_edit_link( $attributes, $content, $block ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
 	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
+	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 

package/src/comment-reply-link/block.json

@@ -4,13 +4,17 @@
 	"name": "core/comment-reply-link",
 	"title": "Comment Reply Link",
 	"category": "theme",
-	"parent": [ "core/comment-template" ],
+	"ancestor": [ "core/comment-template" ],
 	"description": "Displays a link to reply to a comment.",
 	"textdomain": "default",
 	"usesContext": [ "commentId" ],
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"fontSize": {
+			"type": "string",
+			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-reply-link/index.php

@@ -53,7 +53,10 @@ function render_block_core_comment_reply_link( $attributes, $content, $block ) {
 
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+	}
+	if ( isset( $attributes['fontSize'] ) ) {
+		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

package/src/comment-template/block.json

@@ -5,15 +5,9 @@
 	"title": "Comment Template",
 	"category": "design",
 	"parent": [ "core/comments-query-loop" ],
-	"description": "Contains the block elements used to render a comment, like the title, date, author, avatar and more.",
+	"description": "Contains the block elements used to display a comment, like the title, date, author, avatar and more.",
 	"textdomain": "default",
-	"usesContext": [
-		"comments/defaultPage",
-		"comments/inherit",
-		"comments/order",
-		"comments/perPage",
-		"postId"
-	],
+	"usesContext": [ "postId" ],
 	"supports": {
 		"reusable": false,
 		"html": false,

package/src/comment-template/edit.js

@@ -229,36 +229,29 @@ 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 [ activeCommentId, setActiveCommentId ] = useState();
-	const { commentOrder, threadCommentsDepth, threadComments } = useSelect(
-		( select ) => {
-			const { getSettings } = select( blockEditorStore );
-			return getSettings().__experimentalDiscussionSettings;
-		}
-	);
+	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(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
 			const { getBlocks } = select( blockEditorStore );
-
 			return {
 				// Request only top-level comments. Replies are embedded.
 				topLevelComments: commentQuery
@@ -270,12 +263,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
 	);
@@ -290,14 +281,18 @@ export default function CommentTemplateEdit( {
 
 	if ( ! postId ) {
 		commentTree = getCommentsPlaceholder( {
-			perPage,
+			perPage: commentsPerPage,
 			threadComments,
 			threadCommentsDepth,
 		} );
 	}
 
 	if ( ! commentTree.length ) {
-		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
+		return (
+			<p { ...blockProps } data-testid="noresults">
+				{ __( 'No results found.' ) }
+			</p>
+		);
 	}
 
 	return (

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,
@@ -112,9 +96,10 @@ const useDefaultPageIndex = ( { defaultPage, postId, perPage, queryArgs } ) => {
 			method: 'HEAD',
 			parse: false,
 		} ).then( ( res ) => {
+			const pages = parseInt( res.headers.get( 'X-WP-TotalPages' ) );
 			setDefaultPages( {
 				...defaultPages,
-				[ key ]: parseInt( res.headers.get( 'X-WP-TotalPages' ) ),
+				[ key ]: pages <= 1 ? 1 : pages, // If there are 0 pages, it means that there are no comments, but there is no 0th page.
 			} );
 		} );
 	}, [ defaultPage, postId, perPage, setDefaultPages ] );

package/src/comment-template/index.php

@@ -8,11 +8,17 @@
 /**
  * Function that recursively renders a list of nested comments.
  *
- * @param WP_Comment[] $comments    The array of comments.
+ * @param WP_Comment[] $comments        The array of comments.
  * @param WP_Block     $block           Block instance.
  * @return string
  */
 function block_core_comment_template_render_comments( $comments, $block ) {
+	global $comment_depth;
+
+	if ( empty( $comment_depth ) ) {
+		$comment_depth = 1;
+	}
+
 	$content = '';
 	foreach ( $comments as $comment ) {
 
@@ -28,14 +34,20 @@ function block_core_comment_template_render_comments( $comments, $block ) {
 		// If the comment has children, recurse to create the HTML for the nested
 		// comments.
 		if ( ! empty( $children ) ) {
+			$comment_depth += 1;
 			$inner_content  = block_core_comment_template_render_comments(
 				$children,
 				$block
 			);
 			$block_content .= sprintf( '<ol>%1$s</ol>', $inner_content );
+			$comment_depth -= 1;
 		}
 
-		$content .= '<li>' . $block_content . '</li>';
+		// The `false` parameter at the end means that we do NOT want the function to `echo` the output but to return a string.
+		// See https://developer.wordpress.org/reference/functions/comment_class/#parameters.
+		$comment_classes = comment_class( '', $comment->comment_ID, $comment->comment_post_ID, false );
+
+		$content .= sprintf( '<li id="comment-%1$s" %2$s>%3$s</li>', $comment->comment_ID, $comment_classes, $block_content );
 	}
 
 	return $content;
@@ -68,9 +80,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' ) }