Add Post Comment block (WordPress#24781)

Laying the foundation for a block-based post comment building. Adds a Post Comment block which requires a Comment ID input for now. The Post Comment block provides a context for the inner blocks.

As an example, also implemented a very simple Post Comment Content block, which uses the context provided by the Post Comment block.

lib/blocks.php

@@ -73,23 +73,25 @@ function gutenberg_reregister_core_block_types() {
 		$block_names = array_merge(
 			$block_names,
 			array(
-				'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-content.php'        => 'core/post-content',
-				'post-date.php'           => 'core/post-date',
-				'post-excerpt.php'        => 'core/post-excerpt',
-				'post-featured-image.php' => 'core/post-featured-image',
-				'post-tags.php'           => 'core/post-tags',
-				'post-title.php'          => 'core/post-title',
-				'query.php'               => 'core/query',
-				'query-loop.php'          => 'core/query-loop',
-				'query-pagination.php'    => 'core/query-pagination',
-				'site-logo.php'           => 'core/site-logo',
-				'site-tagline.php'        => 'core/site-tagline',
-				'site-title.php'          => 'core/site-title',
-				'template-part.php'       => 'core/template-part',
+				'post-author.php'          => 'core/post-author',
+				'post-comment.php'         => 'core/post-comment',
+				'post-comment-content.php' => 'core/post-comment-content',
+				'post-comments.php'        => 'core/post-comments',
+				'post-comments-count.php'  => 'core/post-comments-count',
+				'post-comments-form.php'   => 'core/post-comments-form',
+				'post-content.php'         => 'core/post-content',
+				'post-date.php'            => 'core/post-date',
+				'post-excerpt.php'         => 'core/post-excerpt',
+				'post-featured-image.php'  => 'core/post-featured-image',
+				'post-tags.php'            => 'core/post-tags',
+				'post-title.php'           => 'core/post-title',
+				'query.php'                => 'core/query',
+				'query-loop.php'           => 'core/query-loop',
+				'query-pagination.php'     => 'core/query-pagination',
+				'site-logo.php'            => 'core/site-logo',
+				'site-tagline.php'         => 'core/site-tagline',
+				'site-title.php'           => 'core/site-title',
+				'template-part.php'        => 'core/template-part',
 			)
 		);
 	}

packages/block-library/src/index.js

@@ -75,6 +75,8 @@ import * as queryPagination from './query-pagination';
 import * as postTitle from './post-title';
 import * as postContent from './post-content';
 import * as postAuthor from './post-author';
+import * as postComment from './post-comment';
+import * as postCommentContent from './post-comment-content';
 import * as postComments from './post-comments';
 import * as postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
@@ -208,6 +210,8 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								postTitle,
 								postContent,
 								postAuthor,
+								postComment,
+								postCommentContent,
 								postComments,
 								postCommentsCount,
 								postCommentsForm,

packages/block-library/src/post-comment-content/block.json

@@ -0,0 +1,8 @@
+{
+	"name": "core/post-comment-content",
+	"category": "design",
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false
+	}
+}

packages/block-library/src/post-comment-content/edit.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp } from '@wordpress/core-data';
+
+// TODO: JSDOC types
+export default function Edit( { attributes, context } ) {
+	const { className } = attributes;
+	const { commentId } = context;
+
+	const [ content ] = useEntityProp(
+		'root',
+		'comment',
+		'content',
+		commentId
+	);
+
+	return <p className={ className }>{ content }</p>;
+}

packages/block-library/src/post-comment-content/index.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { alignJustify as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Comment Content' ),
+	description: __( 'Post Comment Content' ),
+	icon,
+	edit,
+	parent: [ 'core/post-comment' ],
+};

packages/block-library/src/post-comment-content/index.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comment-content` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-comment-content` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Return the post comment's content.
+ */
+function render_block_core_post_comment_content( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	return sprintf( '<div>%1$s</div>', get_comment_text( $block->context['commentId'] ) );
+}
+
+/**
+ * Registers the `core/post-comment-content` block on the server.
+ */
+function register_block_core_post_comment_content() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-comment-content',
+		array(
+			'render_callback' => 'render_block_core_post_comment_content',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_comment_content' );

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

@@ -0,0 +1,15 @@
+{
+	"name": "core/post-comment",
+	"category": "design",
+	"attributes": {
+		"commentId": {
+			"type": "number"
+		}
+	},
+	"providesContext": {
+		"commentId": "commentId"
+	},
+	"supports": {
+		"html": false
+	}
+}

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Placeholder, TextControl, Button } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { blockDefault } from '@wordpress/icons';
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const ALLOWED_BLOCKS = [ [ 'core/post-comment-content' ] ];
+
+// TODO: JSDOC types
+export default function Edit( { className, attributes, setAttributes } ) {
+	const { commentId } = attributes;
+	const [ commentIdInput, setCommentIdInput ] = useState( commentId );
+
+	if ( ! commentId ) {
+		return (
+			<Placeholder
+				icon={ blockDefault }
+				label={ __( 'Post Comment' ) }
+				instructions={ __( 'Input post comment ID' ) }
+			>
+				<TextControl
+					value={ commentId }
+					onChange={ ( val ) => setCommentIdInput( parseInt( val ) ) }
+				/>
+
+				<Button
+					isPrimary
+					onClick={ () => {
+						setAttributes( { commentId: commentIdInput } );
+					} }
+				>
+					{ __( 'Save' ) }
+				</Button>
+			</Placeholder>
+		);
+	}
+
+	return (
+		<div className={ className }>
+			<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
+		</div>
+	);
+}

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { comment as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	title: __( 'Post Comment' ),
+	description: __( 'Post Comment' ),
+	icon,
+	edit,
+	save,
+};

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

@@ -0,0 +1,17 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comment` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Registers the `core/post-comment` block on the server.
+ * We need to do this to make context available for inner blocks.
+ */
+function register_block_core_post_comment() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-comment'
+	);
+}
+add_action( 'init', 'register_block_core_post_comment' );

packages/block-library/src/post-comment/save.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { className } = attributes;
+
+	return (
+		<div className={ className }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

packages/e2e-tests/fixtures/blocks/core__post-comment-content.html

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

packages/e2e-tests/fixtures/blocks/core__post-comment-content.json

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

packages/e2e-tests/fixtures/blocks/core__post-comment-content.parsed.json

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

packages/e2e-tests/fixtures/blocks/core__post-comment-content.serialized.html

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

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

@@ -0,0 +1,3 @@
+<!-- wp:core/post-comment -->
+<div class="wp-block-post-comment"></div>
+<!-- /wp:core/post-comment -->

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

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/post-comment",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": "<div class=\"wp-block-post-comment\"></div>"
+    }
+]

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

@@ -0,0 +1,20 @@
+[
+    {
+        "blockName": "core/post-comment",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n<div class=\"wp-block-post-comment\"></div>\n",
+        "innerContent": [
+            "\n<div class=\"wp-block-post-comment\"></div>\n"
+        ]
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

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

@@ -0,0 +1,3 @@
+<!-- wp:post-comment -->
+<div class="wp-block-post-comment"></div>
+<!-- /wp:post-comment -->