generateblocks icon indicating copy to clipboard operation
generateblocks copied to clipboard

Add a filter to set `mid_size` of the `the_posts_pagination` in Query Loop Pagination block

Open fernandoazarcon2 opened this issue 1 year ago • 1 comments

Description

The customer wants to shorten pagination like this: https://prnt.sc/BpdhUHvQ0GbP

Instead of having something like this: https://prnt.sc/AGPHbPRLv_Ur

Steps for testing

  1. Create a Query Loop Block.
  2. Add Pagination

References:

... https://generate.support/topic/page-number-query-loop-too-long/#post-21539

fernandoazarcon2 avatar Jun 26 '23 07:06 fernandoazarcon2

Obviously, this isn't a fix but it does serve the same aesthetic purpose.

It hides the link after the first ... and before the last ... pagination links:

.gb-query-loop-pagination:has(span.page-numbers.dots + a.page-numbers:nth-child(4)) a.page-numbers:nth-child(4),
.gb-query-loop-pagination:has(span.page-numbers.dots + a.page-numbers:nth-child(4)) a.page-numbers:nth-child(8) {
    display: none;
}

To visibly see what this is doing you can use the following instead:

.gb-query-loop-pagination:has(span.page-numbers.dots + a.page-numbers:nth-child(4)) a.page-numbers:nth-child(4),
.gb-query-loop-pagination:has(span.page-numbers.dots + a.page-numbers:nth-child(4)) a.page-numbers:nth-child(8) {
    background: red !important;
}

Example screenshot with the targetted items having a red background (yellow is active/current):

Screenshot 2023-07-05 at 13 34 38

Example screenshot with those items hidden:

Screenshot 2023-07-05 at 13 36 01

seemly avatar Jul 05 '23 12:07 seemly