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;