Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Block Library: Add div wrapper to query pagination previous/next links #69575

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Block Library: Add div wrapper to query pagination previous/next links #69575

wants to merge 1 commit into from
+74 −54

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented Mar 14, 2025 •
edited
Loading

What?

Closes #69573

This PR adds a wrapper <div> to core/query-pagination-previous and core/query-pagination-next blocks, making them consistent with the structure of core/query-pagination-numbers.

Why?

Currently, the "Previous" and "Next" pagination links render as naked tags without wrapping <div>. This makes it impossible to style them using the elements.link section in theme.json and creates an inconsistency with core/query-pagination-numbers which does have a wrapping <div>.

How?

Updated the edit.js files for both blocks to wrap their content in a div
Modified the PHP render functions to wrap the link content in a div while maintaining compatibility with enhanced pagination

Testing Instructions

  • Create a post with a Query block that has pagination enabled
  • Inspect the HTML structure of the pagination using developer tools
  • Verify that all pagination elements (Previous, Numbers, Next) have a consistent structure with div wrappers

Screencast

Before

Screen.Recording.2025-03-17.at.23.18.36.mov

After

Screen.Recording.2025-03-17.at.23.17.30.mov

@himanshupathak95 himanshupathak95 force-pushed the fix/69573-query-pagination-links-wrapper branch from 757242f to 46daf4d Compare March 17, 2025 17:44
@himanshupathak95 himanshupathak95 marked this pull request as ready for review March 17, 2025 17:51
@github-actions GitHub Actions
Copy link

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.

@github-actions GitHub Actions
Copy link

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @EldarAgalarov.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: EldarAgalarov.

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: carolinan <[email protected]>

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

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block labels Mar 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
[Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
2 participants
@himanshupathak95 @t-hamano