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.

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

Allow placing Query pagination inside groups and other containers #58602

Merged
merged 1 commit into from
Feb 2, 2024

Conversation

carolinan
Copy link
Contributor

@carolinan carolinan commented Feb 2, 2024

What?

The query pagination block has a parent attribute in block.json which limits its placement to be a direct child of the query loop.
This PR changes parent to ancestor so that the query pagination works when placed in:

  • Template parts inside the query loop.
  • Patterns inside the query loop

Partial fix for #38684
Ideally, it should also be possible to insert or move the query pagination block to a template part, when that template part is placed inside the query loop, this PR does not solve that.

Why?

Because it is limited to be placed directly in the query loop, it limits its design choices, but it also makes translating the labels more difficult.
To make these labels translatable, you would have to place the whole query inside a block pattern:

<!-- wp:query-pagination-previous {"label":"Newer Posts"} /-->
<!-- wp:query-pagination-next {"label":"Older Posts"} /-->

How?

In block.json, parent is changed to ancestor.

Testing Instructions

On your WordPress installation, make sure that you have enough posts to enable pagination on archives.

Download and install Twenty Twenty-Three.
In the themes patterns folder, create a new pattern with a file called pagination.php.
Add this code, and save.

<?php
/**
 * Title: Pagination
 * Slug: twentytwentythree/pagination
 * Categories: query
 * Keywords: pagination
 */
?>
<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
	<!-- wp:query-pagination-previous {"label":"Pattern Newer Posts"} /-->
	<!-- wp:query-pagination-next {"label":"Pattern test Older Posts"} /-->
<!-- /wp:query-pagination -->

In the parts folder, create a new file called pagination.html.
Add this code:

Open home.html.
Add the following code inside the query loop, but outside the post template:

Go to the Site editor and open then home template. Reset customizations.
Confirm that the pagination blocks are in the template.
View the front of the site, confirm that the pagination blocks are visible and that the pagination works. The results should be correct no matter which of the 3 sets of pagination blocks that are used.

Copy link

github-actions bot commented Feb 2, 2024

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.

Core SVN

If you're a Core Committer, use this list when committing to wordpress-develop in SVN:

Props: poena, fabiankaegy.

GitHub Merge commits

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: carolinan <poena@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

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

@carolinan carolinan added [Type] Enhancement A suggestion for improvement. [Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block labels Feb 2, 2024
@carolinan
Copy link
Contributor Author

If possible I would like this to be part of 17.7 / 6.5 to make it easier to add translations to Twenty Twenty-Three:
https://core.trac.wordpress.org/ticket/60298#comment:4

Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change looks good to me 👍

@carolinan carolinan merged commit cc7ac02 into trunk Feb 2, 2024
62 of 67 checks passed
@carolinan carolinan deleted the update/pagination-ancestor branch February 2, 2024 10:33
@carolinan
Copy link
Contributor Author

Thank you.

@github-actions github-actions bot added this to the Gutenberg 17.7 milestone Feb 2, 2024
@carolinan
Copy link
Contributor Author

carolinan commented Feb 2, 2024

Upon re-resting, this does not solve the problem with placing the query pagination in a pattern or template part, the path to page/2/ is still incorrect.

@carolinan
Copy link
Contributor Author

Without this PR; it is possible to:
Select a query pagination block that is inside a query loop and use the "Group" option.
But not possible to add a group inside the query, and insert or move (select and drag) a query pagination block inside it.
The PR at least solves that second part.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block [Type] Enhancement A suggestion for improvement.
2 participants