Comment pagination blocks: Add spacing support

docs/reference-guides/core-blocks.md

@@ -191,7 +191,7 @@ Displays a paginated navigation to next/previous set of comments, when applicabl
 -	**Name:** core/comments-pagination
 -	**Category:** theme
 -	**Parent:** core/comments
--	**Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** paginationArrow
 
 ## Comments Next Page
@@ -201,7 +201,7 @@ Displays the next comment's page link. ([Source](https://github.com/WordPress/gu
 -	**Name:** core/comments-pagination-next
 -	**Category:** theme
 -	**Parent:** core/comments-pagination
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Comments Page Numbers
@@ -211,7 +211,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
 -	**Name:** core/comments-pagination-numbers
 -	**Category:** theme
 -	**Parent:** core/comments-pagination
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** 
 
 ## Comments Previous Page
@@ -221,7 +221,7 @@ Displays the previous comment's page link. ([Source](https://github.com/WordPres
 -	**Name:** core/comments-pagination-previous
 -	**Category:** theme
 -	**Parent:** core/comments-pagination
--	**Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+-	**Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** label
 
 ## Comments Title

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

@@ -23,6 +23,18 @@
 				"background": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": {
+					"right": "0.5em",
+					"bottom": "0.5em"
+				}
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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

@@ -11,6 +11,18 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": {
+					"right": "0.5em",
+					"bottom": "0.5em"
+				}
+			}
+		},
 		"color": {
 			"gradients": true,
 			"text": false,

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

@@ -23,6 +23,18 @@
 				"background": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": {
+					"right": "0.5em",
+					"bottom": "0.5em"
+				}
+			}
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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

@@ -36,6 +36,10 @@
 				"type": "flex"
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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

@@ -1,5 +1,3 @@
-$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;
@@ -8,27 +6,5 @@ $pagination-margin: 0.5em;
 .editor-styles-wrapper {
 	.wp-block-comments-pagination {
 		max-width: 100%;
-		&.block-editor-block-list__layout {
-			margin: 0;
-		}
-	}
-}
-
-.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/style.scss

@@ -4,10 +4,6 @@ $pagination-margin: 0.5em;
 	> .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;