Merge pull request #3865 from Automattic/archive-pagination

Quadrat: added pagination to the query block

quadrat/assets/theme.css

@@ -259,6 +259,62 @@ 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;
+	display: grid;
+	grid-template-areas: "prev numbers next";
+	grid-template-columns: 1fr 2fr 1fr;
+}
+
+@media (max-width: 479px) {
+	.wp-block-query-pagination {
+		grid-template-areas: "prev next";
+		grid-template-columns: 1fr 1fr;
+	}
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-previous {
+	grid-area: prev;
+	justify-self: start;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-previous::before {
+	content: "←";
+	margin-right: 0.5em;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-next {
+	grid-area: next;
+	justify-self: end;
+}
+
+.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;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-numbers {
+	grid-area: numbers;
+	justify-self: center;
+}
+
+@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

@@ -12,6 +12,15 @@
 	<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->
 <!-- /wp:query-loop -->
+
+<!-- wp:query-pagination {"align":"wide"} -->
+<div class="wp-block-query-pagination alignwide"><!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+
+	<!-- wp:query-pagination-numbers /-->
+	
+	<!-- wp:query-pagination-next {"label":"Next Page"} /--></div>
+<!-- /wp:query-pagination -->
+
 <!-- /wp:query -->
 
 </div>

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,46 @@
+.wp-block-query-pagination {
+	border-top: 1px solid var(--wp--custom--color--primary);
+	padding-top: 1.5em;
+	justify-content: space-between;
+	display: grid;
+	grid-template-areas: "prev numbers next";
+	grid-template-columns: 1fr 2fr 1fr;
+	@include break-mobile-only(){
+		grid-template-areas: "prev next";
+		grid-template-columns: 1fr 1fr;
+	}
+
+	.wp-block-query-pagination-previous {
+		grid-area: prev;
+		justify-self: start;
+		&::before{
+			content:"←";
+			margin-right: 0.5em;
+		}
+	}
+	.wp-block-query-pagination-next {
+		grid-area: next;
+		justify-self: end;
+		&::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{
+		grid-area: numbers;
+		justify-self: center;
+		@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";