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": [] }, {