Refactor "Settings" panel of Query Page Numbers block to use ToolsPan…

…el instead of PanelBody (WordPress#67958) Co-authored-by: im3dabasia <[email protected]> Co-authored-by: fabiankaegy <[email protected]>
soloinovator · Dec 13, 2024 · 85912cb · 85912cb
1 parent 84d26fc
commit 85912cb
Showing 1 changed file with 34 additions and 19 deletions.
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -3,7 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	RangeControl,
+} from '@wordpress/components';
 
 const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
 	<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
@@ -46,28 +50,39 @@ export default function QueryPaginationNumbersEdit( {
 	const paginationNumbers = previewPaginationNumbers(
 		parseInt( midSize, 10 )
 	);
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => setAttributes( { midSize: 2 } ) }
+				>
+					<ToolsPanelItem
 						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>
+						hasValue={ () => midSize !== undefined }
+						onDeselect={ () => setAttributes( { midSize: 2 } ) }
+						isShownByDefault
+					>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							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 }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>{ paginationNumbers }</div>
 		</>