feat: update the query pagination block (#93)

src/scss/_sass-utils.scss

@@ -40,3 +40,7 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
 		}
 	}
 }
+
+@mixin all-transition($transition: 125ms) {
+	transition: all $transition ease-in-out;
+}

src/scss/blocks/_blocks.scss

@@ -8,5 +8,6 @@
 @import url('./_post-carousel.scss');
 @import url('./_post-terms.scss');
 @import url('./_pullquote.scss');
+@import url('./_query-pagination.scss');
 @import url('./_quote.scss');
 @import url('./_search.scss');

src/scss/blocks/_query-pagination.scss

@@ -0,0 +1,53 @@
+@use '../sass-utils';
+
+.wp-block-query-pagination {
+	a,
+	.current,
+	.wp-block-query-pagination-numbers,
+	.wp-block-comments-pagination-numbers {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+
+	.wp-block-query-pagination-numbers,
+	.wp-block-comments-pagination-numbers {
+		gap: calc(var(--wp--preset--spacing--20) / 4);
+
+		a,
+		.current {
+			height: 2.5rem;
+			padding: 0;
+			width: 2.5rem;
+
+			@include sass-utils.all-transition;
+		}
+	}
+
+	// Justification = Space Between
+	&.is-content-justification-space-between {
+		@include sass-utils.media(small) {
+			display: grid;
+			grid-template-columns: repeat(12, 1fr);
+		}
+
+		> * {
+			grid-column-end: span 4;
+			margin: 0;
+		}
+
+		> .wp-block-query-pagination-numbers:first-child {
+			grid-column-end: span 8;
+
+			@include sass-utils.media(small) {
+				&::before {
+					content: '';
+					display: inline-block;
+					height: 100%;
+					margin-right: var(--wp--preset--spacing--30);
+					width: calc(50% - (var(--wp--preset--spacing--30) / 2));
+				}
+			}
+		}
+	}
+}

theme.json

@@ -45,14 +45,7 @@
 			"wideSize": "1296px"
 		},
 		"spacing": {
-			"units": [
-				"%",
-				"px",
-				"em",
-				"rem",
-				"vh",
-				"vw"
-			],
+			"customSpacingSize": false,
 			"spacingSizes": [
 				{
 					"name": "1",
@@ -127,25 +120,25 @@
 				},
 				{
 					"fluid": false,
-					"name": "Extra Large",
+					"name": "X-Large",
 					"size": "clamp( 1.375rem, 0.394rem + 2.008vw, 2rem )",
 					"slug": "x-large"
 				},
 				{
 					"fluid": false,
-					"name": "Extra Extra Large",
+					"name": "2X-Large",
 					"size": "clamp( 1.625rem, 0.055rem + 3.213vw, 2.625rem )",
 					"slug": "xx-large"
 				},
 				{
 					"fluid": false,
-					"name": "3 Extra Large",
+					"name": "3X-Large",
 					"size": "clamp( 1.75rem, -0.213rem + 4.016vw, 3rem )",
 					"slug": "xxx-large"
 				},
 				{
 					"fluid": false,
-					"name": "4 Extra Large",
+					"name": "4X-Large",
 					"size": "clamp( 2rem, -1.141rem + 6.426vw, 4rem )",
 					"slug": "xxxx-large"
 				}
@@ -503,11 +496,29 @@
 						}
 					}
 				},
+				"spacing": {
+					"blockGap": "var( --wp--preset--spacing--30 )"
+				},
 				"typography": {
 					"fontSize": "var( --wp--preset--font-size--small )",
+					"fontWeight": "500",
 					"lineHeight": "var( --wp--custom--line-height--small )"
 				}
 			},
+			"core/query-pagination-numbers": {
+				"elements": {
+					"link": {
+						":hover": {
+							"color": {
+								"background": "var( --wp--preset--color--quinary )"
+							},
+							"typography": {
+								"textDecoration": "none !important"
+							}
+						}
+					}
+				}
+			},
 			"core/quote": {
 				"border": {
 					"color": "var( --wp--preset--color--primary )",