Block Library: Add a Post Comments block. (#19581)

Co-authored-by: Noah Allen <noahtallen@gmail.com>

lib/blocks.php

@@ -35,6 +35,7 @@ function gutenberg_reregister_core_block_types() {
 		'post-title.php'          => 'core/post-title',
 		'post-content.php'        => 'core/post-content',
 		'post-author.php'         => 'core/post-author',
+		'post-comments.php'       => 'core/post-comments',
 		'post-comments-count.php' => 'core/post-comments-count',
 		'post-comments-form.php'  => 'core/post-comments-form',
 		'post-date.php'           => 'core/post-date',

packages/block-library/src/index.js

@@ -68,6 +68,7 @@ import * as templatePart from './template-part';
 import * as postTitle from './post-title';
 import * as postContent from './post-content';
 import * as postAuthor from './post-author';
+import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
 import * as postDate from './post-date';
@@ -199,6 +200,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postTitle,
 								postContent,
 								postAuthor,
+								postComments,
 								postCommentsCount,
 								postCommentsForm,
 								postDate,

packages/block-library/src/post-comments/block.json

@@ -0,0 +1,4 @@
+{
+	"name": "core/post-comments",
+	"category": "layout"
+}

packages/block-library/src/post-comments/edit.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEntityId } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+function PostCommentsDisplay( { postId } ) {
+	return useSelect(
+		( select ) => {
+			const comments = select( 'core' ).getEntityRecords(
+				'root',
+				'comment',
+				{
+					post: postId,
+				}
+			);
+			// TODO: "No Comments" placeholder should be editable.
+			return comments && comments.length
+				? comments.map( ( comment ) => (
+						<p key={ comment.id }>{ comment.content.raw }</p>
+				  ) )
+				: __( 'No comments.' );
+		},
+		[ postId ]
+	);
+}
+
+export default function PostCommentsEdit() {
+	// TODO: Update to handle multiple post types.
+	const postId = useEntityId( 'postType', 'post' );
+	if ( ! postId ) {
+		return 'Post Comments Placeholder';
+	}
+	return <PostCommentsDisplay postId={ postId } />;
+}

packages/block-library/src/post-comments/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Comments' ),
+	edit,
+};

packages/block-library/src/post-comments/index.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comments` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-comments` block on the server.
+ *
+ * @return string Returns the filtered post comments for the current post wrapped inside "p" tags.
+ */
+function render_block_core_post_comments() {
+	$post = gutenberg_get_post_from_context();
+	if ( ! $post ) {
+		return '';
+	}
+	$comments = get_comments(
+		array(
+			'post_id' => $post->ID,
+		)
+	);
+	$output   = '';
+	// TODO: Handle nested comments.
+	foreach ( $comments as $comment ) {
+		$output .= '<p>' . $comment->comment_author . '<br />' . $comment->comment_content . '</p>';
+	}
+	return $output;
+}
+
+/**
+ * Registers the `core/post-comments` block on the server.
+ */
+function register_block_core_post_comments() {
+	register_block_type(
+		'core/post-comments',
+		array(
+			'render_callback' => 'render_block_core_post_comments',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_comments' );

packages/core-data/src/entities.js

@@ -60,6 +60,13 @@ export const defaultEntities = [
 		baseURL: '/wp/v2/users',
 		plural: 'users',
 	},
+	{
+		name: 'comment',
+		kind: 'root',
+		baseURL: '/wp/v2/comments',
+		plural: 'comments',
+		label: __( 'Comment' ),
+	},
 ];
 
 export const kinds = [

packages/e2e-tests/fixtures/blocks/core__post-comments.html

@@ -0,0 +1 @@
+<!-- wp:post-comments /-->

packages/e2e-tests/fixtures/blocks/core__post-comments.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/post-comments",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-comments.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/post-comments",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__post-comments.serialized.html

@@ -0,0 +1 @@
+<!-- wp:post-comments /-->