From 6b82f9f06bbdaf9a9d07f79167ff22220e0940dd Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 13 Dec 2024 15:58:26 +0530
Subject: [PATCH 1/2] Refactor "Position" controls panel to use `ToolsPanel`
 instead of `PanelBody`

---
 .../position-controls-panel.js                | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index 42a8597227dee9..94c42b80ed458d 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useLayoutEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -14,41 +13,53 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 const PositionControlsPanel = () => {
-	const [ initialOpen, setInitialOpen ] = useState();
-
 	// Determine whether the panel should be expanded.
-	const { multiSelectedBlocks } = useSelect( ( select ) => {
-		const { getBlocksByClientId, getSelectedBlockClientIds } =
+	const { selectedClientID, positionAttribute } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds, getBlockAttributes } =
 			select( blockEditorStore );
+
 		const clientIds = getSelectedBlockClientIds();
+
+		// If multiple blocks are selected, prioritize the first block.
+		const blockAttributes = getBlockAttributes( clientIds[ 0 ] );
+
 		return {
-			multiSelectedBlocks: getBlocksByClientId( clientIds ),
+			selectedClientID: clientIds[ 0 ],
+			positionAttribute: blockAttributes?.style?.position?.type,
 		};
 	}, [] );
 
-	useLayoutEffect( () => {
-		// If any selected block has a position set, open the panel by default.
-		// The first block's value will still be used within the control though.
-		if ( initialOpen === undefined ) {
-			setInitialOpen(
-				multiSelectedBlocks.some(
-					( { attributes } ) => !! attributes?.style?.position?.type
-				)
-			);
-		}
-	}, [ initialOpen, multiSelectedBlocks, setInitialOpen ] );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	function resetPosition() {
+		updateBlockAttributes( selectedClientID, {
+			style: {
+				position: {
+					type: undefined,
+				},
+			},
+		} );
+	}
 
 	return (
-		<PanelBody
+		<ToolsPanel
 			className="block-editor-block-inspector__position"
-			title={ __( 'Position' ) }
-			initialOpen={ initialOpen ?? false }
+			label={ __( 'Position' ) }
+			resetAll={ resetPosition }
 		>
-			<InspectorControls.Slot group="position" />
-		</PanelBody>
+			<ToolsPanelItem
+				isShownByDefault
+				label={ __( 'Position' ) }
+				hasValue={ () => !! positionAttribute }
+				onDeselect={ resetPosition }
+			>
+				<InspectorControls.Slot group="position" />
+			</ToolsPanelItem>
+		</ToolsPanel>
 	);
 };
 

From d41f5f988bc25add1a84b527e286639e544b347b Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Fri, 13 Dec 2024 16:15:39 +0530
Subject: [PATCH 2/2] Refactor imports

---
 .../inspector-controls-tabs/position-controls-panel.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
index 94c42b80ed458d..457816f72337d5 100644
--- a/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
+++ b/packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js
@@ -6,6 +6,7 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -13,7 +14,6 @@ import { __ } from '@wordpress/i18n';
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
-import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 
 const PositionControlsPanel = () => {