Add sidebar tabs to switch between doc and block settings.

editor/header/tools/index.js

@@ -39,7 +39,7 @@ function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar }
 			<PreviewButton />
 			<div className="editor-tools__tabs">
 				<IconButton icon="admin-generic" onClick={ toggleSidebar } isToggled={ isSidebarOpened }>
-					{ __( 'Post Settings' ) }
+					{ __( 'Settings' ) }
 				</IconButton>
 			</div>
 			<PublishButton />

editor/selectors.js

@@ -20,6 +20,16 @@ export function getEditorMode( state ) {
 	return state.mode;
 }
 
+/**
+ * Returns the current sidebar mode.
+ *
+ * @param  {Object}  state Global application state
+ * @return {String}        Sidebar mode
+ */
+export function getSidebarMode( state ) {
+	return state.sidebarMode;
+}
+
 /**
  * Returns true if the editor sidebar panel is open, or false otherwise.
  *

editor/sidebar/block-inspector/index.js

@@ -20,7 +20,7 @@ import { getSelectedBlock } from '../../selectors';
 
 const BlockInspector = ( { selectedBlock, ...props } ) => {
 	if ( ! selectedBlock ) {
-		return null;
+		return <span>{ __( 'No block selected.' ) }</span>;
 	}
 
 	const blockType = getBlockType( selectedBlock.name );
@@ -42,7 +42,6 @@ const BlockInspector = ( { selectedBlock, ...props } ) => {
 
 	return (
 		<Panel>
-			<PanelHeader label={ header } />
 			<PanelBody>
 				<Slot name="Inspector.Controls" />
 			</PanelBody>

editor/sidebar/header.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+import { IconButton } from 'components';
+
+/**
+ * Internal Dependencies
+ */
+import { getSidebarMode } from 'editor/selectors';
+
+const SidebarHeader = ( { mode, onSelectMode, toggleSidebar } ) => {
+	return (
+		<div className="components-panel__header">
+			<h2
+				onClick={ () => onSelectMode( 'document' ) }
+				className={ `editor-sidebar__mode-tab ${ mode === 'document' ? 'is-active' : '' }` }
+			>
+				{ __( 'Document' ) }
+			</h2>
+			<h2
+				onClick={ () => onSelectMode( 'block' ) }
+				className={ `editor-sidebar__mode-tab ${ mode === 'block' ? 'is-active' : '' }` }
+			>
+				{ __( 'Block' ) }
+			</h2>
+			<IconButton
+				onClick={ toggleSidebar }
+				icon="no-alt"
+				label={ __( 'Close post settings sidebar' ) }
+			/>
+		</div>
+	);
+};
+
+export default connect(
+	( state ) => ( {
+		mode: getSidebarMode( state ),
+	} ),
+	( dispatch ) => ( {
+		onSelectMode( mode ) {
+			dispatch( {
+				type: 'SELECT_SIDEBAR_MODE',
+				sidebarMode: mode,
+			} );
+		},
+		toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } ),
+	} )
+)( SidebarHeader );

editor/sidebar/index.js

@@ -14,13 +14,15 @@ import { withFocusReturn } from 'components';
 import './style.scss';
 import PostSettings from './post-settings';
 import BlockInspector from './block-inspector';
-import { getSelectedBlock } from '../selectors';
+import Header from './header';
+import { getSelectedBlock, getSidebarMode } from '../selectors';
 
-const Sidebar = ( { selectedBlock } ) => {
+const Sidebar = ( { selectedBlock, sidebarMode } ) => {
 	return (
 		<div className="editor-sidebar">
-			{ ! selectedBlock && <PostSettings /> }
-			{ selectedBlock && <BlockInspector /> }
+			<Header />
+			{ sidebarMode === 'document' && <PostSettings /> }
+			{ sidebarMode === 'block' && <BlockInspector /> }
 		</div>
 	);
 };
@@ -29,6 +31,7 @@ export default connect(
 	( state ) => {
 		return {
 			selectedBlock: getSelectedBlock( state ),
+			sidebarMode: getSidebarMode( state ),
 		};
 	}
 )( withFocusReturn( Sidebar ) );

editor/sidebar/post-settings/index.js

@@ -23,19 +23,6 @@ import LastRevision from '../last-revision';
 const PostSettings = ( { toggleSidebar } ) => {
 	return (
 		<Panel>
-			<PanelHeader label={ __( 'Post Settings' ) } >
-				<div className="editor-sidebar-post-settings__icons">
-					<IconButton
-						icon="admin-settings"
-						label={ __( 'WordPress settings' ) }
-					/>
-					<IconButton
-						onClick={ toggleSidebar }
-						icon="no-alt"
-						label={ __( 'Close post settings sidebar' ) }
-					/>
-				</div>
-			</PanelHeader>
 			<PostStatus />
 			<LastRevision />
 			<PostTaxonomies />

editor/sidebar/style.scss

@@ -107,3 +107,14 @@
 .editor-layout.is-sidebar-opened .editor-text-editor__formatting {
 	margin-right: $sidebar-width;
 }
+
+.editor-sidebar__mode-tab {
+	border-bottom: 3px solid transparent;
+	cursor: pointer;
+	height: 50px;
+	line-height: 50px;
+	padding: 0 20px;
+	&.is-active {
+		border-bottom-color: $blue-medium-500;
+	}
+}

editor/state.js

@@ -428,6 +428,15 @@ export function isSidebarOpened( state = ! isMobile, action ) {
 	return state;
 }
 
+export function sidebarMode( state = 'document', action ) {
+	switch ( action.type ) {
+		case 'SELECT_SIDEBAR_MODE':
+			return action.sidebarMode;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning current network request state (whether a request to the WP
  * REST API is in progress, successful, or failed).
@@ -496,6 +505,7 @@ export function createReduxStore() {
 		showInsertionPoint,
 		mode,
 		isSidebarOpened,
+		sidebarMode,
 		saving,
 		notices,
 	} ) );