@wordpress/block-library 7.2.0 → 7.3.0

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,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 [ 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(
@@ -270,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
 	);
@@ -290,7 +282,7 @@ export default function CommentTemplateEdit( {
 
 	if ( ! postId ) {
 		commentTree = getCommentsPlaceholder( {
-			perPage,
+			perPage: commentsPerPage,
 			threadComments,
 			threadCommentsDepth,
 		} );

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,