Comments Pagination: Add border and spacing support

docs/reference-guides/core-blocks.md

@@ -197,7 +197,7 @@ Displays a paginated navigation to next/previous set of comments, when applicabl
 -	**Category:** theme
 -	**Parent:** core/comments
 -	**Allowed Blocks:** core/comments-pagination-previous, core/comments-pagination-numbers, core/comments-pagination-next
--	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** paginationArrow
 
 ## Comments Next Page

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

@@ -4,7 +4,9 @@
 	"name": "core/comments-pagination",
 	"title": "Comments Pagination",
 	"category": "theme",
-	"parent": [ "core/comments" ],
+	"parent": [
+		"core/comments"
+	],
 	"allowedBlocks": [
 		"core/comments-pagination-previous",
 		"core/comments-pagination-numbers",
@@ -54,10 +56,24 @@
 				"fontSize": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-comments-pagination-editor",
 	"style": "wp-block-comments-pagination"
-}
+}

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

@@ -1,5 +1,7 @@
 $pagination-margin: 0.5em;
 .wp-block-comments-pagination {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	// Increased specificity to override blocks default margin.
 	> .wp-block-comments-pagination-next,
 	> .wp-block-comments-pagination-previous,
@@ -18,18 +20,18 @@ $pagination-margin: 0.5em;
 		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) {
+		&:not( .is-arrow-chevron ) {
 			// Flip for RTL.
-			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left 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) {
+		&:not( .is-arrow-chevron ) {
 			// Flip for RTL.
-			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+			transform: scaleX( 1 ) #{'/*rtl:scaleX(-1);*/'}; // This points the arrow right for LTR and left for RTL.
 		}
 	}