Blockbase: add query pagination (#3971)

* Refactor some query pagination styles to blockbase.

* Justify the previous / next links.

blockbase/assets/ponyfill.css

@@ -635,6 +635,46 @@ p.has-drop-cap:not(:focus):first-letter {
 	color: var(--wp--custom--color--background);
 }
 
+.wp-block-query-pagination {
+	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 {
+	justify-self: start;
+	grid-area: prev;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-next {
+	justify-self: end;
+	grid-area: next;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-numbers {
+	grid-area: numbers;
+	justify-self: center;
+}
+
+.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
+	text-decoration: underline;
+}
+
+@media (max-width: 479px) {
+	.wp-block-query-pagination .wp-block-query-pagination-numbers {
+		display: none;
+	}
+}
+
 .wp-block-quote.is-style-large p,
 .wp-block-quote p {
 	font-style: unset;

blockbase/block-templates/index.html

@@ -14,6 +14,17 @@
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
 
 <!-- /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 {"label":"Previous Page"} /-->
+
+		<!-- wp:query-pagination-numbers /-->
+
+		<!-- wp:query-pagination-next {"label":"Next Page"} /--></div>
+	<!-- /wp:query-pagination -->
+	</div>
+	<!-- /wp:group -->
 </div>
 <!-- /wp:query -->
 

quadrat/sass/blocks/_query-navigation.scss → blockbase/sass/blocks/_query-pagination.scss

@@ -1,41 +1,25 @@
 .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;
-		}
+		grid-area: prev;
 	}
+
 	.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;
+		grid-area: next;
 	}
-
+	
 	.wp-block-query-pagination-numbers{
 		grid-area: numbers;
 		justify-self: center;

blockbase/sass/ponyfill.scss

@@ -19,6 +19,7 @@
 @import "blocks/post-author";
 @import "blocks/post-comments";
 @import "blocks/pullquote";
+@import "blocks/query-pagination";
 @import "blocks/quote";
 @import "blocks/search";
 @import "blocks/separator";

quadrat/assets/theme.css

@@ -528,22 +528,9 @@ ul ul {
 
 .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;
 }
 
@@ -553,7 +540,6 @@ ul ul {
 }
 
 .wp-block-query-pagination .wp-block-query-pagination-next {
-	grid-area: next;
 	justify-self: end;
 }
 
@@ -571,21 +557,6 @@ ul ul {
 	padding: 0 0.1em;
 }
 
-.wp-block-query-pagination .wp-block-query-pagination-numbers {
-	grid-area: numbers;
-	justify-self: center;
-}
-
-.wp-block-query-pagination .wp-block-query-pagination-numbers .current {
-	text-decoration: underline;
-}
-
-@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/sass/blocks/_query-pagination.scss

@@ -0,0 +1,25 @@
+.wp-block-query-pagination {
+	border-top: 1px solid var(--wp--custom--color--primary);
+
+	.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;
+	}
+}

quadrat/sass/theme.scss

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