Add a way to programatically remove editor panels from UI

docs/data/data-core-edit-post.md

@@ -89,6 +89,20 @@ Returns true if the publish sidebar is opened.
 
 Whether the publish sidebar is open.
 
+### isEditorPanelRemoved
+
+Returns true if the given panel is removed, or false otherwise. Panels are
+not removed by default.
+
+*Parameters*
+
+ * state: Global application state.
+ * panelName: A string that identifies the panel.
+
+*Returns*
+
+Whether or not the panel is removed.
+
 ### isEditorPanelEnabled
 
 Returns true if the given panel is enabled, or false otherwise. Panels are
@@ -301,6 +315,14 @@ Returns an action object used to open or close a panel in the editor.
 
  * panelName: A string that identifies the panel to open or close.
 
+### removeEditorPanel
+
+Returns an action object used to remove a panel from the editor.
+
+*Parameters*
+
+ * panelName: A string that identifies the panel to remove.
+
 ### toggleFeature
 
 Returns an action object used to toggle a feature flag.

packages/edit-post/src/components/options-modal/options/enable-panel.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
@@ -10,9 +10,14 @@ import { withSelect, withDispatch } from '@wordpress/data';
 import BaseOption from './base';
 
 export default compose(
-	withSelect( ( select, { panelName } ) => ( {
-		isChecked: select( 'core/edit-post' ).isEditorPanelEnabled( panelName ),
-	} ) ),
+	withSelect( ( select, { panelName } ) => {
+		const { isEditorPanelEnabled, isEditorPanelRemoved } = select( 'core/edit-post' );
+		return {
+			isRemoved: isEditorPanelRemoved( panelName ),
+			isChecked: isEditorPanelEnabled( panelName ),
+		};
+	} ),
+	ifCondition( ( { isRemoved } ) => ! isRemoved ),
 	withDispatch( ( dispatch, { panelName } ) => ( {
 		onChange: () => dispatch( 'core/edit-post' ).toggleEditorPanelEnabled( panelName ),
 	} ) )

packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap

@@ -28,22 +28,22 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = `
     <WithSelect(PostTaxonomies)
       taxonomyWrapper={[Function]}
     />
-    <WithSelect(WithDispatch(BaseOption))
+    <WithSelect(IfCondition(WithDispatch(BaseOption)))
       label="Featured Image"
       panelName="featured-image"
     />
     <PostExcerptCheck>
-      <WithSelect(WithDispatch(BaseOption))
+      <WithSelect(IfCondition(WithDispatch(BaseOption)))
         label="Excerpt"
         panelName="post-excerpt"
       />
     </PostExcerptCheck>
-    <WithSelect(WithDispatch(BaseOption))
+    <WithSelect(IfCondition(WithDispatch(BaseOption)))
       label="Discussion"
       panelName="discussion-panel"
     />
     <WithSelect(PageAttributesCheck)>
-      <WithSelect(WithDispatch(BaseOption))
+      <WithSelect(IfCondition(WithDispatch(BaseOption)))
         label="Page Attributes"
         panelName="page-attributes"
       />

packages/edit-post/src/components/options-modal/test/__snapshots__/meta-boxes-section.js.snap

@@ -17,12 +17,12 @@ exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`
   <WithSelect(EnableCustomFieldsOption)
     label="Custom Fields"
   />
-  <WithSelect(WithDispatch(BaseOption))
+  <WithSelect(IfCondition(WithDispatch(BaseOption)))
     key="test1"
     label="Meta Box 1"
     panelName="meta-box-test1"
   />
-  <WithSelect(WithDispatch(BaseOption))
+  <WithSelect(IfCondition(WithDispatch(BaseOption)))
     key="test2"
     label="Meta Box 2"
     panelName="meta-box-test2"
@@ -34,12 +34,12 @@ exports[`MetaBoxesSection renders meta box options 1`] = `
 <Section
   title="Advanced Panels"
 >
-  <WithSelect(WithDispatch(BaseOption))
+  <WithSelect(IfCondition(WithDispatch(BaseOption)))
     key="test1"
     label="Meta Box 1"
     panelName="meta-box-test1"
   />
-  <WithSelect(WithDispatch(BaseOption))
+  <WithSelect(IfCondition(WithDispatch(BaseOption)))
     key="test2"
     label="Meta Box 2"
     panelName="meta-box-test2"

packages/edit-post/src/store/actions.js

@@ -111,6 +111,20 @@ export function toggleEditorPanelOpened( panelName ) {
 	};
 }
 
+/**
+ * Returns an action object used to remove a panel from the editor.
+ *
+ * @param {string} panelName A string that identifies the panel to remove.
+ *
+ * @return {Object} Action object.
+ */
+export function removeEditorPanel( panelName ) {
+	return {
+		type: 'REMOVE_PANEL',
+		panelName,
+	};
+}
+
 /**
  * Returns an action object used to toggle a feature flag.
  *

packages/edit-post/src/store/reducer.js

@@ -73,6 +73,17 @@ export const preferences = combineReducers( {
 					},
 				};
 			}
+
+			case 'REMOVE_PANEL': {
+				const { panelName } = action;
+				return {
+					...state,
+					[ panelName ]: {
+						...state[ panelName ],
+						removed: true,
+					},
+				};
+			}
 		}
 
 		return state;

packages/edit-post/src/store/selectors.js

@@ -99,6 +99,20 @@ export function isPublishSidebarOpened( state ) {
 	return state.publishSidebarActive;
 }
 
+/**
+ * Returns true if the given panel is removed, or false otherwise. Panels are
+ * not removed by default.
+ *
+ * @param {Object} state     Global application state.
+ * @param {string} panelName A string that identifies the panel.
+ *
+ * @return {boolean} Whether or not the panel is removed.
+ */
+export function isEditorPanelRemoved( state, panelName ) {
+	const panels = getPreference( state, 'panels' );
+	return get( panels, [ panelName, 'removed' ], false );
+}
+
 /**
  * Returns true if the given panel is enabled, or false otherwise. Panels are
  * enabled by default.
@@ -110,7 +124,9 @@ export function isPublishSidebarOpened( state ) {
  */
 export function isEditorPanelEnabled( state, panelName ) {
 	const panels = getPreference( state, 'panels' );
-	return get( panels, [ panelName, 'enabled' ], true );
+
+	return ! isEditorPanelRemoved( state, panelName ) &&
+		get( panels, [ panelName, 'enabled' ], true );
 }
 
 /**

packages/edit-post/src/store/test/actions.js

@@ -4,6 +4,7 @@
 import {
 	toggleEditorPanelEnabled,
 	toggleEditorPanelOpened,
+	removeEditorPanel,
 	openGeneralSidebar,
 	closeGeneralSidebar,
 	openPublishSidebar,
@@ -59,6 +60,15 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'removeEditorPanel', () => {
+		it( 'should return a REMOVE_PANEL action', () => {
+			expect( removeEditorPanel( 'post-status' ) ).toEqual( {
+				type: 'REMOVE_PANEL',
+				panelName: 'post-status',
+			} );
+		} );
+	} );
+
 	describe( 'toggleEditorPanelEnabled', () => {
 		it( 'should return a TOGGLE_PANEL_ENABLED action', () => {
 			expect( toggleEditorPanelEnabled( 'post-status' ) ).toEqual( {

packages/edit-post/src/store/test/reducer.js

@@ -169,6 +169,21 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'should remove panels', () => {
+			const original = deepFreeze( {
+				panels: {
+					'post-status': {},
+				},
+			} );
+			const state = preferences( original, {
+				type: 'REMOVE_PANEL',
+				panelName: 'post-status',
+			} );
+			expect( state.panels ).toEqual( {
+				'post-status': { removed: true },
+			} );
+		} );
+
 		it( 'should return switched mode', () => {
 			const state = preferences( deepFreeze( { editorMode: 'visual' } ), {
 				type: 'SWITCH_MODE',

packages/edit-post/src/store/test/selectors.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * Internal dependencies
  */
@@ -16,6 +21,7 @@ import {
 	getActiveMetaBoxLocations,
 	isMetaBoxLocationActive,
 	isEditorPanelEnabled,
+	isEditorPanelRemoved,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -195,6 +201,30 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isEditorPanelRemoved', () => {
+		it( 'should return false by default', () => {
+			const state = deepFreeze( {
+				preferences: {
+					panels: {},
+				},
+			} );
+
+			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe( false );
+		} );
+
+		it( 'should return true when panel was removed', () => {
+			const state = deepFreeze( {
+				preferences: {
+					panels: {
+						'post-status': { removed: true },
+					},
+				},
+			} );
+
+			expect( isEditorPanelRemoved( state, 'post-status' ) ).toBe( true );
+		} );
+	} );
+
 	describe( 'isEditorPanelEnabled', () => {
 		it( 'should return true by default', () => {
 			const state = {
@@ -229,6 +259,21 @@ describe( 'selectors', () => {
 
 			expect( isEditorPanelEnabled( state, 'post-status' ) ).toBe( false );
 		} );
+
+		it( 'should return false when a panel is enabled but removed', () => {
+			const state = deepFreeze( {
+				preferences: {
+					panels: {
+						'post-status': {
+							enabled: true,
+							removed: true,
+						},
+					},
+				},
+			} );
+
+			expect( isEditorPanelEnabled( state, 'post-status' ) ).toBe( false );
+		} );
 	} );
 
 	describe( 'isEditorPanelOpened', () => {