Remove ifBlockEditSelected internal higher-order component (#22905)

* Block Editor: Remove ifBlockEditSelected internal higher-order component * Block Editor: Pass children to inspector fills
WordPress · Jun 5, 2020 · 7390563 · 7390563
1 parent 68f62ad
commit 7390563
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 37 deletions.
diff --git a/packages/block-editor/src/components/block-controls/index.js b/packages/block-editor/src/components/block-controls/index.js
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'BlockControls' );
 
@@ -26,6 +26,11 @@ function BlockControlsSlot( props ) {
 }
 
 function BlockControlsFill( { controls, children } ) {
+	const { isSelected } = useBlockEditContext();
+	if ( ! isSelected ) {
+		return null;
+	}
+
 	return (
 		<Fill>
 			{ ( fillProps ) => {
@@ -44,7 +49,7 @@ function BlockControlsFill( { controls, children } ) {
 	);
 }
 
-const BlockControls = ifBlockEditSelected( BlockControlsFill );
+const BlockControls = BlockControlsFill;
 
 BlockControls.Slot = BlockControlsSlot;
 

diff --git a/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap
@@ -15,7 +15,7 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
   <WithFilters(Edit)
     isSelected={true}
   >
-    <IfBlockEditSelected(BlockControlsFill)
+    <BlockControlsFill
       controls={
         Array [
           Object {
@@ -60,7 +60,7 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
       <p>
         Child
       </p>
-    </IfBlockEditSelected(BlockControlsFill)>
+    </BlockControlsFill>
   </WithFilters(Edit)>
 </ContextProvider>
 `;
diff --git a/packages/block-editor/src/components/block-edit/context.js b/packages/block-editor/src/components/block-edit/context.js
@@ -52,24 +52,3 @@ export const withBlockEditContext = ( mapContextToProps ) =>
 			</Consumer>
 		);
 	}, 'withBlockEditContext' );
-
-/**
- * A Higher Order Component used to render conditionally the wrapped
- * component only when the BlockEdit has selected state set.
- *
- * @param {WPComponent} OriginalComponent Component to wrap.
- *
- * @return {WPComponent} Component which renders only when the BlockEdit is selected.
- */
-export const ifBlockEditSelected = createHigherOrderComponent(
-	( OriginalComponent ) => {
-		return ( props ) => (
-			<Consumer>
-				{ ( { isSelected } ) =>
-					isSelected && <OriginalComponent { ...props } />
-				}
-			</Consumer>
-		);
-	},
-	'ifBlockEditSelected'
-);
diff --git a/packages/block-editor/src/components/block-format-controls/index.js b/packages/block-editor/src/components/block-format-controls/index.js
@@ -15,7 +15,7 @@ import {
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );
 
@@ -25,6 +25,11 @@ function BlockFormatControlsSlot( props ) {
 }
 
 function BlockFormatControlsFill( props ) {
+	const { isSelected } = useBlockEditContext();
+	if ( ! isSelected ) {
+		return null;
+	}
+
 	return (
 		<Fill>
 			{ ( fillProps ) => {
@@ -39,7 +44,7 @@ function BlockFormatControlsFill( props ) {
 	);
 }
 
-const BlockFormatControls = ifBlockEditSelected( BlockFormatControlsFill );
+const BlockFormatControls = BlockFormatControlsFill;
 
 BlockFormatControls.Slot = BlockFormatControlsSlot;
 

diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js
@@ -6,12 +6,15 @@ import { createSlotFill } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit/context';
 
 const name = 'InspectorAdvancedControls';
 const { Fill, Slot } = createSlotFill( name );
 
-const InspectorAdvancedControls = ifBlockEditSelected( Fill );
+function InspectorAdvancedControls( { children } ) {
+	const { isSelected } = useBlockEditContext();
+	return isSelected ? <Fill>{ children }</Fill> : null;
+}
 
 InspectorAdvancedControls.slotName = name;
 InspectorAdvancedControls.Slot = Slot;

diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js
@@ -6,11 +6,14 @@ import { createSlotFill } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit/context';
 
 const { Fill, Slot } = createSlotFill( 'InspectorControls' );
 
-const InspectorControls = ifBlockEditSelected( Fill );
+function InspectorControls( { children } ) {
+	const { isSelected } = useBlockEditContext();
+	return isSelected ? <Fill>{ children }</Fill> : null;
+}
 
 InspectorControls.Slot = Slot;
 

diff --git a/packages/block-editor/src/components/inspector-controls/index.native.js b/packages/block-editor/src/components/inspector-controls/index.native.js
@@ -10,12 +10,17 @@ import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { ifBlockEditSelected } from '../block-edit/context';
+import { useBlockEditContext } from '../block-edit/context';
 import { BlockSettingsButton } from '../block-settings';
 
 const { Fill, Slot } = createSlotFill( 'InspectorControls' );
 
 const FillWithSettingsButton = ( { children, ...props } ) => {
+	const { isSelected } = useBlockEditContext();
+	if ( ! isSelected ) {
+		return null;
+	}
+
 	return (
 		<>
 			<Fill { ...props }>
@@ -30,7 +35,7 @@ const FillWithSettingsButton = ( { children, ...props } ) => {
 	);
 };
 
-const InspectorControls = ifBlockEditSelected( FillWithSettingsButton );
+const InspectorControls = FillWithSettingsButton;
 
 InspectorControls.Slot = Slot;
 

diff --git a/packages/block-library/src/more/test/__snapshots__/edit.js.snap b/packages/block-library/src/more/test/__snapshots__/edit.js.snap
@@ -2,7 +2,7 @@
 
 exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 <React.Fragment>
-  <IfBlockEditSelected(InspectorControlsFill)>
+  <InspectorControls>
     <ForwardRef(PanelBody)>
       <WithInstanceId(ToggleControl)
         checked={false}
@@ -11,7 +11,7 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
         onChange={[Function]}
       />
     </ForwardRef(PanelBody)>
-  </IfBlockEditSelected(InspectorControlsFill)>
+  </InspectorControls>
   <div
     className="wp-block-more"
   >
@@ -32,7 +32,7 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
 
 exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
 <React.Fragment>
-  <IfBlockEditSelected(InspectorControlsFill)>
+  <InspectorControls>
     <ForwardRef(PanelBody)>
       <WithInstanceId(ToggleControl)
         checked={true}
@@ -41,7 +41,7 @@ exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
         onChange={[Function]}
       />
     </ForwardRef(PanelBody)>
-  </IfBlockEditSelected(InspectorControlsFill)>
+  </InspectorControls>
   <div
     className="wp-block-more"
   >