From a968b22798e230ad3859d8d017677999dea435e5 Mon Sep 17 00:00:00 2001
From: himanshupathak95 <himanshu.pathak@rtcamp.com>
Date: Mon, 16 Dec 2024 12:19:45 +0530
Subject: [PATCH] Query: Refactor settings panel to use ToolsPanel

---
 .../query/edit/inspector-controls/index.js    | 236 +++++++++++-------
 1 file changed, 148 insertions(+), 88 deletions(-)

diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js
index 0ae4b052b57873..3470846a14795b 100644
--- a/packages/block-library/src/query/edit/inspector-controls/index.js
+++ b/packages/block-library/src/query/edit/inspector-controls/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	TextControl,
 	SelectControl,
 	RangeControl,
@@ -187,110 +186,171 @@ export default function QueryInspectorControls( props ) {
 	return (
 		<>
 			{ showSettingsPanel && (
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setQuery( {
+							postType: 'post',
+							order: 'desc',
+							orderBy: 'date',
+							sticky: '',
+							inherit: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					{ showInheritControl && (
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
+							hasValue={ () => ! inherit }
 							label={ __( 'Query type' ) }
-							isBlock
-							onChange={ ( value ) => {
-								setQuery( { inherit: value === 'default' } );
-							} }
-							help={
-								inherit
-									? __(
-											'Display a list of posts or custom post types based on the current template.'
-									  )
-									: __(
-											'Display a list of posts or custom post types based on specific criteria.'
-									  )
-							}
-							value={ !! inherit ? 'default' : 'custom' }
+							onDeselect={ () => setQuery( { inherit: true } ) }
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="default"
-								label={ __( 'Default' ) }
-							/>
-							<ToggleGroupControlOption
-								value="custom"
-								label={ __( 'Custom' ) }
-							/>
-						</ToggleGroupControl>
-					) }
-					{ showPostTypeControl &&
-						( postTypesSelectOptions.length > 2 ? (
-							<SelectControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								options={ postTypesSelectOptions }
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
-							/>
-						) : (
 							<ToggleGroupControl
-								__nextHasNoMarginBottom
 								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Query type' ) }
 								isBlock
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
+								onChange={ ( value ) => {
+									setQuery( {
+										inherit: value === 'default',
+									} );
+								} }
+								help={
+									inherit
+										? __(
+												'Display a list of posts or custom post types based on the current template.'
+										  )
+										: __(
+												'Display a list of posts or custom post types based on specific criteria.'
+										  )
+								}
+								value={ !! inherit ? 'default' : 'custom' }
 							>
-								{ postTypesSelectOptions.map( ( option ) => (
-									<ToggleGroupControlOption
-										key={ option.value }
-										value={ option.value }
-										label={ option.label }
-									/>
-								) ) }
+								<ToggleGroupControlOption
+									value="default"
+									label={ __( 'Default' ) }
+								/>
+								<ToggleGroupControlOption
+									value="custom"
+									label={ __( 'Custom' ) }
+								/>
 							</ToggleGroupControl>
-						) ) }
+						</ToolsPanelItem>
+					) }
 
-					{ showColumnsControl && (
-						<>
-							<RangeControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Columns' ) }
-								value={ displayLayout.columns }
-								onChange={ ( value ) =>
-									setDisplayLayout( {
-										columns: value,
-									} )
-								}
-								min={ 2 }
-								max={ Math.max( 6, displayLayout.columns ) }
-							/>
-							{ displayLayout.columns > 6 && (
-								<Notice
-									status="warning"
-									isDismissible={ false }
+					{ showPostTypeControl && (
+						<ToolsPanelItem
+							hasValue={ () => postType !== 'post' }
+							label={ postTypeControlLabel }
+							onDeselect={ () => onPostTypeChange( 'post' ) }
+							isShownByDefault
+						>
+							{ postTypesSelectOptions.length > 2 ? (
+								<SelectControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									options={ postTypesSelectOptions }
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
+								/>
+							) : (
+								<ToggleGroupControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									isBlock
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
 								>
-									{ __(
-										'This column count exceeds the recommended amount and may cause visual breakage.'
+									{ postTypesSelectOptions.map(
+										( option ) => (
+											<ToggleGroupControlOption
+												key={ option.value }
+												value={ option.value }
+												label={ option.label }
+											/>
+										)
 									) }
-								</Notice>
+								</ToggleGroupControl>
 							) }
-						</>
+						</ToolsPanelItem>
 					) }
+
+					{ showColumnsControl && (
+						<ToolsPanelItem
+							hasValue={ () => displayLayout?.columns !== 2 }
+							label={ __( 'Columns' ) }
+							onDeselect={ () =>
+								setDisplayLayout( { columns: 2 } )
+							}
+							isShownByDefault
+						>
+							<>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Columns' ) }
+									value={ displayLayout.columns }
+									onChange={ ( value ) =>
+										setDisplayLayout( {
+											columns: value,
+										} )
+									}
+									min={ 2 }
+									max={ Math.max( 6, displayLayout.columns ) }
+								/>
+								{ displayLayout.columns > 6 && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'This column count exceeds the recommended amount and may cause visual breakage.'
+										) }
+									</Notice>
+								) }
+							</>
+						</ToolsPanelItem>
+					) }
+
 					{ showOrderControl && (
-						<OrderControl
-							{ ...{ order, orderBy } }
-							onChange={ setQuery }
-						/>
+						<ToolsPanelItem
+							hasValue={ () =>
+								order !== 'desc' || orderBy !== 'date'
+							}
+							label={ __( 'Order by' ) }
+							onDeselect={ () =>
+								setQuery( { order: 'desc', orderBy: 'date' } )
+							}
+							isShownByDefault
+						>
+							<OrderControl
+								{ ...{ order, orderBy } }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
 					) }
+
 					{ showStickyControl && (
-						<StickyControl
-							value={ sticky }
-							onChange={ ( value ) =>
-								setQuery( { sticky: value } )
-							}
-						/>
+						<ToolsPanelItem
+							hasValue={ () => !! sticky }
+							label={ __( 'Sticky posts' ) }
+							onDeselect={ () => setQuery( { sticky: '' } ) }
+							isShownByDefault
+						>
+							<StickyControl
+								value={ sticky }
+								onChange={ ( value ) =>
+									setQuery( { sticky: value } )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			) }
 			{ ! inherit && showDisplayPanel && (
 				<ToolsPanel