Position Panel: Open by default if a position type is set (#49151)

* Position Panel: Open by default is a position type is set

* Remove prop drilling clientId, grab all selected client ids and use first id for attributes check

* Iterate over block selection and open by default if at least one block has a position type set.

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

* Add useState and an effect so that we only perform the calculation once

* Try to reduce flicker

* Update to useLayoutEffect

---------

Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>

packages/block-editor/src/components/inspector-controls-tabs/position-controls-panel.js

@@ -5,33 +5,64 @@ import {
 	PanelBody,
 	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import InspectorControlsGroups from '../inspector-controls/groups';
 import { default as InspectorControls } from '../inspector-controls';
+import { store as blockEditorStore } from '../../store';
 
-const PositionControls = () => {
-	const fills = useSlotFills(
-		InspectorControlsGroups.position.Slot.__unstableName
-	);
-	const hasFills = Boolean( fills && fills.length );
+const PositionControlsPanel = () => {
+	const [ initialOpen, setInitialOpen ] = useState();
 
-	if ( ! hasFills ) {
-		return null;
-	}
+	// Determine whether the panel should be expanded.
+	const { multiSelectedBlocks } = useSelect( ( select ) => {
+		const { getBlocksByClientId, getSelectedBlockClientIds } =
+			select( blockEditorStore );
+		const clientIds = getSelectedBlockClientIds();
+		return {
+			multiSelectedBlocks: getBlocksByClientId( clientIds ),
+		};
+	}, [] );
+
+	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 ] );
 
 	return (
 		<PanelBody
 			className="block-editor-block-inspector__position"
 			title={ __( 'Position' ) }
-			initialOpen={ false }
+			initialOpen={ initialOpen ?? false }
 		>
 			<InspectorControls.Slot group="position" />
 		</PanelBody>
 	);
 };
 
+const PositionControls = () => {
+	const fills = useSlotFills(
+		InspectorControlsGroups.position.Slot.__unstableName
+	);
+	const hasFills = Boolean( fills && fills.length );
+
+	if ( ! hasFills ) {
+		return null;
+	}
+
+	return <PositionControlsPanel />;
+};
+
 export default PositionControls;