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 f145d961e1f30..9a3670b5deb28 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
@@ -5,6 +5,8 @@ import {
PanelBody,
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { useLayoutEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
/**
@@ -12,26 +14,55 @@ import { __ } from '@wordpress/i18n';
*/
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 (
);
};
+const PositionControls = () => {
+ const fills = useSlotFills(
+ InspectorControlsGroups.position.Slot.__unstableName
+ );
+ const hasFills = Boolean( fills && fills.length );
+
+ if ( ! hasFills ) {
+ return null;
+ }
+
+ return ;
+};
+
export default PositionControls;