[MOOSE-348]- FE - Pagination breaking on mobile

CHANGELOG.md

@@ -6,11 +6,12 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2026.04]
 - Updated: all plugins, composer & npm packages to latest; pin React to v18 as an override to resolve conflicts between ` @dnd-kit/core` and `@wordpress/icons`; pin several other packages to newer versions to resolve security warnings.
+- Updated: Archive, index, and search templates now use dedicated mobile and desktop pagination variants for improved responsive layouts. [MOOSE-348](https://moderntribe.atlassian.net/browse/MOOSE-348)
 
 ## [2026.03]
 
-- Updated: Asset enqueuing for core blocks should now allow block scripts & styles to properly render across the FE & editor. 
-- Updated: Refactor Horizontal Tabs block into a dynamic block. Add reordering functionality. 
+- Updated: Asset enqueuing for core blocks should now allow block scripts & styles to properly render across the FE & editor.
+- Updated: Refactor Horizontal Tabs block into a dynamic block. Add reordering functionality.
 - Updated: Refactor Vertical Tabs block to dynamic block; allow sorting.
 - Updated: All blocks that use the `ServerSideRender` package now properly pull from the named import instead of the default import (deprecated).
 - Updated: Image / Image Overlay blocks now use a shared `MediaImageControl` component instead of adding the media control separately.
@@ -37,7 +38,7 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2026.01]
 
-- Updated: Interactive card blocks now use the animated underline on the title element on hover. 
+- Updated: Interactive card blocks now use the animated underline on the title element on hover.
 - Fixed: Vertical Tabs block now scrolls the selected tab into view on mobile, respecting reduced motion preferences. [MOOSE-333](https://moderntribe.atlassian.net/browse/MOOSE-333)
 - Fixed: Removed top margin from spacer block
 - Added: Yoast Duplicate Post plugin v4.5 for easier content duplication in the editor.
@@ -103,10 +104,10 @@ item (Added, Changed, Depreciated, Removed, Fixed, Security).
 
 ## [2025.01]
 - Chore: WordPress plugin updates, Composer & NPM package updates.
-- Updated: Inline link styling should now apply to all links inside the post content block that do not have a 
+- Updated: Inline link styling should now apply to all links inside the post content block that do not have a
   class assigned to them. This should exclude things like buttons & navigation.
 - Added: `Admin_Menu_Order` class to handle reordering the WP Admin menu items that Moose loads with by default.
-  This also includes Yoast SEO & RankMath, just in case either are used by default. 
+  This also includes Yoast SEO & RankMath, just in case either are used by default.
 - Added: Node service to Lando so FE assets can be built automatically on start up.
 - Updated: project start up scripts to automatically generate the correct contents of the lcoal config files.
 - Updated: script to install WordPress so we can use a version constant and not install WP every time composer is

wp-content/themes/core/blocks/core/querypagination/style.pcss

@@ -21,6 +21,22 @@
 			color: var(--pagination-link-hover-color);
 		}
 	}
+
+	/* Handles mobile and desktop pagination variants using dedicated modifier classes */
+	&.b-pagination-desktop {
+		display: none;
+	}
+
+	@media (--mq-tablet) {
+
+		&.b-pagination-mobile {
+			display: none;
+		}
+
+		&.b-pagination-desktop {
+			display: flex;
+		}
+	}
 }
 
 /* -----------------------------------------------------------------------
@@ -33,6 +49,11 @@
 	gap: 0 var(--spacer-20);
 	margin: 0;
 
+	/* Reduce the space between numbers on tiny screens */
+	@media (max-width: 376px) {
+		gap: 0 var(--spacer-10);
+	}
+
 	.page-numbers {
 		line-height: 1;
 		display: flex;
@@ -49,7 +70,9 @@
 
 		/* Current page indicator */
 		&.current {
-			background-color: var(--pagination-numbers-current-background-color);
+			background-color: var(
+				--pagination-numbers-current-background-color
+			);
 			color: var(--pagination-numbers-current-color);
 		}
 	}

wp-content/themes/core/templates/archive.html

@@ -1,17 +1,26 @@
 <!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
-<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"},"hasTransparentBackground":false} -->
 <main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:query-title {"type":"archive","textAlign":"center","showPrefix":false,"align":"wide","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} /-->
 
-<!-- wp:query {"queryId":0,"query":{"perPage":18,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"align":"wide"} -->
+<!-- wp:query {"queryId":0,"query":{"perPage":18,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"align":"wide","className":"alignwide"} -->
 <div class="wp-block-query alignwide"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
-	<!-- wp:tribe/post-card {"headingLevel":"h2"} /-->
+<!-- wp:tribe/post-card {"headingLevel":"h2"} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Mobile"},"className":"b-pagination-mobile","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
+<!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+
+<!-- wp:query-pagination-numbers {"midSize":0} /-->
+
+<!-- wp:query-pagination-next {"label":"Next Page"} /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Desktop"},"className":"b-pagination-desktop","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
 <!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
 
 <!-- wp:query-pagination-numbers /-->
@@ -20,4 +29,5 @@
 <!-- /wp:query-pagination --></div>
 <!-- /wp:query --></main>
 <!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

wp-content/themes/core/templates/index.html

@@ -1,19 +1,28 @@
 <!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
+
 <!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} -->
-<main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
-<h1 class="wp-block-heading alignwide has-text-align-center" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">Posts Title - Editable in FSE</h1>
+<main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center","level":1,"align":"wide","className":"alignwide","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}}}} -->
+<h1 class="wp-block-heading has-text-align-center alignwide" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50)">Posts Title - Editable in FSE</h1>
 <!-- /wp:heading -->
 
-<!-- wp:query {"queryId":0,"query":{"perPage":18,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"align":"wide"} -->
+<!-- wp:query {"queryId":0,"query":{"perPage":18,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"align":"wide","className":"alignwide"} -->
 <div class="wp-block-query alignwide"><!-- wp:post-template {"layout":{"type":"grid","columnCount":3}} -->
-	<!-- wp:tribe/post-card {"headingLevel":"h2"} /-->
+<!-- wp:tribe/post-card {"headingLevel":"h2"} /-->
 <!-- /wp:post-template -->
 
 <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
 <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
 <!-- /wp:spacer -->
 
-<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"center"}} -->
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Mobile"},"className":"b-pagination-mobile","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
+<!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+
+<!-- wp:query-pagination-numbers {"midSize":0} /-->
+
+<!-- wp:query-pagination-next {"label":"Next Page"} /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Desktop"},"className":"b-pagination-desktop","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
 <!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
 
 <!-- wp:query-pagination-numbers /-->
@@ -22,4 +31,5 @@ <h1 class="wp-block-heading alignwide has-text-align-center" style="margin-top:0
 <!-- /wp:query-pagination --></div>
 <!-- /wp:query --></main>
 <!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->

wp-content/themes/core/templates/search.html

@@ -1,37 +1,47 @@
 <!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header"} /-->
+
 <!-- wp:group {"tagName":"main","metadata":{"name":"Search Results"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
 <main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:group {"metadata":{"name":"Search Results - Header"},"style":{"spacing":{"margin":{"bottom":"0"}}},"layout":{"type":"constrained"}} -->
-	<div class="wp-block-group" style="margin-bottom:0"><!-- wp:heading {"textAlign":"center","level":1,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
-		<h1 class="wp-block-heading has-text-align-center is-style-default" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)">Search</h1>
-		<!-- /wp:heading -->
-
-		<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} /--></div>
-	<!-- /wp:group -->
-
-	<!-- wp:group {"metadata":{"name":"Search Results - Results"},"align":"wide","className":"alignwide","style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
-	<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"align":"wide","metadata":{"bindings":{"content":{"source":"tribe/query-results-count"}}},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
-		<p class="has-text-align-wide" style="margin-bottom:var(--wp--preset--spacing--40)"></p>
-		<!-- /wp:paragraph -->
-
-		<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[],"format":[]},"align":"wide","className":"alignwide s-remove-margin\u002d\u002dtop"} -->
-		<div class="wp-block-query alignwide s-remove-margin--top"><!-- wp:post-template {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default","columnCount":3}} -->
-			<!-- wp:tribe/search-card /-->
-			<!-- /wp:post-template -->
-
-			<!-- wp:query-no-results -->
-			<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0"}}}} -->
-			<p class="has-text-align-center" style="margin-top:0">Your search returned no results. Please try another search term.</p>
-			<!-- /wp:paragraph -->
-			<!-- /wp:query-no-results -->
-
-			<!-- wp:query-pagination {"paginationArrow":"chevron","layout":{"type":"flex","justifyContent":"center"}} -->
-			<!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
-
-			<!-- wp:query-pagination-numbers /-->
-
-			<!-- wp:query-pagination-next {"label":"Next Page"} /-->
-			<!-- /wp:query-pagination --></div>
-		<!-- /wp:query --></div>
-	<!-- /wp:group --></main>
+<div class="wp-block-group" style="margin-bottom:0"><!-- wp:heading {"textAlign":"center","level":1,"className":"is-style-default","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|30"}}}} -->
+<h1 class="wp-block-heading has-text-align-center is-style-default" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--30)">Search</h1>
+<!-- /wp:heading -->
+
+<!-- wp:search {"label":"Search","showLabel":false,"buttonText":"Search","buttonPosition":"button-inside","buttonUseIcon":true,"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"}}}} /--></div>
 <!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"Search Results - Results"},"align":"wide","className":"alignwide","style":{"spacing":{"margin":{"top":"var:preset|spacing|50"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"align":"wide","metadata":{"bindings":{"content":{"source":"tribe/query-results-count"}}},"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
+<p class="has-text-align-wide" style="margin-bottom:var(--wp--preset--spacing--40)"></p>
+<!-- /wp:paragraph -->
+
+<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"parents":[],"format":[]},"align":"wide","className":"alignwide s-remove-margin\u002d\u002dtop"} -->
+<div class="wp-block-query alignwide s-remove-margin--top"><!-- wp:post-template {"style":{"spacing":{"blockGap":"0"}},"layout":{"type":"default","columnCount":3}} -->
+<!-- wp:tribe/search-card /-->
+<!-- /wp:post-template -->
+
+<!-- wp:query-no-results -->
+<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"0"}}}} -->
+<p class="has-text-align-center" style="margin-top:0">Your search returned no results. Please try another search term.</p>
+<!-- /wp:paragraph -->
+<!-- /wp:query-no-results -->
+
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Mobile"},"className":"b-pagination-mobile","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
+<!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+
+<!-- wp:query-pagination-numbers {"midSize":0} /-->
+
+<!-- wp:query-pagination-next {"label":"Next Page"} /-->
+<!-- /wp:query-pagination -->
+
+<!-- wp:query-pagination {"paginationArrow":"chevron","metadata":{"name":"Pagination - Desktop"},"className":"b-pagination-desktop","layout":{"type":"flex","justifyContent":"center","flexWrap":"wrap"}} -->
+<!-- wp:query-pagination-previous {"label":"Previous Page"} /-->
+
+<!-- wp:query-pagination-numbers /-->
+
+<!-- wp:query-pagination-next {"label":"Next Page"} /-->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:query --></div>
+<!-- /wp:group --></main>
+<!-- /wp:group -->
+
 <!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer"} /-->