styles for pagination

quadrat/assets/theme.css

@@ -259,6 +259,37 @@ ul ul {
 	font-size: var(--wp--custom--heading--h3--font-size);
 }
 
+.wp-block-query-pagination {
+	border-top: 1px solid var(--wp--custom--color--primary);
+	padding-top: 1.5em;
+	justify-content: space-between;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-previous::before {
+	content: "←";
+	margin-right: 0.5em;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-next::after {
+	content: "→";
+	margin-left: 0.5em;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-previous::before,
+.wp-block-query-pagination .wp-block-query-pagination-next::after {
+	display: inline-block;
+}
+
+.wp-block-query-pagination .page-numbers {
+	padding: 0 0.1em;
+}
+
+@media (max-width: 479px) {
+	.wp-block-query-pagination .wp-block-query-pagination-numbers {
+		display: none;
+	}
+}
+
 .wp-block-quote.is-style-large p {
 	line-height: 1.4;
 }

quadrat/block-template-parts/query.html

@@ -13,16 +13,13 @@
 	<!-- /wp:spacer -->
 <!-- /wp:query-loop -->
 
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-	<!-- wp:query-pagination -->
-	<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->
-
-		<!-- wp:query-pagination-numbers /-->
+<!-- wp:query-pagination {"align":"wide"} -->
+<div class="wp-block-query-pagination alignwide"><!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
 
-		<!-- wp:query-pagination-next /--></div>
-	<!-- /wp:query-pagination --></div>
-</div><!-- /wp:group -->
+	<!-- wp:query-pagination-numbers /-->
+	
+	<!-- wp:query-pagination-next {"label":"Next Page"} /--></div>
+<!-- /wp:query-pagination -->
 
 <!-- /wp:query -->
 

quadrat/child-experimental-theme.json

@@ -271,6 +271,12 @@
 					"width": "1px 0 0 0"
 				}
 			},
+			"core/query-pagination": {
+				"typography": {
+					"fontSize": "18px",
+					"fontWeight": "500"
+				}
+			},
 			"core/site-title": {
 				"color": {
 					"link": "var(--wp--custom--color--primary)"

quadrat/experimental-theme.json

@@ -479,6 +479,12 @@
 				"padding": {
 					"left": "calc( 2 * var(--wp--custom--margin--horizontal) )"
 				}
+			},
+			"core/query-pagination": {
+				"typography": {
+					"fontSize": "18px",
+					"fontWeight": "500"
+				}
 			}
 		},
 		"color": {

quadrat/sass/blocks/_query-navigation.scss

@@ -0,0 +1,29 @@
+.wp-block-query-pagination {
+	border-top: 1px solid var(--wp--custom--color--primary);
+	padding-top: 1.5em;
+	justify-content: space-between;
+
+	.wp-block-query-pagination-previous::before{
+		content:"←";
+		margin-right: 0.5em;
+	}
+	.wp-block-query-pagination-next::after{
+		content:"→";
+		margin-left: 0.5em;
+	}
+
+	.wp-block-query-pagination-previous::before,
+	.wp-block-query-pagination-next::after {
+		display: inline-block;
+	}
+
+	.page-numbers {
+		padding: 0 0.1em;
+	}
+
+	.wp-block-query-pagination-numbers{
+		@include break-mobile-only(){
+			display: none;
+		}
+	}
+}

quadrat/sass/theme.scss

@@ -11,6 +11,7 @@
 @import "blocks/post-comments";
 @import "blocks/post-navigation-link";
 @import "blocks/query";
+@import "blocks/query-navigation";
 @import "blocks/quote";
 @import "blocks/search";
 @import "blocks/table";