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
WordPress · Aug 28, 2023 · 4316be5 · 4316be5
1 parent dc06193
commit 4316be5
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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 = '' ) => (
-	<Tag className={ `page-numbers ${ extraClass }` }>{ content }</Tag>
+	<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
+		{ content }
+	</Tag>
 );
 
-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 <div { ...useBlockProps() }>{ paginationNumbers }</div>;
+export default function QueryPaginationNumbersEdit( {
+	attributes,
+	setAttributes,
+} ) {
+	const { midSize } = attributes;
+	const paginationNumbers = previewPaginationNumbers(
+		parseInt( midSize, 10 )
+	);
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<RangeControl
+						label={ __( 'Number of links' ) }
+						help={ __(
+							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
+						) }
+						value={ midSize }
+						onChange={ ( value ) => {
+							setAttributes( {
+								midSize: parseInt( value, 10 ),
+							} );
+						} }
+						min={ 0 }
+						max={ 5 }
+						withInputField={ false }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...useBlockProps() }>{ paginationNumbers }</div>
+		</>
+	);
 }
diff --git 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
@@ -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
@@ -100,7 +100,9 @@
 							{
 								"name": "core/query-pagination-numbers",
 								"isValid": true,
-								"attributes": {},
+								"attributes": {
+									"midSize": 2
+								},
 								"innerBlocks": []
 							},
 							{