From 03e7fb64ccdab7ab7934a6f61ec4136618c71d9b Mon Sep 17 00:00:00 2001
From: Thomas Guillot <thomasguillot@users.noreply.github.com>
Date: Sat, 25 Nov 2023 10:32:27 +0000
Subject: [PATCH] feat: update the query pagination block (#93)

---
 src/scss/_sass-utils.scss              |  4 ++
 src/scss/blocks/_blocks.scss           |  1 +
 src/scss/blocks/_query-pagination.scss | 53 ++++++++++++++++++++++++++
 theme.json                             | 35 +++++++++++------
 4 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 src/scss/blocks/_query-pagination.scss

diff --git a/src/scss/_sass-utils.scss b/src/scss/_sass-utils.scss
index c3eeb705..9f0ea20b 100644
--- a/src/scss/_sass-utils.scss
+++ b/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;
+}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
index 87e087ef..edddf79a 100644
--- a/src/scss/blocks/_blocks.scss
+++ b/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');
diff --git a/src/scss/blocks/_query-pagination.scss b/src/scss/blocks/_query-pagination.scss
new file mode 100644
index 00000000..084addf1
--- /dev/null
+++ b/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));
+				}
+			}
+		}
+	}
+}
diff --git a/theme.json b/theme.json
index 4dd781fd..da91aba2 100644
--- a/theme.json
+++ b/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 )",