Skip to content

Commit

Permalink
refactor: Use ToolsPanel instead of PanelBody
Browse files Browse the repository at this point in the history
  • Loading branch information
im3dabasia committed Dec 13, 2024
1 parent 8d6b8c5 commit 0d90179
Showing 1 changed file with 34 additions and 19 deletions.
53 changes: 34 additions & 19 deletions packages/block-library/src/query-pagination-numbers/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@
*/
import { __ } from '@wordpress/i18n';
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import { PanelBody, RangeControl } from '@wordpress/components';
import {
ToolsPanel,
ToolsPanelItem,
RangeControl,
} from '@wordpress/components';

const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
Expand Down Expand Up @@ -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>
</>
Expand Down

0 comments on commit 0d90179

Please sign in to comment.