From d21fb9f20e3a32f7de8fc245197b480e8156c65b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos@ticloop.com>
Date: Mon, 15 Nov 2021 14:41:36 +0100
Subject: [PATCH 01/14] Add pagination next block

---
 lib/blocks.php                                |  1 +
 .../src/comments-pagination-next/block.json   | 35 +++++++++++++
 .../src/comments-pagination-next/edit.js      | 42 +++++++++++++++
 .../src/comments-pagination-next/index.js     | 18 +++++++
 .../src/comments-pagination-next/index.php    | 51 +++++++++++++++++++
 packages/block-library/src/index.js           |  2 +
 .../core__comments-pagination-next.html       |  1 +
 .../core__comments-pagination-next.json       | 10 ++++
 ...core__comments-pagination-next.parsed.json |  9 ++++
 ...__comments-pagination-next.serialized.html |  1 +
 10 files changed, 170 insertions(+)
 create mode 100644 packages/block-library/src/comments-pagination-next/block.json
 create mode 100644 packages/block-library/src/comments-pagination-next/edit.js
 create mode 100644 packages/block-library/src/comments-pagination-next/index.js
 create mode 100644 packages/block-library/src/comments-pagination-next/index.php
 create mode 100644 test/integration/fixtures/blocks/core__comments-pagination-next.html
 create mode 100644 test/integration/fixtures/blocks/core__comments-pagination-next.json
 create mode 100644 test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
 create mode 100644 test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html

diff --git a/lib/blocks.php b/lib/blocks.php
index 844c11fa6a5d21..cd8095f5ca1fe1 100644
--- a/lib/blocks.php
+++ b/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',
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
new file mode 100644
index 00000000000000..9c1e232d196259
--- /dev/null
+++ b/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": "Comments Pagination Next",
+	"category": "design",
+	"parent": [ "core/comments-query-loop" ],
+	"description": "Displays the next comments page link.",
+	"textdomain": "default",
+	"attributes": {
+		"label": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "postId", "queryPerPage" ],
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}
diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
new file mode 100644
index 00000000000000..1ee33cded37e31
--- /dev/null
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -0,0 +1,42 @@
+/**
+ * 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 ] || arrowMap.none;
+	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` }>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
+	);
+}
diff --git a/packages/block-library/src/comments-pagination-next/index.js b/packages/block-library/src/comments-pagination-next/index.js
new file mode 100644
index 00000000000000..d339ed2ca7581c
--- /dev/null
+++ b/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,
+};
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
new file mode 100644
index 00000000000000..321da5d52cec36
--- /dev/null
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -0,0 +1,51 @@
+<?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 posts link for the query pagination.
+ */
+function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
+	$comments_per_page = isset( $block->context['queryPerPage'] ) ? $block->context['queryPerPage'] : 4;
+	$comments_number   = (int) get_comments_number();
+	$max_page          = (int) floor( $comments_number / $comments_per_page );
+
+	$default_label      = __( 'Next Comments' );
+	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$arrow              = isset( $block->context['paginationArrow'] ) ? $block->context['paginationArrow'] : '';
+	$next_comments_link = get_next_comments_link( sprintf( '%1s %2s', $label, $arrow ), $max_page );
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wp-block-next-comments-link' ) );
+
+	if ( ! isset( $next_comments_link ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1s>%2s</div>',
+		$wrapper_attributes,
+		$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' );
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
index 8fa9fb5eb310e5..7eb9b0da8f7901 100644
--- a/packages/block-library/src/index.js
+++ b/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,
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.html b/test/integration/fixtures/blocks/core__comments-pagination-next.html
new file mode 100644
index 00000000000000..b65cfc34015b62
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.html
@@ -0,0 +1 @@
+<!-- wp:comments-pagination-next /-->
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.json b/test/integration/fixtures/blocks/core__comments-pagination-next.json
new file mode 100644
index 00000000000000..22de00916342cb
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.json
@@ -0,0 +1,10 @@
+[
+	{
+		"clientId": "_clientId_0",
+		"name": "core/comments-pagination-next",
+		"isValid": true,
+		"attributes": {},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
new file mode 100644
index 00000000000000..e74ef562deae6b
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/comments-pagination-next",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
new file mode 100644
index 00000000000000..b65cfc34015b62
--- /dev/null
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
@@ -0,0 +1 @@
+<!-- wp:comments-pagination-next /-->

From 8f56293552dc221f0eaf662d5966cefbd20e856b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos@ticloop.com>
Date: Mon, 15 Nov 2021 16:31:28 +0100
Subject: [PATCH 02/14] Remove not needed attribute color, added arrow as
 context

---
 .../src/comments-pagination-next/block.json   |  5 ++-
 .../src/comments-pagination-next/edit.js      | 43 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 9c1e232d196259..2399cb189b420a 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,13 +12,14 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "postId", "queryPerPage" ],
+	"usesContext": [ "postId", "queryPerPage", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"text": false
 		},
 		"typography": {
 			"fontSize": true,
diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
index 1ee33cded37e31..ddc34b2829167d 100644
--- a/packages/block-library/src/comments-pagination-next/edit.js
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -17,26 +17,27 @@ export default function CommentsPaginationNextEdit( {
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ] || arrowMap.none;
 	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` }>
-					{ displayArrow }
-				</span>
-			) }
-		</a>
+		<div { ...useBlockProps() }>
+			<a
+				href="#comments-pagination-next-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				<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` }>
+						{ displayArrow }
+					</span>
+				) }
+			</a>
+		</div>
 	);
 }

From 8b659ab80a74beec4fb20133ac7b7cea042098a5 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos@ticloop.com>
Date: Mon, 15 Nov 2021 17:02:02 +0100
Subject: [PATCH 03/14] Update fixtures

---
 .../src/query-pagination-next/edit.js         | 47 ++++++++++---------
 .../core__comments-pagination-next.html       |  2 +-
 .../core__comments-pagination-next.json       | 22 ++++++++-
 ...core__comments-pagination-next.parsed.json | 22 ++++++++-
 ...__comments-pagination-next.serialized.html |  2 +-
 5 files changed, 68 insertions(+), 27 deletions(-)

diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js
index d91f3d7e0ba303..eb0089ba023f1b 100644
--- a/packages/block-library/src/query-pagination-next/edit.js
+++ b/packages/block-library/src/query-pagination-next/edit.js
@@ -17,28 +17,29 @@ export default function QueryPaginationNextEdit( {
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<a
-			href="#pagination-next-pseudo-link"
-			onClick={ ( event ) => event.preventDefault() }
-			{ ...useBlockProps() }
-		>
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Next page link' ) }
-				placeholder={ __( 'Next Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
-			{ displayArrow && (
-				<span
-					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
-				>
-					{ displayArrow }
-				</span>
-			) }
-		</a>
+		<div { ...useBlockProps() }>
+			<a
+				href="#pagination-next-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Next page link' ) }
+					placeholder={ __( 'Next Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+				{ displayArrow && (
+					<span
+						className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+					>
+						{ displayArrow }
+					</span>
+				) }
+			</a>
+		</div>
 	);
 }
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.html b/test/integration/fixtures/blocks/core__comments-pagination-next.html
index b65cfc34015b62..173ec4aa88466e 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next /-->
+<!-- wp:comments-pagination-next {"style":{"color":{"text":"#cf2e2e"},"elements":{"link":{"color":{"text":"#00ff51"}}},"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}},"backgroundColor":"black","fontSize":"large"} /-->
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.json b/test/integration/fixtures/blocks/core__comments-pagination-next.json
index 22de00916342cb..45b793892b390c 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.json
@@ -3,7 +3,27 @@
 		"clientId": "_clientId_0",
 		"name": "core/comments-pagination-next",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"backgroundColor": "black",
+			"fontSize": "large",
+			"style": {
+				"color": {
+					"text": "#cf2e2e"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#00ff51"
+						}
+					}
+				},
+				"typography": {
+					"textTransform": "uppercase",
+					"fontStyle": "normal",
+					"fontWeight": "700"
+				}
+			}
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
index e74ef562deae6b..f381bd9b944325 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
@@ -1,7 +1,27 @@
 [
 	{
 		"blockName": "core/comments-pagination-next",
-		"attrs": {},
+		"attrs": {
+			"style": {
+				"color": {
+					"text": "#cf2e2e"
+				},
+				"elements": {
+					"link": {
+						"color": {
+							"text": "#00ff51"
+						}
+					}
+				},
+				"typography": {
+					"textTransform": "uppercase",
+					"fontStyle": "normal",
+					"fontWeight": "700"
+				}
+			},
+			"backgroundColor": "black",
+			"fontSize": "large"
+		},
 		"innerBlocks": [],
 		"innerHTML": "",
 		"innerContent": []
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
index b65cfc34015b62..f5710ee752803b 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next /-->
+<!-- wp:comments-pagination-next {"backgroundColor":"black","fontSize":"large","style":{"color":{"text":"#cf2e2e"},"elements":{"link":{"color":{"text":"#00ff51"}}},"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}}} /-->

From 59bfce9bab39dacee4bd6caeb60f3096cb03200b Mon Sep 17 00:00:00 2001
From: Carlos Bravo <carlos@ticloop.com>
Date: Tue, 16 Nov 2021 09:08:17 +0100
Subject: [PATCH 04/14] Update PHP code

---
 .../src/comments-pagination-next/index.php          | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 321da5d52cec36..405548c5e83dad 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -19,12 +19,15 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$comments_number   = (int) get_comments_number();
 	$max_page          = (int) floor( $comments_number / $comments_per_page );
 
-	$default_label      = __( 'Next Comments' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$arrow              = isset( $block->context['paginationArrow'] ) ? $block->context['paginationArrow'] : '';
-	$next_comments_link = get_next_comments_link( sprintf( '%1s %2s', $label, $arrow ), $max_page );
+	$default_label    = __( 'Next Comments' );
+	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow = get_query_pagination_arrow( $block, true );
+	if ( $pagination_arrow ) {
+		$label .= $pagination_arrow;
+	}
+	$next_comments_link = get_next_comments_link( $label, $max_page );
 
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wp-block-next-comments-link' ) );
+	$wrapper_attributes = get_block_wrapper_attributes();
 
 	if ( ! isset( $next_comments_link ) ) {
 		return '';

From 969fe74ecb674b41514c7b6e23fdb75a229b6da5 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Wed, 1 Dec 2021 17:49:40 +0100
Subject: [PATCH 05/14] Update block to have arrow from comments pagination
 block

---
 .../src/comments-pagination-next/block.json   |  3 +--
 .../src/comments-pagination-next/edit.js      |  2 +-
 .../src/comments-pagination-next/index.php    |  7 +++---
 .../src/comments-pagination/edit.js           | 19 +++++++++-------
 .../core__comments-pagination-next.html       |  2 +-
 .../core__comments-pagination-next.json       | 22 +------------------
 ...core__comments-pagination-next.parsed.json | 22 +------------------
 ...__comments-pagination-next.serialized.html |  2 +-
 8 files changed, 20 insertions(+), 59 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 2399cb189b420a..97b9d817a9c522 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -4,7 +4,7 @@
 	"name": "core/comments-pagination-next",
 	"title": "Comments Pagination Next",
 	"category": "design",
-	"parent": [ "core/comments-query-loop" ],
+	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comments page link.",
 	"textdomain": "default",
 	"attributes": {
@@ -18,7 +18,6 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true,
 			"text": false
 		},
 		"typography": {
diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
index ddc34b2829167d..9ee06fdbbc4446 100644
--- a/packages/block-library/src/comments-pagination-next/edit.js
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -15,7 +15,7 @@ export default function CommentsPaginationNextEdit( {
 	setAttributes,
 	context: { paginationArrow },
 } ) {
-	const displayArrow = arrowMap[ paginationArrow ] || arrowMap.none;
+	const displayArrow = arrowMap[ paginationArrow ];
 	return (
 		<div { ...useBlockProps() }>
 			<a
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 405548c5e83dad..e5651a683f4368 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -18,10 +18,9 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$comments_per_page = isset( $block->context['queryPerPage'] ) ? $block->context['queryPerPage'] : 4;
 	$comments_number   = (int) get_comments_number();
 	$max_page          = (int) floor( $comments_number / $comments_per_page );
-
-	$default_label    = __( 'Next Comments' );
-	$label            = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$pagination_arrow = get_query_pagination_arrow( $block, true );
+	$default_label     = __( 'Next Comments' );
+	$label             = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow  = get_query_pagination_arrow( $block, true );
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
index bd9051e16f05d4..4b218f533ffa3c 100644
--- a/packages/block-library/src/comments-pagination/edit.js
+++ b/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-next' ],
+	[ 'core/comments-pagination-numbers' ],
+];
 
 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.
+		 * `CommentsPaginationNext/Previous` 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,
 	} );
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.html b/test/integration/fixtures/blocks/core__comments-pagination-next.html
index 173ec4aa88466e..0f05bcb8647dc5 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next {"style":{"color":{"text":"#cf2e2e"},"elements":{"link":{"color":{"text":"#00ff51"}}},"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}},"backgroundColor":"black","fontSize":"large"} /-->
+<!-- wp:comments-pagination-next /-->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.json b/test/integration/fixtures/blocks/core__comments-pagination-next.json
index 45b793892b390c..22de00916342cb 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.json
@@ -3,27 +3,7 @@
 		"clientId": "_clientId_0",
 		"name": "core/comments-pagination-next",
 		"isValid": true,
-		"attributes": {
-			"backgroundColor": "black",
-			"fontSize": "large",
-			"style": {
-				"color": {
-					"text": "#cf2e2e"
-				},
-				"elements": {
-					"link": {
-						"color": {
-							"text": "#00ff51"
-						}
-					}
-				},
-				"typography": {
-					"textTransform": "uppercase",
-					"fontStyle": "normal",
-					"fontWeight": "700"
-				}
-			}
-		},
+		"attributes": {},
 		"innerBlocks": [],
 		"originalContent": ""
 	}
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
index f381bd9b944325..e74ef562deae6b 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
@@ -1,27 +1,7 @@
 [
 	{
 		"blockName": "core/comments-pagination-next",
-		"attrs": {
-			"style": {
-				"color": {
-					"text": "#cf2e2e"
-				},
-				"elements": {
-					"link": {
-						"color": {
-							"text": "#00ff51"
-						}
-					}
-				},
-				"typography": {
-					"textTransform": "uppercase",
-					"fontStyle": "normal",
-					"fontWeight": "700"
-				}
-			},
-			"backgroundColor": "black",
-			"fontSize": "large"
-		},
+		"attrs": {},
 		"innerBlocks": [],
 		"innerHTML": "",
 		"innerContent": []
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
index f5710ee752803b..b65cfc34015b62 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next {"backgroundColor":"black","fontSize":"large","style":{"color":{"text":"#cf2e2e"},"elements":{"link":{"color":{"text":"#00ff51"}}},"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"700"}}} /-->
+<!-- wp:comments-pagination-next /-->

From c57ad77526bd5c2f10926ae5092db86527cdb4e6 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Wed, 1 Dec 2021 20:40:16 +0100
Subject: [PATCH 06/14] Add pagination arrow class on edit

---
 .../src/comments-pagination-next/edit.js      | 45 ++++++++++---------
 .../src/comments-pagination-next/index.php    |  2 +-
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
index 9ee06fdbbc4446..7a38ea1970a060 100644
--- a/packages/block-library/src/comments-pagination-next/edit.js
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -17,27 +17,28 @@ export default function CommentsPaginationNextEdit( {
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<div { ...useBlockProps() }>
-			<a
-				href="#comments-pagination-next-pseudo-link"
-				onClick={ ( event ) => event.preventDefault() }
-			>
-				<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` }>
-						{ displayArrow }
-					</span>
-				) }
-			</a>
-		</div>
+		<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>
 	);
 }
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index e5651a683f4368..8b2dc2a03b1c51 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -12,7 +12,7 @@
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.
  *
- * @return string Returns the next posts link for the query pagination.
+ * @return string Returns the next comments link for the query pagination.
  */
 function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
 	$comments_per_page = isset( $block->context['queryPerPage'] ) ? $block->context['queryPerPage'] : 4;

From 265e8d8209bf75ed906b87e8d598d58d546375f3 Mon Sep 17 00:00:00 2001
From: Grzegorz Ziolkowski <grzegorz@gziolo.pl>
Date: Thu, 2 Dec 2021 12:53:10 +0100
Subject: [PATCH 07/14] Change the category for comments pagination blocks

---
 packages/block-library/src/comments-pagination-next/block.json | 2 +-
 packages/block-library/src/comments-pagination/block.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 97b9d817a9c522..59c6bdaaa5a38a 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -3,7 +3,7 @@
 	"apiVersion": 2,
 	"name": "core/comments-pagination-next",
 	"title": "Comments Pagination Next",
-	"category": "design",
+	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comments page link.",
 	"textdomain": "default",
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
index 7ddbce715c44b4..323f7c57516cbc 100644
--- a/packages/block-library/src/comments-pagination/block.json
+++ b/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",

From fd078b935d09fc4e82aca3c4c84580142f67a0bc Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Thu, 2 Dec 2021 15:06:33 +0100
Subject: [PATCH 08/14] Add function to style arrows on comment pagination in
 php

---
 lib/compat/wordpress-5.9.1/blocks.php         | 44 +++++++++++++++++++
 lib/load.php                                  |  4 ++
 .../src/comments-pagination-next/edit.js      |  2 +-
 .../src/comments-pagination-next/index.php    |  2 +-
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 lib/compat/wordpress-5.9.1/blocks.php

diff --git a/lib/compat/wordpress-5.9.1/blocks.php b/lib/compat/wordpress-5.9.1/blocks.php
new file mode 100644
index 00000000000000..8d76ee599e0e7b
--- /dev/null
+++ b/lib/compat/wordpress-5.9.1/blocks.php
@@ -0,0 +1,44 @@
+<?php
+/**
+ * Temporary compatibility shims for features present in Gutenberg.
+ * This file should be removed when WordPress 5.9.1 becomes the lowest
+ * supported version by this plugin.
+ *
+ * @package gutenberg
+ */
+
+if ( ! function_exists( 'get_comments_pagination_arrow' ) ) {
+	/**
+	 * Helper function that returns the proper pagination arrow html for
+	 * `QueryPaginationNext` and `QueryPaginationPrevious` blocks based
+	 * on the provided `paginationArrow` from `QueryPagination` context.
+	 *
+	 * It's used in QueryPaginationNext and QueryPaginationPrevious blocks.
+	 *
+	 * @param WP_Block $block   Block instance.
+	 * @param boolean  $is_next Flag for hanlding `next/previous` blocks.
+	 *
+	 * @return string|null Returns the constructed WP_Query arguments.
+	 */
+	function get_comments_pagination_arrow( $block, $is_next ) {
+		$arrow_map = array(
+			'none'    => '',
+			'arrow'   => array(
+				'next'     => '→',
+				'previous' => '←',
+			),
+			'chevron' => array(
+				'next'     => '»',
+				'previous' => '«',
+			),
+		);
+		if ( ! empty( $block->context['paginationArrow'] ) && array_key_exists( $block->context['paginationArrow'], $arrow_map ) && ! empty( $arrow_map[ $block->context['paginationArrow'] ] ) ) {
+			$pagination_type = $is_next ? 'next' : 'previous';
+			$arrow_attribute = $block->context['paginationArrow'];
+			$arrow           = $arrow_map[ $block->context['paginationArrow'] ][ $pagination_type ];
+			$arrow_classes   = "wp-block-comments-pagination-$pagination_type-arrow is-arrow-$arrow_attribute";
+			return "<span class='$arrow_classes'>$arrow</span>";
+		}
+		return null;
+	}
+}
diff --git a/lib/load.php b/lib/load.php
index 7317f9322ea8d8..204a81cd3fdd9e 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -125,7 +125,11 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php';
 require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php';
 require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php';
+<<<<<<< HEAD
 require __DIR__ . '/compat/experimental/blocks.php';
+=======
+require __DIR__ . '/compat/wordpress-5.9.1/blocks.php';
+>>>>>>> b3355e146d (Add function to style arrows on comment pagination in php)
 
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/block-patterns.php';
diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
index 7a38ea1970a060..c11dac517db44c 100644
--- a/packages/block-library/src/comments-pagination-next/edit.js
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -34,7 +34,7 @@ export default function CommentsPaginationNextEdit( {
 			/>
 			{ displayArrow && (
 				<span
-					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+					className={ `wp-block-comments-pagination-next-arrow is-arrow-${ paginationArrow }` }
 				>
 					{ displayArrow }
 				</span>
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 8b2dc2a03b1c51..80e094cbecf855 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -20,7 +20,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$max_page          = (int) floor( $comments_number / $comments_per_page );
 	$default_label     = __( 'Next Comments' );
 	$label             = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$pagination_arrow  = get_query_pagination_arrow( $block, true );
+	$pagination_arrow  = get_comments_pagination_arrow( $block, true );
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}

From 6ea4a875b09951bccbbecd40f535843b854d1f10 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Fri, 3 Dec 2021 22:51:53 +0100
Subject: [PATCH 09/14] Implement same styles than in query pagination

---
 lib/compat/wordpress-5.9.1/blocks.php         | 44 -----------------
 lib/load.php                                  |  4 --
 .../src/comments-pagination-next/block.json   |  2 +-
 .../src/comments-pagination-next/edit.js      |  2 +-
 .../src/comments-pagination-next/index.php    |  2 +-
 .../comments-pagination-numbers/block.json    |  7 ++-
 .../src/comments-pagination/block.json        |  4 +-
 .../src/comments-pagination/edit.js           |  2 +-
 .../src/comments-pagination/index.php         |  2 +-
 .../src/comments-pagination/style.scss        |  4 +-
 .../src/query-pagination-next/edit.js         | 47 +++++++++----------
 11 files changed, 35 insertions(+), 85 deletions(-)
 delete mode 100644 lib/compat/wordpress-5.9.1/blocks.php

diff --git a/lib/compat/wordpress-5.9.1/blocks.php b/lib/compat/wordpress-5.9.1/blocks.php
deleted file mode 100644
index 8d76ee599e0e7b..00000000000000
--- a/lib/compat/wordpress-5.9.1/blocks.php
+++ /dev/null
@@ -1,44 +0,0 @@
-<?php
-/**
- * Temporary compatibility shims for features present in Gutenberg.
- * This file should be removed when WordPress 5.9.1 becomes the lowest
- * supported version by this plugin.
- *
- * @package gutenberg
- */
-
-if ( ! function_exists( 'get_comments_pagination_arrow' ) ) {
-	/**
-	 * Helper function that returns the proper pagination arrow html for
-	 * `QueryPaginationNext` and `QueryPaginationPrevious` blocks based
-	 * on the provided `paginationArrow` from `QueryPagination` context.
-	 *
-	 * It's used in QueryPaginationNext and QueryPaginationPrevious blocks.
-	 *
-	 * @param WP_Block $block   Block instance.
-	 * @param boolean  $is_next Flag for hanlding `next/previous` blocks.
-	 *
-	 * @return string|null Returns the constructed WP_Query arguments.
-	 */
-	function get_comments_pagination_arrow( $block, $is_next ) {
-		$arrow_map = array(
-			'none'    => '',
-			'arrow'   => array(
-				'next'     => '→',
-				'previous' => '←',
-			),
-			'chevron' => array(
-				'next'     => '»',
-				'previous' => '«',
-			),
-		);
-		if ( ! empty( $block->context['paginationArrow'] ) && array_key_exists( $block->context['paginationArrow'], $arrow_map ) && ! empty( $arrow_map[ $block->context['paginationArrow'] ] ) ) {
-			$pagination_type = $is_next ? 'next' : 'previous';
-			$arrow_attribute = $block->context['paginationArrow'];
-			$arrow           = $arrow_map[ $block->context['paginationArrow'] ][ $pagination_type ];
-			$arrow_classes   = "wp-block-comments-pagination-$pagination_type-arrow is-arrow-$arrow_attribute";
-			return "<span class='$arrow_classes'>$arrow</span>";
-		}
-		return null;
-	}
-}
diff --git a/lib/load.php b/lib/load.php
index 204a81cd3fdd9e..7317f9322ea8d8 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -125,11 +125,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-5.9/class-gutenberg-rest-global-styles-controller.php';
 require __DIR__ . '/compat/wordpress-5.9/rest-active-global-styles.php';
 require __DIR__ . '/compat/wordpress-5.9/move-theme-editor-menu-item.php';
-<<<<<<< HEAD
 require __DIR__ . '/compat/experimental/blocks.php';
-=======
-require __DIR__ . '/compat/wordpress-5.9.1/blocks.php';
->>>>>>> b3355e146d (Add function to style arrows on comment pagination in php)
 
 require __DIR__ . '/blocks.php';
 require __DIR__ . '/block-patterns.php';
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index 59c6bdaaa5a38a..f017a40c92cd42 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comments-pagination-next",
-	"title": "Comments Pagination Next",
+	"title": "Next Page",
 	"category": "theme",
 	"parent": [ "core/comments-pagination" ],
 	"description": "Displays the next comments page link.",
diff --git a/packages/block-library/src/comments-pagination-next/edit.js b/packages/block-library/src/comments-pagination-next/edit.js
index c11dac517db44c..7a38ea1970a060 100644
--- a/packages/block-library/src/comments-pagination-next/edit.js
+++ b/packages/block-library/src/comments-pagination-next/edit.js
@@ -34,7 +34,7 @@ export default function CommentsPaginationNextEdit( {
 			/>
 			{ displayArrow && (
 				<span
-					className={ `wp-block-comments-pagination-next-arrow is-arrow-${ paginationArrow }` }
+					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
 				>
 					{ displayArrow }
 				</span>
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 80e094cbecf855..8b2dc2a03b1c51 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -20,7 +20,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$max_page          = (int) floor( $comments_number / $comments_per_page );
 	$default_label     = __( 'Next Comments' );
 	$label             = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$pagination_arrow  = get_comments_pagination_arrow( $block, true );
+	$pagination_arrow  = get_query_pagination_arrow( $block, true );
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json
index dbbe42dfbd191d..449d9962b274c6 100644
--- a/packages/block-library/src/comments-pagination-numbers/block.json
+++ b/packages/block-library/src/comments-pagination-numbers/block.json
@@ -2,8 +2,8 @@
 	"$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",
@@ -11,6 +11,5 @@
 	"supports": {
 		"reusable": false,
 		"html": false
-	},
-	"editorStyle": "comments-pagination-numbers-editor"
+	}
 }
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
index 323f7c57516cbc..8a2c767fd6b047 100644
--- a/packages/block-library/src/comments-pagination/block.json
+++ b/packages/block-library/src/comments-pagination/block.json
@@ -32,6 +32,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-comments-pagination-editor",
-	"style": "wp-block-comments-pagination"
+	"editorStyle": "wp-block-query-pagination-editor",
+	"style": "wp-block-query-pagination"
 }
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
index 4b218f533ffa3c..17870a95701785 100644
--- a/packages/block-library/src/comments-pagination/edit.js
+++ b/packages/block-library/src/comments-pagination/edit.js
@@ -19,8 +19,8 @@ import { CommentsPaginationArrowControls } from './comments-pagination-arrow-con
 
 // TODO: add pagination-previous blocks once they are implemented.
 const TEMPLATE = [
-	[ 'core/comments-pagination-next' ],
 	[ 'core/comments-pagination-numbers' ],
+	[ 'core/comments-pagination-next' ],
 ];
 
 const getDefaultBlockLayout = ( blockTypeOrName ) => {
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
index d7248d03b7381f..3ea4eab33554fc 100644
--- a/packages/block-library/src/comments-pagination/index.php
+++ b/packages/block-library/src/comments-pagination/index.php
@@ -20,7 +20,7 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(),
+		get_block_wrapper_attributes(array('class' => 'wp-block-query-pagination')),
 		$content
 	);
 }
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
index c6b5d9a0a29e91..eddbb40b4f27d5 100644
--- a/packages/block-library/src/comments-pagination/style.scss
+++ b/packages/block-library/src/comments-pagination/style.scss
@@ -13,7 +13,7 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
-	.wp-block-comments-pagination-previous-arrow {
+	.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 +22,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.
diff --git a/packages/block-library/src/query-pagination-next/edit.js b/packages/block-library/src/query-pagination-next/edit.js
index eb0089ba023f1b..d91f3d7e0ba303 100644
--- a/packages/block-library/src/query-pagination-next/edit.js
+++ b/packages/block-library/src/query-pagination-next/edit.js
@@ -17,29 +17,28 @@ export default function QueryPaginationNextEdit( {
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
-		<div { ...useBlockProps() }>
-			<a
-				href="#pagination-next-pseudo-link"
-				onClick={ ( event ) => event.preventDefault() }
-			>
-				<PlainText
-					__experimentalVersion={ 2 }
-					tagName="span"
-					aria-label={ __( 'Next page link' ) }
-					placeholder={ __( 'Next Page' ) }
-					value={ label }
-					onChange={ ( newLabel ) =>
-						setAttributes( { label: newLabel } )
-					}
-				/>
-				{ displayArrow && (
-					<span
-						className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
-					>
-						{ displayArrow }
-					</span>
-				) }
-			</a>
-		</div>
+		<a
+			href="#pagination-next-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+			{ ...useBlockProps() }
+		>
+			<PlainText
+				__experimentalVersion={ 2 }
+				tagName="span"
+				aria-label={ __( 'Next page link' ) }
+				placeholder={ __( 'Next Page' ) }
+				value={ label }
+				onChange={ ( newLabel ) =>
+					setAttributes( { label: newLabel } )
+				}
+			/>
+			{ displayArrow && (
+				<span
+					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }
+				>
+					{ displayArrow }
+				</span>
+			) }
+		</a>
 	);
 }

From ce731b849abfcf24bab4ebebca9be352594986e2 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Fri, 3 Dec 2021 23:20:04 +0100
Subject: [PATCH 10/14] Refactor code to keep it cleaner

---
 .../src/comments-pagination-next/index.php             |  5 +++--
 packages/block-library/src/comments-pagination/edit.js |  2 +-
 .../block-library/src/comments-pagination/index.php    |  2 +-
 .../blocks/core__comments-pagination-next.html         |  2 +-
 .../blocks/core__comments-pagination-next.json         | 10 +++++++++-
 .../blocks/core__comments-pagination-next.parsed.json  | 10 +++++++++-
 .../core__comments-pagination-next.serialized.html     |  2 +-
 7 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 8b2dc2a03b1c51..4d30b14f5b20f5 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -15,9 +15,9 @@
  * @return string Returns the next comments link for the query pagination.
  */
 function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
-	$comments_per_page = isset( $block->context['queryPerPage'] ) ? $block->context['queryPerPage'] : 4;
+	$comments_per_page = $block->context['queryPerPage'];
 	$comments_number   = (int) get_comments_number();
-	$max_page          = (int) floor( $comments_number / $comments_per_page );
+	$max_page          = isset( $comments_per_page ) ? (int) floor( $comments_number / $comments_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 );
@@ -32,6 +32,7 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 		return '';
 	}
 
+	// TODO - Apply block wrapper attributes to the link instead of on the wrapper.
 	return sprintf(
 		'<div %1s>%2s</div>',
 		$wrapper_attributes,
diff --git a/packages/block-library/src/comments-pagination/edit.js b/packages/block-library/src/comments-pagination/edit.js
index 17870a95701785..302ba2036fffd3 100644
--- a/packages/block-library/src/comments-pagination/edit.js
+++ b/packages/block-library/src/comments-pagination/edit.js
@@ -43,7 +43,7 @@ export default function QueryPaginationEdit( {
 		const innerBlocks = getBlocks( clientId );
 		/**
 		 * Show the `paginationArrow` control only if a
-		 * `CommentsPaginationNext/Previous` block exists.
+		 * Comments Pagination Next block exists.
 		 */
 		return innerBlocks?.find( ( innerBlock ) => {
 			return [ 'core/comments-pagination-next' ].includes(
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
index 3ea4eab33554fc..ef86cbd75a97e0 100644
--- a/packages/block-library/src/comments-pagination/index.php
+++ b/packages/block-library/src/comments-pagination/index.php
@@ -20,7 +20,7 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes(array('class' => 'wp-block-query-pagination')),
+		get_block_wrapper_attributes( array( 'class' => 'wp-block-query-pagination' ) ),
 		$content
 	);
 }
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.html b/test/integration/fixtures/blocks/core__comments-pagination-next.html
index 0f05bcb8647dc5..5daba1fa9ba132 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next /-->
\ No newline at end of file
+<!-- wp:comments-pagination-next {"label":"Next Comments","style":{"typography":{"textTransform":"lowercase"}},"fontSize":"medium"} /-->
\ No newline at end of file
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.json b/test/integration/fixtures/blocks/core__comments-pagination-next.json
index 22de00916342cb..634d741f8bf05c 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.json
@@ -3,7 +3,15 @@
 		"clientId": "_clientId_0",
 		"name": "core/comments-pagination-next",
 		"isValid": true,
-		"attributes": {},
+		"attributes": {
+			"label": "Next Comments",
+			"fontSize": "medium",
+			"style": {
+				"typography": {
+					"textTransform": "lowercase"
+				}
+			}
+		},
 		"innerBlocks": [],
 		"originalContent": ""
 	}
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
index e74ef562deae6b..bcf62991384224 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.parsed.json
@@ -1,7 +1,15 @@
 [
 	{
 		"blockName": "core/comments-pagination-next",
-		"attrs": {},
+		"attrs": {
+			"label": "Next Comments",
+			"style": {
+				"typography": {
+					"textTransform": "lowercase"
+				}
+			},
+			"fontSize": "medium"
+		},
 		"innerBlocks": [],
 		"innerHTML": "",
 		"innerContent": []
diff --git a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
index b65cfc34015b62..e37502cb9c7d82 100644
--- a/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
+++ b/test/integration/fixtures/blocks/core__comments-pagination-next.serialized.html
@@ -1 +1 @@
-<!-- wp:comments-pagination-next /-->
+<!-- wp:comments-pagination-next {"label":"Next Comments","fontSize":"medium","style":{"typography":{"textTransform":"lowercase"}}} /-->

From 3e310f314c0ae2ca9dc0e8b2fb8e8feecbbd5622 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Thu, 9 Dec 2021 18:36:11 +0100
Subject: [PATCH 11/14] Add filter to be able to add attributes without a
 wrapper

---
 .../src/comments-pagination-next/index.php    | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 4d30b14f5b20f5..dd3bc49a03ecfa 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -5,6 +5,20 @@
  * @package WordPress
  */
 
+
+/**
+ * Applies the block attributes to the block markup without using a wrapper.
+ *
+ * @return string Returns the styles and classes defined on the block editor for the block.
+ */
+function add_next_comments_link_attributes() {
+	if ( ! function_exists( 'get_block_wrapper_attributes' ) ) {
+		return;
+	}
+	return get_block_wrapper_attributes();
+}
+add_filter( 'next_comments_link_attributes', 'add_next_comments_link_attributes' );
+
 /**
  * Renders the `core/comments-pagination-next` block on the server.
  *
@@ -26,20 +40,13 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	}
 	$next_comments_link = get_next_comments_link( $label, $max_page );
 
-	$wrapper_attributes = get_block_wrapper_attributes();
-
 	if ( ! isset( $next_comments_link ) ) {
 		return '';
 	}
-
-	// TODO - Apply block wrapper attributes to the link instead of on the wrapper.
-	return sprintf(
-		'<div %1s>%2s</div>',
-		$wrapper_attributes,
-		$next_comments_link
-	);
+	return $next_comments_link;
 }
 
+
 /**
  * Registers the `core/comments-pagination-next` block on the server.
  */

From 5ef85191243f0bf13eaf7775f90b7780aa2b5be9 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Fri, 17 Dec 2021 12:19:51 +0100
Subject: [PATCH 12/14] Fix styles for comment pagination next

---
 .../src/comments-pagination-next/index.php    | 22 ++++++++-----------
 .../src/comments-pagination/block.json        |  4 ++--
 .../src/comments-pagination/index.php         |  2 +-
 .../src/comments-pagination/style.scss        |  1 +
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index dd3bc49a03ecfa..5a61ba94483f1f 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -6,19 +6,6 @@
  */
 
 
-/**
- * Applies the block attributes to the block markup without using a wrapper.
- *
- * @return string Returns the styles and classes defined on the block editor for the block.
- */
-function add_next_comments_link_attributes() {
-	if ( ! function_exists( 'get_block_wrapper_attributes' ) ) {
-		return;
-	}
-	return get_block_wrapper_attributes();
-}
-add_filter( 'next_comments_link_attributes', 'add_next_comments_link_attributes' );
-
 /**
  * Renders the `core/comments-pagination-next` block on the server.
  *
@@ -35,11 +22,20 @@ function render_block_core_comments_pagination_next( $attributes, $content, $blo
 	$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 '';
 	}
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
index 8a2c767fd6b047..323f7c57516cbc 100644
--- a/packages/block-library/src/comments-pagination/block.json
+++ b/packages/block-library/src/comments-pagination/block.json
@@ -32,6 +32,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-query-pagination-editor",
-	"style": "wp-block-query-pagination"
+	"editorStyle": "wp-block-comments-pagination-editor",
+	"style": "wp-block-comments-pagination"
 }
diff --git a/packages/block-library/src/comments-pagination/index.php b/packages/block-library/src/comments-pagination/index.php
index ef86cbd75a97e0..d7248d03b7381f 100644
--- a/packages/block-library/src/comments-pagination/index.php
+++ b/packages/block-library/src/comments-pagination/index.php
@@ -20,7 +20,7 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 
 	return sprintf(
 		'<div %1$s>%2$s</div>',
-		get_block_wrapper_attributes( array( 'class' => 'wp-block-query-pagination' ) ),
+		get_block_wrapper_attributes(),
 		$content
 	);
 }
diff --git a/packages/block-library/src/comments-pagination/style.scss b/packages/block-library/src/comments-pagination/style.scss
index eddbb40b4f27d5..c992c5a2cd7d6a 100644
--- a/packages/block-library/src/comments-pagination/style.scss
+++ b/packages/block-library/src/comments-pagination/style.scss
@@ -13,6 +13,7 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+	// 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.

From 60a2e71694a66e005f6d550a449ba52550b28561 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Fri, 17 Dec 2021 13:28:31 +0100
Subject: [PATCH 13/14] Update to work with comment/perPage

---
 .../src/comments-pagination-next/block.json    |  2 +-
 .../src/comments-pagination-next/index.php     | 18 ++++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index f017a40c92cd42..4354f29cad4219 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -12,7 +12,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "postId", "queryPerPage", "paginationArrow" ],
+	"usesContext": [ "postId", "comments/perPage", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,
diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index 5a61ba94483f1f..b09df7a7ce4a66 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -16,12 +16,18 @@
  * @return string Returns the next comments link for the query pagination.
  */
 function render_block_core_comments_pagination_next( $attributes, $content, $block ) {
-	$comments_per_page = $block->context['queryPerPage'];
-	$comments_number   = (int) get_comments_number();
-	$max_page          = isset( $comments_per_page ) ? (int) floor( $comments_number / $comments_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 );
+	$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();

From db2e960ac90670dd46d61d307454bdebf37b6ca0 Mon Sep 17 00:00:00 2001
From: Carlos Bravo <hola@carlosbravo.me>
Date: Fri, 17 Dec 2021 16:04:27 +0100
Subject: [PATCH 14/14] Fix small blank space

---
 packages/block-library/src/comments-pagination-next/index.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/comments-pagination-next/index.php b/packages/block-library/src/comments-pagination-next/index.php
index b09df7a7ce4a66..95bd6181c89c78 100644
--- a/packages/block-library/src/comments-pagination-next/index.php
+++ b/packages/block-library/src/comments-pagination-next/index.php
@@ -5,7 +5,6 @@
  * @package WordPress
  */
 
-
 /**
  * Renders the `core/comments-pagination-next` block on the server.
  *