Block Library: Add Comments Pagination Numbers block

lib/blocks.php

@@ -53,61 +53,62 @@ function gutenberg_reregister_core_block_types() {
 				'embed',
 			),
 			'block_names'   => array(
-				'archives.php'                  => 'core/archives',
-				'block.php'                     => 'core/block',
-				'calendar.php'                  => 'core/calendar',
-				'categories.php'                => 'core/categories',
-				'comment-author-avatar.php'     => 'core/comment-author-avatar',
-				'comment-author-name.php'       => 'core/comment-author-name',
-				'comment-content.php'           => 'core/comment-content',
-				'comment-date.php'              => 'core/comment-date',
-				'comment-edit-link.php'         => 'core/comment-edit-link',
-				'comment-reply-link.php'        => 'core/comment-reply-link',
-				'comment-template.php'          => 'core/comment-template',
-				'file.php'                      => 'core/file',
-				'home-link.php'                 => 'core/home-link',
-				'image.php'                     => 'core/image',
-				'gallery.php'                   => 'core/gallery',
-				'latest-comments.php'           => 'core/latest-comments',
-				'latest-posts.php'              => 'core/latest-posts',
-				'loginout.php'                  => 'core/loginout',
-				'navigation.php'                => 'core/navigation',
-				'navigation-area.php'           => 'core/navigation-area',
-				'navigation-link.php'           => 'core/navigation-link',
-				'navigation-submenu.php'        => 'core/navigation-submenu',
-				'page-list.php'                 => 'core/page-list',
-				'pattern.php'                   => 'core/pattern',
-				'post-author.php'               => 'core/post-author',
-				'post-comment.php'              => 'core/post-comment',
-				'post-comments.php'             => 'core/post-comments',
-				'post-comments-count.php'       => 'core/post-comments-count',
-				'post-comments-form.php'        => 'core/post-comments-form',
-				'post-comments-link.php'        => 'core/post-comments-link',
-				'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-navigation-link.php'      => 'core/post-navigation-link',
-				'post-terms.php'                => 'core/post-terms',
-				'post-title.php'                => 'core/post-title',
-				'query.php'                     => 'core/query',
-				'post-template.php'             => 'core/post-template',
-				'query-pagination.php'          => 'core/query-pagination',
-				'query-pagination-next.php'     => 'core/query-pagination-next',
-				'query-pagination-numbers.php'  => 'core/query-pagination-numbers',
-				'query-pagination-previous.php' => 'core/query-pagination-previous',
-				'query-title.php'               => 'core/query-title',
-				'rss.php'                       => 'core/rss',
-				'search.php'                    => 'core/search',
-				'shortcode.php'                 => 'core/shortcode',
-				'social-link.php'               => 'core/social-link',
-				'site-logo.php'                 => 'core/site-logo',
-				'site-tagline.php'              => 'core/site-tagline',
-				'site-title.php'                => 'core/site-title',
-				// 'table-of-contents.php'        => 'core/table-of-contents',
-				'tag-cloud.php'                 => 'core/tag-cloud',
-				'template-part.php'             => 'core/template-part',
-				'term-description.php'          => 'core/term-description',
+				'archives.php'                    => 'core/archives',
+				'block.php'                       => 'core/block',
+				'calendar.php'                    => 'core/calendar',
+				'categories.php'                  => 'core/categories',
+				'comment-author-avatar.php'       => 'core/comment-author-avatar',
+				'comment-author-name.php'         => 'core/comment-author-name',
+				'comment-content.php'             => 'core/comment-content',
+				'comment-date.php'                => 'core/comment-date',
+				'comment-edit-link.php'           => 'core/comment-edit-link',
+				'comment-reply-link.php'          => 'core/comment-reply-link',
+				'comment-template.php'            => 'core/comment-template',
+				'comments-pagination-numbers.php' => 'core/comments-pagination-numbers',
+				'file.php'                        => 'core/file',
+				'home-link.php'                   => 'core/home-link',
+				'image.php'                       => 'core/image',
+				'gallery.php'                     => 'core/gallery',
+				'latest-comments.php'             => 'core/latest-comments',
+				'latest-posts.php'                => 'core/latest-posts',
+				'loginout.php'                    => 'core/loginout',
+				'navigation.php'                  => 'core/navigation',
+				'navigation-area.php'             => 'core/navigation-area',
+				'navigation-link.php'             => 'core/navigation-link',
+				'navigation-submenu.php'          => 'core/navigation-submenu',
+				'page-list.php'                   => 'core/page-list',
+				'pattern.php'                     => 'core/pattern',
+				'post-author.php'                 => 'core/post-author',
+				'post-comment.php'                => 'core/post-comment',
+				'post-comments.php'               => 'core/post-comments',
+				'post-comments-count.php'         => 'core/post-comments-count',
+				'post-comments-form.php'          => 'core/post-comments-form',
+				'post-comments-link.php'          => 'core/post-comments-link',
+				'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-navigation-link.php'        => 'core/post-navigation-link',
+				'post-terms.php'                  => 'core/post-terms',
+				'post-title.php'                  => 'core/post-title',
+				'query.php'                       => 'core/query',
+				'post-template.php'               => 'core/post-template',
+				'query-pagination.php'            => 'core/query-pagination',
+				'query-pagination-next.php'       => 'core/query-pagination-next',
+				'query-pagination-numbers.php'    => 'core/query-pagination-numbers',
+				'query-pagination-previous.php'   => 'core/query-pagination-previous',
+				'query-title.php'                 => 'core/query-title',
+				'rss.php'                         => 'core/rss',
+				'search.php'                      => 'core/search',
+				'shortcode.php'                   => 'core/shortcode',
+				'social-link.php'                 => 'core/social-link',
+				'site-logo.php'                   => 'core/site-logo',
+				'site-tagline.php'                => 'core/site-tagline',
+				'site-title.php'                  => 'core/site-title',
+				// 'table-of-contents.php'          => 'core/table-of-contents',
+				'tag-cloud.php'                   => 'core/tag-cloud',
+				'template-part.php'               => 'core/template-part',
+				'term-description.php'            => 'core/term-description',
 			),
 		),
 		__DIR__ . '/../build/edit-widgets/blocks/'  => array(

packages/block-library/src/comments-pagination-numbers/block.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination-numbers",
+	"title": "Comments Pagination Numbers",
+  "category": "theme",
+	"parent": [ "core/comments-pagination" ],
+	"description": "Displays a list of page numbers for comments pagination.",
+	"textdomain": "default",
+	"usesContext": [ "queryId", "queryPerPage", "postId" ],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"editorStyle": "comments-pagination-numbers-editor"
+}

packages/block-library/src/comments-pagination-numbers/edit.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+const PaginationItem = ( { content, tag: Tag = 'a', extraClass = '' } ) => (
+	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+);
+
+export default function CommentsPaginationNumbersEdit() {
+	return (
+		<div { ...useBlockProps() }>
+			<PaginationItem content="1" />
+			<PaginationItem content="2" />
+			<PaginationItem content="3" tag="span" extraClass="current" />
+			<PaginationItem content="4" />
+			<PaginationItem content="5" />
+			<PaginationItem content="..." tag="span" extraClass="dots" />
+			<PaginationItem content="8" />
+		</div>
+	);
+}

packages/block-library/src/comments-pagination-numbers/editor.scss

@@ -0,0 +1,12 @@
+.wp-block-comments-pagination-numbers {
+	a {
+		text-decoration: underline;
+	}
+	.page-numbers {
+		margin-right: 2px;
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+}

packages/block-library/src/comments-pagination-numbers/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPaginationNumbers 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 = {
+	icon,
+	edit,
+};

packages/block-library/src/comments-pagination-numbers/index.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-numbers` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-numbers` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the pagination numbers for the comments.
+ */
+function render_block_core_comments_pagination_numbers( $attributes, $content, $block ) {
+	// Get the post ID from which comments should be retrieved.
+	$post_id = isset( $block->context['postId'] )
+		? $block->context['postId']
+		: get_the_id();
+
+	if ( ! $post_id ) {
+		return '';
+	}
+
+	// Get the 'comments per page' setting.
+	$per_page = isset( $block->context['queryPerPage'] )
+		? $block->context['queryPerPage']
+		: get_option( 'comments_per_page' );
+
+	// Get the total number of pages.
+	$comments = get_approved_comments( $post_id );
+	$total    = get_comment_pages_count( $comments, $per_page );
+
+	// Get the number of the default page.
+	$default_page = 'newest' === get_option( 'default_comments_page' ) ? $total : 1;
+
+	// Get the current comment page from the URL.
+	$current = get_query_var( 'cpage' );
+	if ( ! $current ) {
+		$current = $default_page;
+	}
+
+	// Render links.
+	$content = paginate_comments_links(
+		array(
+			'total'     => $total,
+			'current'   => $current,
+			'prev_next' => false,
+			'echo'      => false,
+		)
+	);
+
+	if ( empty( $content ) ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination-numbers` block on the server.
+ */
+function register_block_core_comments_pagination_numbers() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-numbers',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_numbers',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_numbers' );

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

@@ -20,7 +20,6 @@
 		"align": true,
 		"reusable": false,
 		"html": false,
-		"inserter": false,
 		"color": {
 			"gradients": true,
 			"link": true

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

@@ -17,6 +17,9 @@ import { PanelBody } from '@wordpress/components';
  */
 import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
 
+// TODO: add pagination-previous/next blocks once they are implemented.
+const TEMPLATE = [ [ 'core/comments-pagination-numbers' ] ];
+
 const getDefaultBlockLayout = ( blockTypeOrName ) => {
 	const layoutBlockSupportConfig = getBlockSupport(
 		blockTypeOrName,
@@ -48,6 +51,11 @@ export default function QueryPaginationEdit( {
 	}, [] );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: [
+			// TODO: add pagination-previous/next blocks once they are implemented.
+			'core/comments-pagination-numbers',
+		],
 		__experimentalLayout: usedLayout,
 	} );
 	return (

packages/block-library/src/editor.scss

@@ -5,6 +5,8 @@
 @import "./buttons/editor.scss";
 @import "./categories/editor.scss";
 @import "./columns/editor.scss";
+@import "./comments-pagination/editor.scss";
+@import "./comments-pagination-numbers/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

packages/block-library/src/index.js

@@ -31,6 +31,7 @@ import * as commentReplyLink from './comment-reply-link';
 import * as commentTemplate from './comment-template';
 import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
+import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -256,6 +257,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentTemplate,
 								commentsQueryLoop,
 								commentsPagination,
+								commentsPaginationNumbers,
 								navigationArea,
 								postComment,
 								postCommentsCount,

packages/block-library/src/style.scss

@@ -6,6 +6,7 @@
 @import "./categories/style.scss";
 @import "./code/style.scss";
 @import "./columns/style.scss";
+@import "./comments-pagination/style.scss";
 @import "./cover/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";

test/integration/fixtures/blocks/core__comments-pagination-numbers.html

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

test/integration/fixtures/blocks/core__comments-pagination-numbers.json

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

test/integration/fixtures/blocks/core__comments-pagination-numbers.parsed.json

@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/comments-pagination-numbers",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__comments-pagination-numbers.serialized.html

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