diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js index ad0624d610b3f..e34c779f42b8d 100644 --- a/packages/block-editor/src/components/block-controls/index.js +++ b/packages/block-editor/src/components/block-controls/index.js @@ -12,12 +12,11 @@ import { createSlotFill, ToolbarGroup, } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { useBlockEditContext } from '../block-edit/context'; +import ifDisplayBlockControls from '../if-display-block-controls'; const { Fill, Slot } = createSlotFill( 'BlockControls' ); @@ -45,30 +44,7 @@ function BlockControlsFill( { controls, children } ) { ); } -function BlockControls( { children } ) { - const { isSelected, clientId, name } = useBlockEditContext(); - const isFirstAndSameTypeMultiSelected = useSelect( ( select ) => { - const { - getBlockName, - isFirstMultiSelectedBlock, - getMultiSelectedBlockClientIds, - } = select( 'core/block-editor' ); - - if ( ! isFirstMultiSelectedBlock( clientId ) ) { - return false; - } - - return getMultiSelectedBlockClientIds().every( - ( id ) => getBlockName( id ) === name - ); - }, [] ); - - if ( ! isSelected && ! isFirstAndSameTypeMultiSelected ) { - return null; - } - - return { children }; -} +const BlockControls = ifDisplayBlockControls( BlockControlsFill ); BlockControls.Slot = BlockControlsSlot; diff --git a/packages/block-editor/src/components/if-display-block-controls/index.js b/packages/block-editor/src/components/if-display-block-controls/index.js new file mode 100644 index 0000000000000..f948d85bb3d75 --- /dev/null +++ b/packages/block-editor/src/components/if-display-block-controls/index.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { useBlockEditContext } from '../block-edit/context'; + +export default function ifDisplayBlockControls( Component ) { + return ( { children } ) => { + const { isSelected, clientId, name } = useBlockEditContext(); + const isFirstAndSameTypeMultiSelected = useSelect( + ( select ) => { + const { + getBlockName, + isFirstMultiSelectedBlock, + getMultiSelectedBlockClientIds, + } = select( 'core/block-editor' ); + + if ( ! isFirstMultiSelectedBlock( clientId ) ) { + return false; + } + + return getMultiSelectedBlockClientIds().every( + ( id ) => getBlockName( id ) === name + ); + }, + [ clientId, name ] + ); + + if ( ! isSelected && ! isFirstAndSameTypeMultiSelected ) { + return null; + } + + return { children }; + }; +} diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 4d260a7dd3203..3c9ea7795bc30 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -2,39 +2,14 @@ * WordPress dependencies */ import { createSlotFill } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import { useBlockEditContext } from '../block-edit/context'; +import ifDisplayBlockControls from '../if-display-block-controls'; const { Fill, Slot } = createSlotFill( 'InspectorControls' ); - -function InspectorControls( { children } ) { - const { isSelected, clientId, name } = useBlockEditContext(); - const isFirstAndSameTypeMultiSelected = useSelect( ( select ) => { - const { - getBlockName, - isFirstMultiSelectedBlock, - getMultiSelectedBlockClientIds, - } = select( 'core/block-editor' ); - - if ( ! isFirstMultiSelectedBlock( clientId ) ) { - return false; - } - - return getMultiSelectedBlockClientIds().every( - ( id ) => getBlockName( id ) === name - ); - }, [] ); - - if ( ! isSelected && ! isFirstAndSameTypeMultiSelected ) { - return null; - } - - return { children }; -} +const InspectorControls = ifDisplayBlockControls( Fill ); InspectorControls.Slot = Slot;