Comments Pagination Block: Refactor settings panel to use ToolsPanel (#70245)

* Refactor Settings panel of Comments Pagination block to use ToolsPanel instead of PanelBody

* fix: update the dropdown label for comments pagination block settings

* chore: add dropdownMenuProps in comments pagination toolspanel

Co-authored-by: nani-samireddy <nanisamireddy@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Author: 3 people

packages/block-library/src/comments-pagination/edit.js

@@ -10,12 +10,16 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { CommentsPaginationArrowControls } from './comments-pagination-arrow-controls';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const TEMPLATE = [
 	[ 'core/comments-pagination-previous' ],
@@ -45,6 +49,7 @@ export default function QueryPaginationEdit( {
 	}, [] );
 
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
@@ -73,14 +78,29 @@ export default function QueryPaginationEdit( {
 		<>
 			{ hasNextPreviousBlocks && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<CommentsPaginationArrowControls
-							value={ paginationArrow }
-							onChange={ ( value ) => {
-								setAttributes( { paginationArrow: value } );
-							} }
-						/>
-					</PanelBody>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						dropdownMenuProps={ dropdownMenuProps }
+						resetAll={ () =>
+							setAttributes( { paginationArrow: 'none' } )
+						}
+					>
+						<ToolsPanelItem
+							label={ __( 'Arrow' ) }
+							hasValue={ () => paginationArrow !== 'none' }
+							onDeselect={ () =>
+								setAttributes( { paginationArrow: 'none' } )
+							}
+							isShownByDefault
+						>
+							<CommentsPaginationArrowControls
+								value={ paginationArrow }
+								onChange={ ( value ) => {
+									setAttributes( { paginationArrow: value } );
+								} }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<div { ...innerBlocksProps } />