Refactor "Settings" panel of Login/Logour block to use ToolsPanel ins…

…tead of PanelBody (WordPress#67909)

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>

packages/block-library/src/loginout/edit.js

@@ -1,38 +1,68 @@
 /**
  * WordPress dependencies
  */
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 export default function LoginOutEdit( { attributes, setAttributes } ) {
 	const { displayLoginAsForm, redirectToCurrent } = attributes;
 
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							displayLoginAsForm: false,
+							redirectToCurrent: true,
+						} );
+					} }
+				>
+					<ToolsPanelItem
 						label={ __( 'Display login as form' ) }
-						checked={ displayLoginAsForm }
-						onChange={ () =>
-							setAttributes( {
-								displayLoginAsForm: ! displayLoginAsForm,
-							} )
+						isShownByDefault
+						hasValue={ () => displayLoginAsForm }
+						onDeselect={ () =>
+							setAttributes( { displayLoginAsForm: false } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display login as form' ) }
+							checked={ displayLoginAsForm }
+							onChange={ () =>
+								setAttributes( {
+									displayLoginAsForm: ! displayLoginAsForm,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Redirect to current URL' ) }
-						checked={ redirectToCurrent }
-						onChange={ () =>
-							setAttributes( {
-								redirectToCurrent: ! redirectToCurrent,
-							} )
+						isShownByDefault
+						hasValue={ () => ! redirectToCurrent }
+						onDeselect={ () =>
+							setAttributes( { redirectToCurrent: true } )
 						}
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Redirect to current URL' ) }
+							checked={ redirectToCurrent }
+							onChange={ () =>
+								setAttributes( {
+									redirectToCurrent: ! redirectToCurrent,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div
 				{ ...useBlockProps( {