diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index c666802aa117a..fde7f405558cc 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -705,7 +705,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
- **Category:** theme
- **Parent:** core/query-pagination
- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
-- **Attributes:**
+- **Attributes:** midSize
## Previous Page
diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json
index f00b2993a75f6..09b001c94dbf5 100644
--- a/packages/block-library/src/query-pagination-numbers/block.json
+++ b/packages/block-library/src/query-pagination-numbers/block.json
@@ -7,6 +7,12 @@
"parent": [ "core/query-pagination" ],
"description": "Displays a list of page numbers for pagination",
"textdomain": "default",
+ "attributes": {
+ "midSize": {
+ "type": "number",
+ "default": 2
+ }
+ },
"usesContext": [ "queryId", "query" ],
"supports": {
"reusable": false,
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
index 3832f673ea124..eb83204b2cca2 100644
--- a/packages/block-library/src/query-pagination-numbers/edit.js
+++ b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -1,25 +1,73 @@
/**
* WordPress dependencies
*/
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, RangeControl } from '@wordpress/components';
const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
- { content }
+
+ { content }
+
);
-const previewPaginationNumbers = () => (
- <>
- { createPaginationItem( 1 ) }
- { createPaginationItem( 2 ) }
- { createPaginationItem( 3, 'span', 'current' ) }
- { createPaginationItem( 4 ) }
- { createPaginationItem( 5 ) }
- { createPaginationItem( '...', 'span', 'dots' ) }
- { createPaginationItem( 8 ) }
- >
-);
+const previewPaginationNumbers = ( midSize ) => {
+ const paginationItems = [];
+
+ // First set of pagination items.
+ for ( let i = 1; i <= midSize; i++ ) {
+ paginationItems.push( createPaginationItem( i ) );
+ }
+
+ // Current pagination item.
+ paginationItems.push(
+ createPaginationItem( midSize + 1, 'span', 'current' )
+ );
+
+ // Second set of pagination items.
+ for ( let i = 1; i <= midSize; i++ ) {
+ paginationItems.push( createPaginationItem( midSize + 1 + i ) );
+ }
+
+ // Dots.
+ paginationItems.push( createPaginationItem( '...', 'span', 'dots' ) );
+
+ // Last pagination item.
+ paginationItems.push( createPaginationItem( midSize * 2 + 3 ) );
+
+ return <>{ paginationItems }>;
+};
-export default function QueryPaginationNumbersEdit() {
- const paginationNumbers = previewPaginationNumbers();
- return
{ paginationNumbers }
;
+export default function QueryPaginationNumbersEdit( {
+ attributes,
+ setAttributes,
+} ) {
+ const { midSize } = attributes;
+ const paginationNumbers = previewPaginationNumbers(
+ parseInt( midSize, 10 )
+ );
+ return (
+ <>
+
+
+ {
+ setAttributes( {
+ midSize: parseInt( value, 10 ),
+ } );
+ } }
+ min={ 0 }
+ max={ 5 }
+ withInputField={ false }
+ />
+
+
+ { paginationNumbers }
+ >
+ );
}
diff --git a/packages/block-library/src/query-pagination-numbers/index.php b/packages/block-library/src/query-pagination-numbers/index.php
index 60fe85efa1f8d..c37a4ae9fac7e 100644
--- a/packages/block-library/src/query-pagination-numbers/index.php
+++ b/packages/block-library/src/query-pagination-numbers/index.php
@@ -22,6 +22,7 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
$wrapper_attributes = get_block_wrapper_attributes();
$content = '';
global $wp_query;
+ $mid_size = isset( $block->attributes['midSize'] ) ? (int) $block->attributes['midSize'] : null;
if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
// Take into account if we have set a bigger `max page`
// than what the query has.
@@ -30,7 +31,10 @@ function render_block_core_query_pagination_numbers( $attributes, $content, $blo
'prev_next' => false,
'total' => $total,
);
- $content = paginate_links( $paginate_args );
+ if ( null !== $mid_size ) {
+ $paginate_args['mid_size'] = $mid_size;
+ }
+ $content = paginate_links( $paginate_args );
} else {
$block_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
// `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
'total' => $total,
'prev_next' => false,
);
+ if ( null !== $mid_size ) {
+ $paginate_args['mid_size'] = $mid_size;
+ }
if ( 1 !== $page ) {
/**
* `paginate_links` doesn't use the provided `format` when the page is `1`.
diff --git a/test/integration/fixtures/blocks/core__query-pagination-numbers.json b/test/integration/fixtures/blocks/core__query-pagination-numbers.json
index e5ef189320be2..16ac2fb469f98 100644
--- a/test/integration/fixtures/blocks/core__query-pagination-numbers.json
+++ b/test/integration/fixtures/blocks/core__query-pagination-numbers.json
@@ -2,7 +2,9 @@
{
"name": "core/query-pagination-numbers",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "midSize": 2
+ },
"innerBlocks": []
}
]
diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json
index bb9a9de34a4b7..d41ce2c5c826b 100644
--- a/test/integration/fixtures/blocks/core__query__deprecated-3.json
+++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json
@@ -100,7 +100,9 @@
{
"name": "core/query-pagination-numbers",
"isValid": true,
- "attributes": {},
+ "attributes": {
+ "midSize": 2
+ },
"innerBlocks": []
},
{