Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: coderGtm <gautam23@git.wordpress.org>
Co-authored-by: yyppsk <pranjalpratapsingh@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: n2erjo00 <n2erjo00@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: gigitux <gigitux@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Hi @t-hamano

Based on our discussion in #69580, I decided to work on this issue, but as explained, took a different approach to avoid any possible gotchas. What do you think about it?

Hey @coderGtm,

I have tested this PR. It correctly resolves the issue with pagination layout when using the "space between" setting. The pagination block now maintains a consistent layout across all pages, ensuring the page numbers remain centered even on the first and last pages.

Environment: WordPress Block Editor (Gutenberg)
Machine: macOS Air (M3)
Browsers Tested: Chrome, Safari, Firefox

Scope of Change

• Fixes the misalignment of pagination elements on first and last pages when "space between" justification is used.
• Prevents page numbers from shifting to the left or right edge when the previous or next navigation control is missing.
• Uses a CSS-only solution that conditionally applies inline margins to maintain alignment, avoiding potential future styling issues.

Steps to Reproduce

1. Navigate to Pages > Add New.
2. Insert a Query Loop block and configure it to display a list of posts.
3. Confirm that the Pagination block is present within the loop.
4. Set the Pagination block's justification to Space between items.
5. Ensure there are enough posts to span multiple pages (more than the "Posts per Page" value).
6. Navigate through the pagination to the first and last pages of the loop.

Expected Results

• On middle pages, the pagination should display:
  • Navigation controls on both sides (Previous and Next).
  • Page numbers centered between them.
• On the first page:
  • "Previous" control is absent.
  • Page numbers remain centered; do not shift left.
• On the last page:
  • "Next" control is absent.
  • Page numbers remain centered; do not shift right.

Actual Results

• The pagination layout behaves consistently across all pages.
• Page numbers stay centered whether one or both navigation controls are present.
• The CSS-only solution performs reliably without layout or spacing issues.
• Verified across Chrome, Safari, and Firefox with consistent rendering.

Before and After Summary

Comparison

Before Fix

Layout keeps shifting for the numbering for first and last page.

After Fix

Layout is consistent for the numbering for first and last page.