Extract common logic

WordPress · May 27, 2020 · 2ed83d5 · 2ed83d5
1 parent 2496d84
commit 2ed83d5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 53 deletions.
diff --git 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 <BlockControlsFill>{ children }</BlockControlsFill>;
-}
+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
@@ -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 <Component>{ children }</Component>;
+	};
+}
diff --git 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 <Fill>{ children }</Fill>;
-}
+const InspectorControls = ifDisplayBlockControls( Fill );
 
 InspectorControls.Slot = Slot;