Make mid size parameter settable for Query Pagination block.

[krokodok]

What?

This PR adds an input to the Query Pagination block controlling the mid_size parameter of the frontend rendered paginate_links() function. Up until now, only the default of 2 for mid_size could be rendered with the Query Pagination block.

This is my first try to contribute to Gutenberg at all. I am also very new to JSX. I took heavy inspiration for this feature and PR from #50779 which was merged just 4 days ago. Any feedback is welcome!

Why?

Closes #45855. It would be very helpful because up until now, developers had to control the amount of pagination numbers via PHP filters or with JS.

How?

The PR introduces a new attribute mid_size with a default of 2, which is also the default of the called paginate_links() function in the frontend. The input is only shown if a Query Page Numbers block is present inside the Query Pagination block.

Testing Instructions

1. In the editor, insert a Query Pagination block.
2. See that in the editor the default mid_size of 2 is applied. The Query Page Numbers block should read: 1 2 3 4 5 … 6.
3. The number of pages in the Query Page Numbers block should decrease or increase depending on the set mid_size. For example, a mid_size of 0 should result in 1 … 2 and a mid_size of 4 should result in 1 2 3 4 5 6 7 8 9 … 10.
4. Ensure that the max settable size is 10.
5. The mid_size control should only be visible if a Query Page Numbers block is present. Delete the Query Page Numbers block and see, that the mid_size control is gone on the Query Pagination block.

Testing Instructions for Keyboard

1. In the editor, insert a Query Pagination block.
2. Tab to the Query Pagination block settings panel.
3. Tab to the mid_size control and change the number using the arrow-up and arrow-down keys or input a number using a number key. See, that the number of pages in the Query Page Numbers block immediately adjusts.
4. Ensure that the max settable size is 10.
5. Tab to the Query Page Numbers block and delete it.
6. Tab back to the settings of the Query Pagination block.
7. Ensure, that the mid_size control is gone.

Front end testing instructions:

1. Ensure that your queried post type has enough posts and pages, so that the desired amount of pagination pages can be shown.
2. Set the mid_size to a low number like 0 or 1 and ensure that the rendered number of page links in the frontend is correct.
3. Set the mid_size to a high number like 3 or 4 and ensure that the rendered number of page links in the frontend is correct.
4. If there are not enough pages, the paginate_links() function should ensure correct behaviour.

Screenshots or screencast

Bildschirmaufnahme.2023-06-03.um.23.00.35.mov

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @krokodok! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[krokodok]

Any ideas why the two tests are failing?

[ntsekouras]

Thanks for the PR @krokodok ! Great work!

Unfortunately this PR fell into the cracks for a while. Do you think you'll find some time to rebase and move this forward?

[krokodok]

I updated my code. Any feedback is again highly welcome, so that we can get this feature into the main trunk. I would also highly appreciate some explanations for all the failing unit tests. I can't understand what PHPCS does not like in the test Unit Tests / PHP (pull_requet). In my opinion, the array is correctly aligned.

[krokodok]

Ok never mind the PHP formatting, I had an incomplete commit there.

[jameskoster]

Thanks for updating the PR. The control works well, but I don't see the result on the frontend? Regardless of the value, I always see the same number of page numbers.

I'm also not sure 0 should be an option, what do you think?

[krokodok]

Thanks for updating the PR. The control works well, but I don't see the result on the frontend? Regardless of the value, I always see the same number of page numbers.

I'm also not sure 0 should be an option, what do you think?

The last partial commit corrupted the php file again. My new commit should fix it.

I don't think it hurts to have the 0. It will result in a pagination like this:
First page ... Current page ... Last page

It all depends on what the developer / designers have in mind. This is where my incentive to add this parameter control stems from in the first place: Being frustrated that I had to write custom PHP code just to change the number of pagination links that are visible.

[jameskoster]

Perhaps it's just the 0 tooltip that makes it feel a bit strange to use. "Number of links: 0" kind of suggests there won't be any links at all.

Changing the help text might eliminate some confusion:

Specify how many links appear before and after the current page number. Links to the first and last page are always visible.

What do you think?

[krokodok]

I updated the help description to:

Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.

You are right, the whole concept of "midSize" takes a little math to understand. This control should not lead to more confusion than before.

[jameskoster]

I think this may need a rebase.

[ntsekouras]

Thank you for following up with this! 🚀 This is really close and we can take this to the finish line. I've left some small comments and there are some formatting issues to be fixed.

In my testing this worked well, but I didn't test the case where the query inherits(see the related comment below).

[ntsekouras]

Thanks so much for iterating @krokodok! I left a super tiny comment, but I've tested everything and LGTM! Great work!

What you also need is to run npm run fixtures:regenerate to update the integration/fixtures/blocks/core__query-pagination-numbers.json file. After that the unit tests should pass.

[ntsekouras]

Thank you, great work! 🚀

[krokodok]

Thank you so much for your help on this everybody. :)