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

Make mid size parameter settable for Query Pagination block. #51216

Merged
merged 18 commits into from
Aug 28, 2023
Merged

Make mid size parameter settable for Query Pagination block. #51216

merged 18 commits into from
Aug 28, 2023

Conversation

krokodok
Copy link
Contributor

@krokodok krokodok commented Jun 3, 2023

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

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Jun 3, 2023
@github-actions
Copy link

github-actions bot commented Jun 3, 2023

👋 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
Copy link
Contributor Author

krokodok commented Jun 3, 2023

Any ideas why the two tests are failing?

@skorasaurus skorasaurus added the [Block] Query Pagination Affects the Query Pagination Block - used for pagination within the Query Loop Block label Jun 5, 2023
@getdave getdave requested a review from ntsekouras June 7, 2023 14:24
Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

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?

packages/block-library/src/query-pagination/edit.js Outdated Show resolved Hide resolved
@krokodok
Copy link
Contributor Author

krokodok commented Aug 4, 2023

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
Copy link
Contributor Author

krokodok commented Aug 4, 2023

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

@jameskoster
Copy link
Contributor

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
Copy link
Contributor Author

krokodok commented Aug 7, 2023

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
Copy link
Contributor

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
Copy link
Contributor Author

krokodok commented Aug 9, 2023

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
Copy link
Contributor

I think this may need a rebase.

@ntsekouras ntsekouras added the [Type] Enhancement A suggestion for improvement. label Aug 21, 2023
Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

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).

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

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.

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thank you, great work! 🚀

@ntsekouras ntsekouras merged commit 4316be5 into WordPress:trunk Aug 28, 2023
48 checks passed
@github-actions github-actions bot added this to the Gutenberg 16.6 milestone Aug 28, 2023
@krokodok
Copy link
Contributor Author

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

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 First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Pagination numbers block: Make "mid_size" parameter settable
5 participants