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

[spadilha]

What does this do/fix?

This pull request improves the pagination experience for both mobile and desktop users and standardizes template part references across the archive, index, and search templates. The main changes are the introduction of separate pagination components for mobile and desktop, enhancements to pagination styling for responsiveness, and updates to template metadata and structure for consistency.

Pagination improvements:

• Added separate mobile (b-pagination-mobile) and desktop (b-pagination-desktop) pagination blocks in archive.html, index.html, and search.html, ensuring optimized layouts for different devices. Only one variant is shown at a time using CSS media queries. [1] [2] [3]
• Updated style.pcss to hide or show the appropriate pagination variant based on screen size and to simplify mobile pagination by displaying only the first, last, current, and ellipsis page numbers. Also reduced spacing between pagination numbers on very small screens. [1] [2] [3]

QA

Links to relevant issues

• Link to Issue

Screenshots/video:

• Link to Video

Pull request checklist

• I've added a changelog entry for these changes.
• I've linked to a relevant Jira issue.
• I've captured a screenshot or screencast of the changes and linked it above.

[Copilot]

Pull request overview

This PR targets improved pagination behavior on mobile by introducing separate mobile/desktop pagination variants in key block templates (archive, index, search) and updating the core query pagination block styles to responsively simplify/hide elements.

Changes:

• Added separate mobile (b-pagination-mobile) and desktop (b-pagination-desktop) pagination blocks in archive.html, index.html, and search.html.
• Updated query pagination block styles to toggle mobile/desktop variants by breakpoint and simplify page-number display on small screens.
• Updated template-part references (header/footer) and added a changelog entry for the pagination work.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
wp-content/themes/core/templates/search.html	Adds mobile/desktop pagination variants; updates template-part refs; adjusts query settings.
wp-content/themes/core/templates/index.html	Adds mobile/desktop pagination variants and template-part theme pinning.
wp-content/themes/core/templates/archive.html	Adds mobile/desktop pagination variants and template-part theme pinning; adds group attribute.
wp-content/themes/core/blocks/core/querypagination/style.pcss	Adds responsive rules for variant visibility and simplified mobile number display.
CHANGELOG.md	Adds 2026.04 entry and normalizes bullet indentation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[GeoffDusome]

@spadilha FYI - I checked with Sarah on direction for this ticket. What's in the ticket and what's in this PR are two different things and I just want to make sure we're aligned on scope with what DE would expect. On MV I understand you landed where you were probably due to time and pressure of it being a UAT phase, but we're not there for core MP, so I want to get this right.

I would prefer the approach in the ticket, as it's easier to implement across the different pagination components we might use in a project (core, FacetWP, etc.) and it's quite a bit more clean than having to remember to add two different pagination blocks to every Query block.

I took a peek at your original implementation on Mediavine and I much prefer this approach with a few changes:

• I don't think you need to have it conditional on having both the prev & next buttons visible, as CSS grid should handle placing the buttons in the correct spot. Regardless of if one or the other doesn't exist.
• I think you can display the prev/next buttons opposite to how they are now (prev displays far left, next displays far right). It might even be nice to re-show the text until the screen gets super small?
• I think it's entirely possible to hide the additional "inside" page numbers using CSS. Something like .page-numbers:not(.current,:first-child,:last-child,.dots) { display: none; } should get you there. This would prevent the need for two different blocks & the need to have the page numbers drop to two lines.

Please let me know if you'd like to chat about this, happy to go over my thoughts & what Sarah / DE would like to see.

Additionally, let me know if you don't have the time to do this and I can poke at it. 🙂

cc @dpellenwood

[spadilha]

@GeoffDusome makes sense, thanks for checking with Sarah.

Sorry for the confusion here. I copied the description from the Mediavine ticket, but the scope changed while I was building it. It wasn’t a time constraint, Alex wasn’t happy with the wrapping and asked for a better visual solution. She mocked it up in Figma and, unfortunately, the only way to achieve that was using two navigation blocks.

That said, I’m totally good switching back to the ticket approach and applying your suggestions if that’s the direction DE wants for ModernPress. I’ll work on it next week. Thanks!

[GeoffDusome]

She mocked it up in Figma and, unfortunately, the only way to achieve that was using two navigation blocks.

@spadilha Can you explain why this was the only solution? Did you try to implement my suggestions while you were coding and it didn't end up working?

At the end of the day, I want to avoid having to use two separate blocks. If we can do this, I'd be happy with whatever approach we end up having to take.

Let me know if you need design help or a mockup and I can get you that.

[spadilha]

@GeoffDusome I remember trying the same CSS approach you suggested, but it didn’t work because it removes the intermediate pages without adding the ellipsis between the first and current page.

See the screenshot below:

• Top: block set to 0 links before/after → shows ellipsis and keeps first/last pages
• Bottom: block set to 2 links before/after, then hidden with CSS → hides page 2, but no ellipsis is added between 1 and 3

Because of that, CSS alone couldn’t match the design. To achieve the intended mobile behavior while keeping a fuller pagination on desktop, I had to use a different block configuration for mobile, which led to duplicating the pagination block.

I’m happy to revisit this if there’s another way to approach it. If DE is okay with the arrows wrapping onto another line, above or below the numbers, I think we can achieve that with a single block.

[GeoffDusome]

If DE is okay with the arrows wrapping onto another line, above or below the numbers, I think we can achieve that with a single block.

@spadilha Let's do the following:

1. Leave the numbers set how they are in base ModernPress, which I think is the default of 2 numbers per side?
2. Move the arrows below the numbers. At the breakpoint at which we move the arrows below, let's re-show the labels on the arrows so they fill that space below a little better. If we need to, let's remove those labels again once the screen starts getting smaller.
3. If we absolutely need to at really small screens (< 460px ish), we can reduce the size of the numbers or the spacing between them just a bit to get all the way down to 360px, which would be our minimum width.