Edit Post: Simplify sidebar handing in the store

edit-post/api/sidebar.js

@@ -96,5 +96,5 @@ export function getSidebarSettings( name ) {
  * @return {void}
  */
 export function activateSidebar( name ) {
-	dispatch( 'edit-post' ).openGeneralSidebar( 'plugin', name );
+	dispatch( 'edit-post' ).openGeneralSidebar( name );
 }

edit-post/components/header/index.js

@@ -21,7 +21,7 @@ import './style.scss';
 import MoreMenu from './more-menu';
 import HeaderToolbar from './header-toolbar';
 import {
-	getOpenedGeneralSidebar,
+	isEditorSidebarOpened,
 	isPublishSidebarOpened,
 	hasMetaBoxes,
 	isSavingMetaBoxes,
@@ -33,15 +33,15 @@ import {
 } from '../../store/actions';
 
 function Header( {
-	isGeneralSidebarEditorOpen,
+	isEditorSidebarOpen,
 	onOpenGeneralSidebar,
 	onCloseGeneralSidebar,
 	isPublishSidebarOpen,
 	onTogglePublishSidebar,
 	hasActiveMetaboxes,
 	isSaving,
 } ) {
-	const toggleGeneralSidebar = isGeneralSidebarEditorOpen ? onCloseGeneralSidebar : onOpenGeneralSidebar;
+	const toggleGeneralSidebar = isEditorSidebarOpen ? onCloseGeneralSidebar : onOpenGeneralSidebar;
 
 	return (
 		<div
@@ -65,9 +65,9 @@ function Header( {
 					<IconButton
 						icon="admin-generic"
 						onClick={ toggleGeneralSidebar }
-						isToggled={ isGeneralSidebarEditorOpen }
+						isToggled={ isEditorSidebarOpen }
 						label={ __( 'Settings' ) }
-						aria-expanded={ isGeneralSidebarEditorOpen }
+						aria-expanded={ isEditorSidebarOpen }
 					/>
 					<MoreMenu key="more-menu" />
 				</div>
@@ -78,13 +78,13 @@ function Header( {
 
 export default connect(
 	( state ) => ( {
-		isGeneralSidebarEditorOpen: getOpenedGeneralSidebar( state ) === 'editor',
+		isEditorSidebarOpen: isEditorSidebarOpened( state ),
 		isPublishSidebarOpen: isPublishSidebarOpened( state ),
 		hasActiveMetaboxes: hasMetaBoxes( state ),
 		isSaving: isSavingMetaBoxes( state ),
 	} ),
 	{
-		onOpenGeneralSidebar: () => openGeneralSidebar( 'editor' ),
+		onOpenGeneralSidebar: openGeneralSidebar.bind( 'edit-post/document' ),
 		onCloseGeneralSidebar: closeGeneralSidebar,
 		onTogglePublishSidebar: togglePublishSidebar,
 	},

edit-post/components/layout/index.js

@@ -31,42 +31,32 @@ import MetaBoxes from '../meta-boxes';
 import { getMetaBoxContainer } from '../../utils/meta-boxes';
 import {
 	getEditorMode,
-	hasOpenSidebar,
+	getActiveGeneralSidebarName,
 	isFeatureActive,
-	getOpenedGeneralSidebar,
 	isPublishSidebarOpened,
-	getActivePlugin,
 	getMetaBoxes,
 } from '../../store/selectors';
 import { closePublishSidebar } from '../../store/actions';
 import PluginsPanel from '../../components/plugins-panel/index.js';
-import { getSidebarSettings } from '../../api/sidebar';
 
-function GeneralSidebar( { openedGeneralSidebar } ) {
-	switch ( openedGeneralSidebar ) {
-		case 'editor':
-			return <Sidebar />;
-		case 'plugin':
-			return <PluginsPanel />;
-		default:
+function GeneralSidebar( { sidebarName } ) {
+	if ( [ 'edit-post/document', 'edit-post/block' ].includes( sidebarName ) ) {
+		return <Sidebar />;
 	}
-	return null;
+
+	return <PluginsPanel />;
 }
 
 function Layout( {
 	mode,
-	layoutHasOpenSidebar,
+	activeGeneralSidebarName,
 	publishSidebarOpen,
-	openedGeneralSidebar,
 	hasFixedToolbar,
 	onClosePublishSidebar,
-	plugin,
 	metaBoxes,
 } ) {
-	const isSidebarOpened = layoutHasOpenSidebar &&
-		( openedGeneralSidebar !== 'plugin' || getSidebarSettings( plugin ) );
 	const className = classnames( 'edit-post-layout', {
-		'is-sidebar-opened': isSidebarOpened,
+		'is-sidebar-opened': activeGeneralSidebarName || publishSidebarOpen,
 		'has-fixed-toolbar': hasFixedToolbar,
 	} );
 
@@ -97,8 +87,8 @@ function Layout( {
 			</div>
 			{ publishSidebarOpen && <PostPublishPanel onClose={ onClosePublishSidebar } /> }
 			{
-				openedGeneralSidebar !== null && <GeneralSidebar
-					openedGeneralSidebar={ openedGeneralSidebar } />
+				activeGeneralSidebarName && <GeneralSidebar
+					sidebarName={ activeGeneralSidebarName } />
 			}
 			<Popover.Slot />
 		</div>
@@ -108,11 +98,9 @@ function Layout( {
 export default connect(
 	( state ) => ( {
 		mode: getEditorMode( state ),
-		layoutHasOpenSidebar: hasOpenSidebar( state ),
-		openedGeneralSidebar: getOpenedGeneralSidebar( state ),
+		activeGeneralSidebarName: getActiveGeneralSidebarName( state ),
 		publishSidebarOpen: isPublishSidebarOpened( state ),
 		hasFixedToolbar: isFeatureActive( state, 'fixedToolbar' ),
-		plugin: getActivePlugin( state ),
 		metaBoxes: getMetaBoxes( state ),
 	} ),
 	{

edit-post/components/plugins-panel/index.js

@@ -14,12 +14,10 @@ import { IconButton, withFocusReturn } from '@wordpress/components';
  */
 import './style.scss';
 import { getSidebarSettings } from '../../api/sidebar';
-import { getActivePlugin } from '../../store/selectors';
+import { getActiveGeneralSidebarName } from '../../store/selectors';
 import { closeGeneralSidebar } from '../../store/actions';
 
-function PluginsPanel( { onClose, plugin } ) {
-	const pluginSidebar = getSidebarSettings( plugin );
-
+function PluginsPanel( { onClose, pluginSidebar } ) {
 	if ( ! pluginSidebar ) {
 		return null;
 	}
@@ -53,7 +51,7 @@ function PluginsPanel( { onClose, plugin } ) {
 export default connect(
 	( state ) => {
 		return {
-			plugin: getActivePlugin( state ),
+			pluginSidebar: getSidebarSettings( getActiveGeneralSidebarName( state ) ),
 		};
 	}, {
 		onClose: closeGeneralSidebar,

edit-post/components/sidebar/header.js

@@ -14,31 +14,31 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal Dependencies
  */
-import { getActiveEditorPanel } from '../../store/selectors';
+import { getActiveGeneralSidebarName } from '../../store/selectors';
 import { closeGeneralSidebar, openGeneralSidebar } from '../../store/actions';
 
-const SidebarHeader = ( { panel, onSetPanel, onCloseSidebar, count } ) => {
+const SidebarHeader = ( { activeSidebarName, openSidebar, closeSidebar, count } ) => {
 	// Do not display "0 Blocks".
 	count = count === 0 ? 1 : count;
 
 	return (
 		<div className="components-panel__header edit-post-sidebar__panel-tabs">
 			<button
-				onClick={ () => onSetPanel( 'document' ) }
-				className={ `edit-post-sidebar__panel-tab ${ panel === 'document' ? 'is-active' : '' }` }
+				onClick={ () => openSidebar( 'edit-post/document' ) }
+				className={ `edit-post-sidebar__panel-tab ${ activeSidebarName === 'edit-post/document' ? 'is-active' : '' }` }
 				aria-label={ __( 'Document settings' ) }
 			>
 				{ __( 'Document' ) }
 			</button>
 			<button
-				onClick={ () => onSetPanel( 'block' ) }
-				className={ `edit-post-sidebar__panel-tab ${ panel === 'block' ? 'is-active' : '' }` }
+				onClick={ () => openSidebar( 'edit-post/block' ) }
+				className={ `edit-post-sidebar__panel-tab ${ activeSidebarName === 'edit-post/block' ? 'is-active' : '' }` }
 				aria-label={ __( 'Block settings' ) }
 			>
 				{ sprintf( _n( 'Block', '%d Blocks', count ), count ) }
 			</button>
 			<IconButton
-				onClick={ onCloseSidebar }
+				onClick={ closeSidebar }
 				icon="no-alt"
 				label={ __( 'Close settings' ) }
 			/>
@@ -52,11 +52,11 @@ export default compose(
 	} ) ),
 	connect(
 		( state ) => ( {
-			panel: getActiveEditorPanel( state ),
+			activeSidebarName: getActiveGeneralSidebarName( state ),
 		} ),
 		{
-			onSetPanel: openGeneralSidebar.bind( null, 'editor' ),
-			onCloseSidebar: closeGeneralSidebar,
+			openSidebar: openGeneralSidebar,
+			closeSidebar: closeGeneralSidebar,
 		},
 		undefined,
 		{ storeKey: 'edit-post' }

edit-post/components/sidebar/index.js

@@ -16,7 +16,7 @@ import './style.scss';
 import PostSettings from './post-settings';
 import BlockInspectorPanel from './block-inspector-panel';
 import Header from './header';
-import { getActiveEditorPanel } from '../../store/selectors';
+import { getActiveGeneralSidebarName } from '../../store/selectors';
 
 /**
  * Returns the panel that should be rendered in the sidebar.
@@ -27,9 +27,9 @@ import { getActiveEditorPanel } from '../../store/selectors';
  */
 function getPanel( panel ) {
 	switch ( panel ) {
-		case 'document':
+		case 'edit-post/document':
 			return PostSettings;
-		case 'block':
+		case 'edit-post/block':
 			return BlockInspectorPanel;
 		default:
 			return PostSettings;
@@ -43,12 +43,8 @@ function getPanel( panel ) {
  *
  * @return {Object} The rendered sidebar.
  */
-const Sidebar = ( { panel } ) => {
-	const ActivePanel = getPanel( panel );
-
-	const props = {
-		panel,
-	};
+const Sidebar = ( { activeSidebarName } ) => {
+	const ActivePanel = getPanel( activeSidebarName );
 
 	return (
 		<div
@@ -58,15 +54,15 @@ const Sidebar = ( { panel } ) => {
 			tabIndex="-1"
 		>
 			<Header />
-			<ActivePanel { ...props } />
+			<ActivePanel panel={ activeSidebarName } />
 		</div>
 	);
 };
 
 export default connect(
 	( state ) => {
 		return {
-			panel: getActiveEditorPanel( state ),
+			activeSidebarName: getActiveGeneralSidebarName( state ),
 		};
 	},
 	undefined,

edit-post/components/visual-editor/block-inspector-button.js

@@ -13,26 +13,26 @@ import { IconButton, withSpokenMessages } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { getActiveEditorPanel, isGeneralSidebarPanelOpened } from '../../store/selectors';
+import { getActiveGeneralSidebarName, isEditorSidebarOpened } from '../../store/selectors';
 import { openGeneralSidebar } from '../../store/actions';
 
 export function BlockInspectorButton( {
-	isGeneralSidebarEditorOpened,
+	isEditorSidebarOpen,
 	onOpenGeneralSidebarEditor,
-	panel,
+	activeSidebarName,
 	onClick = noop,
 	small = false,
 	speak,
 } ) {
 	const speakMessage = () => {
-		if ( ! isGeneralSidebarEditorOpened || ( isGeneralSidebarEditorOpened && panel !== 'block' ) ) {
+		if ( ! isEditorSidebarOpen || ( isEditorSidebarOpen && activeSidebarName !== 'edit-post/block' ) ) {
 			speak( __( 'Additional settings are now available in the Editor advanced settings sidebar' ) );
 		} else {
 			speak( __( 'Advanced settings closed' ) );
 		}
 	};
 
-	const label = ( isGeneralSidebarEditorOpened && panel === 'block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
+	const label = ( isEditorSidebarOpen && activeSidebarName === 'edit-post/block' ) ? __( 'Hide Advanced Settings' ) : __( 'Show Advanced Settings' );
 
 	return (
 		<IconButton
@@ -48,12 +48,12 @@ export function BlockInspectorButton( {
 
 export default connect(
 	( state ) => ( {
-		isGeneralSidebarEditorOpened: isGeneralSidebarPanelOpened( state, 'editor' ),
-		panel: getActiveEditorPanel( state ),
+		isEditorSidebarOpen: isEditorSidebarOpened( state ),
+		activeSidebarName: getActiveGeneralSidebarName( state ),
 	} ),
 	( dispatch ) => ( {
 		onOpenGeneralSidebarEditor() {
-			dispatch( openGeneralSidebar( 'editor', 'block' ) );
+			dispatch( openGeneralSidebar( 'edit-post/block' ) );
 		},
 	} ),
 	undefined,

edit-post/store/actions.js

@@ -1,15 +1,13 @@
 /**
- * Returns an action object used in signalling that the user opened a sidebar.
+ * Returns an action object used in signalling that the user opened an editor sidebar.
  *
- * @param {string} sidebar        Sidebar to open.
- * @param {string} [panel = null] Panel to open in the sidebar. Null if unchanged.
- * @return {Object}              Action object.
+ * @param {string} name        Sidebar name to be opened.
+ * @return {Object}            Action object.
  */
-export function openGeneralSidebar( sidebar, panel = null ) {
+export function openGeneralSidebar( name ) {
 	return {
 		type: 'OPEN_GENERAL_SIDEBAR',
-		sidebar,
-		panel,
+		name,
 	};
 }
 

edit-post/store/defaults.js

@@ -1,10 +1,6 @@
 export const PREFERENCES_DEFAULTS = {
 	editorMode: 'visual',
-	activeGeneralSidebar: 'editor', // null | 'editor' | 'plugin'
-	activeSidebarPanel: { // The keys in this object should match activeSidebarPanel values
-		editor: null, // 'document' | 'block'
-		plugin: null, // pluginId
-	},
+	activeGeneralSidebar: 'edit-post/document', // null | 'edit-post/block' | 'edit-post/document' | 'plugin/*'
 	panels: { 'post-status': true },
 	features: {
 		fixedToolbar: false,

edit-post/store/reducer.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { combineReducers } from 'redux';
-import { get, omit } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * Internal dependencies
@@ -23,14 +23,9 @@ import { PREFERENCES_DEFAULTS } from './defaults';
 export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 	switch ( action.type ) {
 		case 'OPEN_GENERAL_SIDEBAR':
-			const activeSidebarPanel = action.panel ? action.panel : state.activeSidebarPanel[ action.sidebar ];
 			return {
 				...state,
-				activeGeneralSidebar: action.sidebar,
-				activeSidebarPanel: {
-					...state.activeSidebarPanel,
-					[ action.sidebar ]: activeSidebarPanel,
-				},
+				activeGeneralSidebar: action.name,
 			};
 		case 'CLOSE_GENERAL_SIDEBAR':
 			return {
@@ -59,13 +54,13 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 				},
 			};
 		case 'SERIALIZE':
-			return omit( state, [ 'sidebars.mobile', 'sidebars.publish' ] );
+			return state;
 	}
 
 	return state;
 }
 
-export function panel( state = 'document', action ) {
+export function panel( state = 'edit-post/document', action ) {
 	switch ( action.type ) {
 		case 'SET_ACTIVE_PANEL':
 			return action.panel;