Block Library: Add the Comments Pagination block

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

@@ -0,0 +1,36 @@
+{
+	"apiVersion": 2,
+	"name": "core/comments-pagination",
+	"title": "Comment Pagination",
+	"category": "design",
+	"parent": [ "core/comments-query-loop" ],
+	"description": "Displays a paginated navigation to next/previous set of comments, when applicable.",
+	"textdomain": "default",
+	"attributes": {
+		"paginationArrow": {
+			"type": "string",
+			"default": "none"
+		}
+	},
+	"providesContext": {
+		"paginationArrow": "paginationArrow"
+	},
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
+		}
+	},
+	"editorStyle": "wp-block-comments-pagination-editor",
+	"style": "wp-block-comments-pagination"
+}

packages/block-library/src/comments-pagination/comments-pagination-arrow-controls.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+export function CommentsPaginationArrowControls( { value, onChange } ) {
+	return (
+		<ToggleGroupControl
+			label={ __( 'Arrow' ) }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'A decorative arrow appended to the next and previous comments link.'
+			) }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				value="none"
+				label={ _x(
+					'None',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="arrow"
+				label={ _x(
+					'Arrow',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="chevron"
+				label={ _x(
+					'Chevron',
+					'Arrow option for Comments Pagination Next/Previous blocks'
+				) }
+			/>
+		</ToggleGroupControl>
+	);
+}

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

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+
+const TEMPLATE = [
+	[ 'core/query-pagination-previous' ],
+	[ 'core/query-pagination-numbers' ],
+	[ 'core/query-pagination-next' ],
+];
+
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
+export default function QueryPaginationEdit( {
+	attributes: { paginationArrow, layout },
+	setAttributes,
+	clientId,
+	name,
+} ) {
+	const usedLayout = layout || getDefaultBlockLayout( name );
+	const hasNextPreviousBlocks = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const innerBlocks = getBlocks( clientId );
+		/**
+		 * Show the `paginationArrow` control only if a
+		 * `QueryPaginationNext/Previous` block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/query-pagination-next',
+				'core/query-pagination-previous',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		allowedBlocks: [
+			'core/query-pagination-previous',
+			'core/query-pagination-numbers',
+			'core/query-pagination-next',
+		],
+		__experimentalLayout: usedLayout,
+	} );
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<CommentsPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

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

@@ -0,0 +1,38 @@
+$pagination-margin: 0.5em;
+
+// Center flex items. This has an equivalent in style.scss.
+.wp-block[data-align="center"] > .wp-block-comments-pagination {
+	justify-content: center;
+}
+
+.editor-styles-wrapper {
+	.wp-block-comments-pagination {
+		max-width: 100%;
+		&.block-editor-block-list__layout {
+			margin: 0;
+		}
+	}
+}
+
+.block-library-comments-pagination-toolbar__popover .components-popover__content {
+	min-width: 230px;
+}
+
+.wp-block-comments-pagination {
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		// Override editor auto block margins.
+		margin-left: 0;
+		margin-top: $pagination-margin;
+
+		/*rtl:ignore*/
+		margin-right: $pagination-margin;
+		margin-bottom: $pagination-margin;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+}

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

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

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

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-pagination` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-pagination` block on the server.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ *
+ * @return string Returns the wrapper for the Comments pagination.
+ */
+function render_block_core_comments_pagination( $attributes, $content ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/comments-pagination` block on the server.
+ */
+function register_block_core_comments_pagination() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-pagination',
+		array(
+			'render_callback' => 'render_block_core_comments_pagination',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comments_pagination' );

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

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

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

@@ -0,0 +1,38 @@
+$pagination-margin: 0.5em;
+.wp-block-comments-pagination {
+	// Increased specificity to override blocks default margin.
+	> .wp-block-comments-pagination-next,
+	> .wp-block-comments-pagination-previous,
+	> .wp-block-comments-pagination-numbers {
+		/*rtl:ignore*/
+		margin-right: $pagination-margin;
+		margin-bottom: $pagination-margin;
+
+		&:last-child {
+			/*rtl:ignore*/
+			margin-right: 0;
+		}
+	}
+	.wp-block-comments-pagination-previous-arrow {
+		margin-right: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+	.wp-block-comments-pagination-next-arrow {
+		margin-left: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	&.aligncenter {
+		justify-content: center;
+	}
+}

packages/block-library/src/index.js

@@ -30,6 +30,7 @@ import * as commentEditLink from './comment-edit-link';
 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 cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -253,6 +254,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								commentReplyLink,
 								commentTemplate,
 								commentsQueryLoop,
+								commentsPagination,
 								postComment,
 								postCommentsCount,
 								postCommentsForm,