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;