From ffc76f72269ead408def6e45b2261237b73918ec Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 21 Mar 2023 12:35:50 +1100 Subject: [PATCH] Add useState and an effect so that we only perform the calculation once --- .../position-controls-panel.js | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 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 a743e6c4297a0c..f4b1f554c34ea0 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 { __experimentalUseSlotFills as useSlotFills, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; +import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** @@ -16,23 +17,30 @@ import { default as InspectorControls } from '../inspector-controls'; import { store as blockEditorStore } from '../../store'; const PositionControlsPanel = () => { + const [ initialOpen, setInitialOpen ] = useState(); + // Determine whether the panel should be expanded. - const { initialOpen } = useSelect( ( select ) => { + const { multiSelectedBlocks } = useSelect( ( select ) => { const { getBlocksByClientId, getSelectedBlockClientIds } = select( blockEditorStore ); - - // 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. const clientIds = getSelectedBlockClientIds(); - const multiSelectedBlocks = getBlocksByClientId( clientIds ); - return { - initialOpen: multiSelectedBlocks.some( - ( { attributes } ) => !! attributes?.style?.position?.type - ), + multiSelectedBlocks: getBlocksByClientId( clientIds ), }; }, [] ); + useEffect( () => { + // 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 (