From 2547508bcb14b75ace07889908659009cd3d8fd3 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Fri, 13 Dec 2024 12:53:07 +0530
Subject: [PATCH 1/2] Query Pagination: Refactor settings panel to use
 ToolsPanel

---
 .../src/query-pagination/edit.js              | 55 ++++++++++++++-----
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js
index e051c2e67e7e5a..b59799cadb783b 100644
--- a/packages/block-library/src/query-pagination/edit.js
+++ b/packages/block-library/src/query-pagination/edit.js
@@ -9,7 +9,10 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -60,22 +63,48 @@ export default function QueryPaginationEdit( {
 		<>
 			{ hasNextPreviousBlocks && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<QueryPaginationArrowControls
-							value={ paginationArrow }
-							onChange={ ( value ) => {
-								setAttributes( { paginationArrow: value } );
-							} }
-						/>
-						{ paginationArrow !== 'none' && (
-							<QueryPaginationLabelControl
-								value={ showLabel }
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								paginationArrow: 'none',
+								showLabel: true,
+							} );
+						} }
+					>
+						<ToolsPanelItem
+							hasValue={ () => paginationArrow !== 'none' }
+							label={ __( 'Pagination arrow' ) }
+							onDeselect={ () =>
+								setAttributes( { paginationArrow: 'none' } )
+							}
+							isShownByDefault
+						>
+							<QueryPaginationArrowControls
+								value={ paginationArrow }
 								onChange={ ( value ) => {
-									setAttributes( { showLabel: value } );
+									setAttributes( { paginationArrow: value } );
 								} }
 							/>
+						</ToolsPanelItem>
+						{ paginationArrow !== 'none' && (
+							<ToolsPanelItem
+								hasValue={ () => ! showLabel }
+								label={ __( 'Show text' ) }
+								onDeselect={ () =>
+									setAttributes( { showLabel: true } )
+								}
+								isShownByDefault
+							>
+								<QueryPaginationLabelControl
+									value={ showLabel }
+									onChange={ ( value ) => {
+										setAttributes( { showLabel: value } );
+									} }
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<nav { ...innerBlocksProps } />

From b2d262d4e71a2e3a2aea0ab5ba17bfda200cff46 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Mon, 16 Dec 2024 12:41:46 +0530
Subject: [PATCH 2/2] Query Pagination: Add dropdownMenuProps for consistency

---
 packages/block-library/src/query-pagination/edit.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/block-library/src/query-pagination/edit.js b/packages/block-library/src/query-pagination/edit.js
index b59799cadb783b..469ff14d0e967d 100644
--- a/packages/block-library/src/query-pagination/edit.js
+++ b/packages/block-library/src/query-pagination/edit.js
@@ -20,6 +20,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
 import { QueryPaginationLabelControl } from './query-pagination-label-control';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -59,6 +60,7 @@ export default function QueryPaginationEdit( {
 			setAttributes( { showLabel: true } );
 		}
 	}, [ paginationArrow, setAttributes, showLabel ] );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
@@ -71,6 +73,7 @@ export default function QueryPaginationEdit( {
 								showLabel: true,
 							} );
 						} }
+						dropdownMenuProps={ dropdownMenuProps }
 					>
 						<ToolsPanelItem
 							hasValue={ () => paginationArrow !== 'none' }