Block Library: Add the Comments Pagination Next block

lib/blocks.php

@@ -66,6 +66,7 @@ function gutenberg_reregister_core_block_types() {
 				'comment-template.php'            => 'core/comment-template',
 				'comments-pagination.php'         => 'core/comments-pagination',
 				'comments-pagination-numbers.php' => 'core/comments-pagination-numbers',
+				'comments-pagination-next.php'    => 'core/comments-pagination-next',
 				'file.php'                        => 'core/file',
 				'home-link.php'                   => 'core/home-link',
 				'image.php'                       => 'core/image',

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

@@ -0,0 +1,35 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/comments-pagination-next",
+	"title": "Next Page",
+	"category": "theme",
+	"parent": [ "core/comments-pagination" ],
+	"description": "Displays the next comments page link.",
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "postId", "comments/perPage", "paginationArrow" ],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"text": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

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

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, PlainText } from '@wordpress/block-editor';
+
+const arrowMap = {
+	none: '',
+	arrow: '→',
+	chevron: '»',
+};
+
+export default function CommentsPaginationNextEdit( {
+	attributes: { label },
+	setAttributes,
+	context: { paginationArrow },
+} ) {
+	const displayArrow = arrowMap[ paginationArrow ];
+	return (
+		<a
+			href="#comments-pagination-next-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+			{ ...useBlockProps() }
+		>
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Next comments page link' ) }
+				placeholder={ __( 'Next Comments' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
+	);
+}

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { queryPaginationNext 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-next/index.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination-next` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination-next` 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 next comments link for the query pagination.
+ */
+function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
+	$per_page = ! empty( $block->context['comments/perPage'] ) ? (int) $block->context['comments/perPage'] : 0;
+	if ( 0 === $per_page && get_option( 'page_comments' ) ) {
+		$per_page = (int) get_query_var( 'comments_per_page' );
+		if ( 0 === $per_page ) {
+			$per_page = (int) get_option( 'comments_per_page' );
+		}
+	}
+	$comments_number  = (int) get_comments_number();
+	$max_page         = isset( $per_page ) ? (int) floor( $comments_number / $per_page ) : 0;
+	$default_label    = __( 'Next Comments' );
+	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow = get_query_pagination_arrow( $block, true );
+
+	$filter_link_attributes = function() {
+		return get_block_wrapper_attributes();
+	};
+	add_filter( 'next_comments_link_attributes', $filter_link_attributes );
+
+	if ( $pagination_arrow ) {
+		$label .= $pagination_arrow;
+	}
+
+	$next_comments_link = get_next_comments_link( $label, $max_page );
+
+	remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
+
+	if ( ! isset( $next_comments_link ) ) {
+		return '';
+	}
+	return $next_comments_link;
+}
+
+
+/**
+ * Registers the `core/comments-pagination-next` block on the server.
+ */
+function register_block_core_comments_pagination_next() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination-next',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination_next',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination_next' );

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

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

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

@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/comments-query-loop" ],
 	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
 	"textdomain": "default",

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

@@ -17,8 +17,11 @@ 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' ] ];
+// TODO: add pagination-previous blocks once they are implemented.
+const TEMPLATE = [
+	[ 'core/comments-pagination-numbers' ],
+	[ 'core/comments-pagination-next' ],
+];
 
 const getDefaultBlockLayout = ( blockTypeOrName ) => {
 	const layoutBlockSupportConfig = getBlockSupport(
@@ -40,21 +43,21 @@ export default function QueryPaginationEdit( {
 		const innerBlocks = getBlocks( clientId );
 		/**
 		 * Show the `paginationArrow` control only if a
-		 * `QueryPaginationNext/Previous` block exists.
+		 * Comments Pagination Next block exists.
 		 */
 		return innerBlocks?.find( ( innerBlock ) => {
-			return [
-				'core/query-pagination-next',
-				'core/query-pagination-previous',
-			].includes( innerBlock.name );
+			return [ 'core/comments-pagination-next' ].includes(
+				innerBlock.name
+			);
 		} );
 	}, [] );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		allowedBlocks: [
-			// TODO: add pagination-previous/next blocks once they are implemented.
+			// TODO: add pagination-previous blocks once they are implemented.
 			'core/comments-pagination-numbers',
+			'core/comments-pagination-next',
 		],
 		__experimentalLayout: usedLayout,
 	} );

packages/block-library/src/comments-pagination/style.scss

@@ -13,7 +13,8 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
-	.wp-block-comments-pagination-previous-arrow {
+	// wp-block-query-pagination_* is being used for both Query Loop and Comment Loop pagination arrows block.
+	.wp-block-query-pagination-previous-arrow {
 		margin-right: 1ch;
 		display: inline-block; // Needed so that the transform works.
 		// chevron(`»`) symbol doesn't need the mirroring by us.
@@ -22,7 +23,7 @@ $pagination-margin: 0.5em;
 			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
 		}
 	}
-	.wp-block-comments-pagination-next-arrow {
+	.wp-block-query-pagination-next-arrow {
 		margin-left: 1ch;
 		display: inline-block; // Needed so that the transform works.
 		// chevron(`»`) symbol doesn't need the mirroring by us.

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 commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as cover from './cover';
 import * as embed from './embed';
@@ -257,6 +258,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentTemplate,
 								commentsQueryLoop,
 								commentsPagination,
+								commentsPaginationNext,
 								commentsPaginationNumbers,
 								navigationArea,
 								postComment,

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

@@ -0,0 +1 @@
+<!-- wp:comments-pagination-next {"label":"Next Comments","style":{"typography":{"textTransform":"lowercase"}},"fontSize":"medium"} /-->

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

@@ -0,0 +1,18 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/comments-pagination-next",
+		"isValid": true,
+		"attributes": {
+			"label": "Next Comments",
+			"fontSize": "medium",
+			"style": {
+				"typography": {
+					"textTransform": "lowercase"
+				}
+			}
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]

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

@@ -0,0 +1,17 @@
+[
+	{
+		"blockName": "core/comments-pagination-next",
+		"attrs": {
+			"label": "Next Comments",
+			"style": {
+				"typography": {
+					"textTransform": "lowercase"
+				}
+			},
+			"fontSize": "medium"
+		},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

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

@@ -0,0 +1 @@
+<!-- wp:comments-pagination-next {"label":"Next Comments","fontSize":"medium","style":{"typography":{"textTransform":"lowercase"}}} /-->