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

* Block Library: Add Post Comments Count block.

* Block Library: Add Post Comments Count block server-side rendering.

* E2E Tests: Add Post Comments Count block fixtures.

* Block Library: Add Post Comments Count block class name functionality.

lib/blocks.php

@@ -17,27 +17,28 @@ function gutenberg_reregister_core_block_types() {
  }
 
  $block_names = array(
- 'archives.php' => 'core/archives',
- 'block.php' => 'core/block',
- 'calendar.php' => 'core/calendar',
- 'categories.php' => 'core/categories',
- 'latest-comments.php' => 'core/latest-comments',
- 'latest-posts.php' => 'core/latest-posts',
- 'legacy-widget.php' => 'core/legacy-widget',
- 'navigation.php' => 'core/navigation',
- 'rss.php' => 'core/rss',
- 'shortcode.php' => 'core/shortcode',
- 'search.php' => 'core/search',
- 'social-link.php' => 'core/social-link',
- 'tag-cloud.php' => 'core/tag-cloud',
- 'site-title.php' => 'core/site-title',
- 'template-part.php' => 'core/template-part',
- 'post-title.php' => 'core/post-title',
- 'post-content.php' => 'core/post-content',
- 'post-author.php' => 'core/post-author',
- 'post-comments-form.php' => 'core/post-comments-form',
- 'post-date.php' => 'core/post-date',
- 'post-excerpt.php' => 'core/post-excerpt',
+ 'archives.php' => 'core/archives',
+ 'block.php' => 'core/block',
+ 'calendar.php' => 'core/calendar',
+ 'categories.php' => 'core/categories',
+ 'latest-comments.php' => 'core/latest-comments',
+ 'latest-posts.php' => 'core/latest-posts',
+ 'legacy-widget.php' => 'core/legacy-widget',
+ 'navigation.php' => 'core/navigation',
+ 'rss.php' => 'core/rss',
+ 'shortcode.php' => 'core/shortcode',
+ 'search.php' => 'core/search',
+ 'social-link.php' => 'core/social-link',
+ 'tag-cloud.php' => 'core/tag-cloud',
+ 'site-title.php' => 'core/site-title',
+ 'template-part.php' => 'core/template-part',
+ 'post-title.php' => 'core/post-title',
+ 'post-content.php' => 'core/post-content',
+ 'post-author.php' => 'core/post-author',
+ 'post-comments-count.php' => 'core/post-comments-count',
+ 'post-comments-form.php' => 'core/post-comments-form',
+ 'post-date.php' => 'core/post-date',
+ 'post-excerpt.php' => 'core/post-excerpt',
  );
 
  $registry = WP_Block_Type_Registry::get_instance();

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 postCommentsCount from './post-comments-count';
 import * as postCommentsForm from './post-comments-form';
 import * as postDate from './post-date';
 import * as postExcerpt from './post-excerpt';
@@ -196,6 +197,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
  postTitle,
  postContent,
  postAuthor,
+ postCommentsCount,
  postCommentsForm,
  postDate,
  postExcerpt,

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

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

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { useEntityId } from '@wordpress/core-data';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+function PostCommentsCountDisplay( { className } ) {
+ const postId = useEntityId( 'postType', 'post' );
+ const [ commentsCount, setCommentsCount ] = useState();
+ useEffect( () => {
+ const currentPostId = postId;
+ apiFetch( {
+ path: addQueryArgs( '/wp/v2/comments', {
+ post: postId,
+ } ),
+ parse: false,
+ } ).then( ( res ) => {
+ // Stale requests will have the `currentPostId` of an older closure.
+ if ( currentPostId === postId ) {
+ setCommentsCount( res.headers.get( 'X-WP-Total' ) );
+ }
+ } );
+ }, [ postId ] );
+ return (
+ <span className={ className }>
+ { commentsCount !== undefined && commentsCount }
+ </span>
+ );
+}
+
+export default function PostCommentsCountEdit( { className } ) {
+ if ( ! useEntityId( 'postType', 'post' ) ) {
+ return 'Post Comments Count Placeholder';
+ }
+ return <PostCommentsCountDisplay className={ className } />;
+}

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

@@ -0,0 +1,21 @@
+/**
+ * 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 Count' ),
+ supports: {
+ html: false,
+ },
+ edit,
+};

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

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-comments-count` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-comments-count` block on the server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the filtered post comments count for the current post.
+ */
+function render_block_core_post_comments_count( $attributes ) {
+ $post = gutenberg_get_post_from_context();
+ if ( ! $post ) {
+ return '';
+ }
+ $class = 'wp-block-post-comments-count';
+ if ( isset( $attributes['className'] ) ) {
+ $class .= ' ' . $attributes['className'];
+ }
+ return sprintf(
+ '<span class="%1$s">%2$s</span>',
+ esc_attr( $class ),
+ get_comments_number( $post )
+ );
+}
+
+/**
+ * Registers the `core/post-comments-count` block on the server.
+ */
+function register_block_core_post_comments_count() {
+ register_block_type(
+ 'core/post-comments-count',
+ array(
+ 'attributes' => array(
+ 'className' => array(
+ 'type' => 'string',
+ ),
+ ),
+ 'render_callback' => 'render_block_core_post_comments_count',
+ )
+ );
+}
+add_action( 'init', 'register_block_core_post_comments_count' );

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

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

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

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

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

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

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

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