Skip to content

Commit 4316be5

Browse files
krokodokkrokodok
authored
Make mid size parameter settable for Query Pagination block. (#51216)
* Add attribute & context „midSize“ to pagination block. * Add and use QueryPaginationMidSizeControl in PaginationBlock. * React to new „midSize“ context in pagination numbers block. * Adjust unit tests. * Fix php errors from partial line commits. * Remove unneeded React import. * Move midSize control to query pagination numbers * Fix incorrect partial php commit * Get midSize param from attributes not context * Re-add missing array definition line * Update help description. * Remove unnecessary formatting changes * Fix formatting issue. * Move mid size control from own file into edit.js * Only pass mid_size if set; also for inherit query * Fix space alignment * Increase last pagination number to justify … gap * Rebuild test
1 parent dc06193 commit 4316be5

6 files changed

Lines changed: 85 additions & 20 deletions

File tree

‎docs/reference-guides/core-blocks.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -705,7 +705,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
705705
- **Category:** theme
706706
- **Parent:** core/query-pagination
707707
- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
708-
- **Attributes:**
708+
- **Attributes:** midSize
709709

710710
## Previous Page
711711

‎packages/block-library/src/query-pagination-numbers/block.json‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
"parent": [ "core/query-pagination" ],
88
"description": "Displays a list of page numbers for pagination",
99
"textdomain": "default",
10+
"attributes": {
11+
"midSize": {
12+
"type": "number",
13+
"default": 2
14+
}
15+
},
1016
"usesContext": [ "queryId", "query" ],
1117
"supports": {
1218
"reusable": false,

‎packages/block-library/src/query-pagination-numbers/edit.js‎

Lines changed: 64 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,73 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { useBlockProps } from '@wordpress/block-editor';
4+
import { __ } from '@wordpress/i18n';
5+
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
6+
import { PanelBody, RangeControl } from '@wordpress/components';
57

68
const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
7-
<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
9+
<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
10+
{ content }
11+
</Tag>
812
);
913

10-
const previewPaginationNumbers = () => (
11-
<>
12-
{ createPaginationItem( 1 ) }
13-
{ createPaginationItem( 2 ) }
14-
{ createPaginationItem( 3, 'span', 'current' ) }
15-
{ createPaginationItem( 4 ) }
16-
{ createPaginationItem( 5 ) }
17-
{ createPaginationItem( '...', 'span', 'dots' ) }
18-
{ createPaginationItem( 8 ) }
19-
</>
20-
);
14+
const previewPaginationNumbers = ( midSize ) => {
15+
const paginationItems = [];
16+
17+
// First set of pagination items.
18+
for ( let i = 1; i <= midSize; i++ ) {
19+
paginationItems.push( createPaginationItem( i ) );
20+
}
21+
22+
// Current pagination item.
23+
paginationItems.push(
24+
createPaginationItem( midSize + 1, 'span', 'current' )
25+
);
26+
27+
// Second set of pagination items.
28+
for ( let i = 1; i <= midSize; i++ ) {
29+
paginationItems.push( createPaginationItem( midSize + 1 + i ) );
30+
}
31+
32+
// Dots.
33+
paginationItems.push( createPaginationItem( '...', 'span', 'dots' ) );
34+
35+
// Last pagination item.
36+
paginationItems.push( createPaginationItem( midSize * 2 + 3 ) );
37+
38+
return <>{ paginationItems }</>;
39+
};
2140

22-
export default function QueryPaginationNumbersEdit() {
23-
const paginationNumbers = previewPaginationNumbers();
24-
return <div { ...useBlockProps() }>{ paginationNumbers }</div>;
41+
export default function QueryPaginationNumbersEdit( {
42+
attributes,
43+
setAttributes,
44+
} ) {
45+
const { midSize } = attributes;
46+
const paginationNumbers = previewPaginationNumbers(
47+
parseInt( midSize, 10 )
48+
);
49+
return (
50+
<>
51+
<InspectorControls>
52+
<PanelBody title={ __( 'Settings' ) }>
53+
<RangeControl
54+
label={ __( 'Number of links' ) }
55+
help={ __(
56+
'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
57+
) }
58+
value={ midSize }
59+
onChange={ ( value ) => {
60+
setAttributes( {
61+
midSize: parseInt( value, 10 ),
62+
} );
63+
} }
64+
min={ 0 }
65+
max={ 5 }
66+
withInputField={ false }
67+
/>
68+
</PanelBody>
69+
</InspectorControls>
70+
<div { ...useBlockProps() }>{ paginationNumbers }</div>
71+
</>
72+
);
2573
}

‎packages/block-library/src/query-pagination-numbers/index.php‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
2222
$wrapper_attributes = get_block_wrapper_attributes();
2323
$content = '';
2424
global $wp_query;
25+
$mid_size = isset( $block->attributes['midSize'] ) ? (int) $block->attributes['midSize'] : null;
2526
if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
2627
// Take into account if we have set a bigger `max page`
2728
// than what the query has.
@@ -30,7 +31,10 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
3031
'prev_next' => false,
3132
'total' => $total,
3233
);
33-
$content = paginate_links( $paginate_args );
34+
if ( null !== $mid_size ) {
35+
$paginate_args['mid_size'] = $mid_size;
36+
}
37+
$content = paginate_links( $paginate_args );
3438
} else {
3539
$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
3640
// `paginate_links` works with the global $wp_query, so we have to
@@ -45,6 +49,9 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
4549
'total' => $total,
4650
'prev_next' => false,
4751
);
52+
if ( null !== $mid_size ) {
53+
$paginate_args['mid_size'] = $mid_size;
54+
}
4855
if ( 1 !== $page ) {
4956
/**
5057
* `paginate_links` doesn't use the provided `format` when the page is `1`.

‎test/integration/fixtures/blocks/core__query-pagination-numbers.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
{
33
"name": "core/query-pagination-numbers",
44
"isValid": true,
5-
"attributes": {},
5+
"attributes": {
6+
"midSize": 2
7+
},
68
"innerBlocks": []
79
}
810
]

‎test/integration/fixtures/blocks/core__query__deprecated-3.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,9 @@
100100
{
101101
"name": "core/query-pagination-numbers",
102102
"isValid": true,
103-
"attributes": {},
103+
"attributes": {
104+
"midSize": 2
105+
},
104106
"innerBlocks": []
105107
},
106108
{

0 commit comments

Comments
 (0)