[Comments Query Loop] Show placeholder comments on site editor

lib/compat/experimental/blocks.php

@@ -106,12 +106,24 @@ function get_comments_pagination_arrow( $block, $pagination_type = 'next' ) {
 	 * @return array Filtered editor settings.
 	 */
 	function extend_block_editor_settings_with_discussion_settings( $settings ) {
+
 		$settings['__experimentalDiscussionSettings'] = array(
-			'pageComments'        => get_option( 'page_comments' ),
+			'commentOrder'        => get_option( 'comment_order' ),
 			'commentsPerPage'     => get_option( 'comments_per_page' ),
 			'defaultCommentsPage' => get_option( 'default_comments_page' ),
-			'commentOrder'        => get_option( 'comment_order' ),
+			'pageComments'        => get_option( 'page_comments' ),
+			'threadComments'      => get_option( 'thread_comments' ),
+			'threadCommentsDepth' => get_option( 'thread_comments_depth' ),
+			'avatarURL'           => get_avatar_url(
+				'',
+				array(
+					'size'          => 96,
+					'force_default' => true,
+					'default'       => get_option( 'avatar_default' ),
+				)
+			),
 		);
+
 		return $settings;
 	}
 }

packages/block-library/src/comment-author-avatar/edit.js

@@ -5,10 +5,12 @@ import {
 	InspectorControls,
 	useBlockProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { __, _x, isRTL } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { __, isRTL } from '@wordpress/i18n';
 
 export default function Edit( {
 	attributes,
@@ -38,6 +40,11 @@ export default function Edit( {
 	const blockProps = useBlockProps();
 	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+	const { avatarURL } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		const { __experimentalDiscussionSettings } = getSettings();
+		return __experimentalDiscussionSettings;
+	} );
 
 	const inspectorControls = (
 		<InspectorControls>
@@ -59,7 +66,7 @@ export default function Edit( {
 		</InspectorControls>
 	);
 
-	const displayAvatar = avatarUrls ? (
+	const resizableAvatar = (
 		<ResizableBox
 			size={ {
 				width,
@@ -83,21 +90,19 @@ export default function Edit( {
 			maxWidth={ maxSizeBuffer }
 		>
 			<img
-				src={ avatarUrls[ avatarUrls.length - 1 ] }
+				src={
+					avatarUrls ? avatarUrls[ avatarUrls.length - 1 ] : avatarURL
+				}
 				alt={ `${ authorName } ${ __( 'Avatar' ) }` }
 				{ ...blockProps }
 			/>
 		</ResizableBox>
-	) : (
-		<p { ...blockProps }>
-			{ _x( 'Comment Author Avatar', 'block title' ) }
-		</p>
 	);
 
 	return (
 		<>
 			{ inspectorControls }
-			<div { ...spacingProps }>{ displayAvatar }</div>
+			<div { ...spacingProps }>{ resizableAvatar }</div>
 		</>
 	);
 }

packages/block-library/src/comment-author-avatar/editor.scss

@@ -0,0 +1,7 @@
+.wp-block-comment-author-avatar__placeholder {
+	border: currentColor 1px dashed;
+	width: 100%;
+	height: 100%;
+	stroke: currentColor;
+	stroke-dasharray: 3;
+}

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

@@ -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.
  *
@@ -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
@@ -164,10 +214,16 @@ export default function CommentTemplateEdit( {
 	const blockProps = useBlockProps();
 
 	const [ activeComment, setActiveComment ] = useState();
-	const { commentOrder, commentsPerPage } = useSelect( ( select ) => {
+	const {
+		commentOrder,
+		commentsPerPage,
+		threadCommentsDepth,
+		threadComments,
+	} = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().__experimentalDiscussionSettings;
 	} );
+
 	const { rawComments, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -194,14 +250,14 @@ export default function CommentTemplateEdit( {
 		},
 		[ postId, clientId, order ]
 	);
-
 	// 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(
+
+	let comments = useMemo(
 		() => convertToTree( rawComments ).slice( 0, perPage ),
 		[ rawComments, perPage ]
 	);
@@ -214,6 +270,14 @@ export default function CommentTemplateEdit( {
 		);
 	}
 
+	if ( ! postId ) {
+		comments = getCommentsPlaceholder( {
+			perPage,
+			threadComments,
+			threadCommentsDepth,
+		} );
+	}
+
 	if ( ! comments.length ) {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}

packages/block-library/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: [] }}

packages/block-library/src/editor.scss

@@ -5,6 +5,7 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comment-author-avatar/editor.scss";
 @import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";