Sidebar: Add a sidebar to hold the post settings and inspector (#449)

editor/assets/stylesheets/_variables.scss

@@ -40,6 +40,7 @@ $editor-font-size: 16px;
 $editor-line-height: 1.8em;
 $item-spacing: 10px;
 $header-height: 56px;
+$sidebar-width: 320px;
 $admin-bar-height: 32px;
 $admin-bar-height-big: 46px;
 $admin-sidebar-width: 160px;

editor/components/button/index.js

@@ -4,11 +4,12 @@
 import './style.scss';
 import classnames from 'classnames';
 
-function Button( { isPrimary, isLarge, className, ...additionalProps } ) {
+function Button( { isPrimary, isLarge, isToggled, className, ...additionalProps } ) {
 	const classes = classnames( 'editor-button', className, {
 		button: ( isPrimary || isLarge ),
 		'button-primary': isPrimary,
-		'button-large': isLarge
+		'button-large': isLarge,
+		'is-toggled': isToggled
 	} );
 
 	return (

editor/components/button/style.scss

@@ -1,8 +1,14 @@
 .editor-button {
 	background: none;
 	border: none;
+	outline: none;
 
 	&:disabled {
 		opacity: 0.6;
 	}
+
+	&.is-toggled {
+		background: $dark-gray-500;
+		color: $white;
+	}
 }

editor/header/tools/index.js

@@ -12,7 +12,7 @@ import IconButton from '../../components/icon-button';
 import Inserter from '../../components/inserter';
 import Button from '../../components/button';
 
-function Tools( { undo, redo, hasUndo, hasRedo } ) {
+function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar } ) {
 	return (
 		<div className="editor-tools">
 			<IconButton
@@ -31,7 +31,7 @@ function Tools( { undo, redo, hasUndo, hasRedo } ) {
 					<Dashicon icon="visibility" />
 					{ wp.i18n._x( 'Preview', 'imperative verb' ) }
 				</Button>
-				<Button>
+				<Button onClick={ toggleSidebar } isToggled={ isSidebarOpened }>
 					<Dashicon icon="admin-generic" />
 					{ wp.i18n.__( 'Post Settings' ) }
 				</Button>
@@ -46,10 +46,12 @@ function Tools( { undo, redo, hasUndo, hasRedo } ) {
 export default connect(
 	( state ) => ( {
 		hasUndo: state.blocks.history.past.length > 0,
-		hasRedo: state.blocks.history.future.length > 0
+		hasRedo: state.blocks.history.future.length > 0,
+		isSidebarOpened: state.isSidebarOpened,
 	} ),
 	( dispatch ) => ( {
 		undo: () => dispatch( { type: 'UNDO' } ),
-		redo: () => dispatch( { type: 'REDO' } )
+		redo: () => dispatch( { type: 'REDO' } ),
+		toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } )
 	} )
 )( Tools );

editor/header/tools/style.scss

@@ -20,6 +20,9 @@
 		color: $dark-gray-500;
 		margin-right: $item-spacing;
 		cursor: pointer;
+		height: 30px;
+		padding: 0 10px;
+		border-radius: 3px;
 
 		&:hover {
 			color: $blue-medium;

editor/layout/index.js

@@ -2,24 +2,35 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
  */
+import './style.scss';
 import Header from 'header';
+import Sidebar from 'sidebar';
 import TextEditor from 'modes/text-editor';
 import VisualEditor from 'modes/visual-editor';
 
-function Layout( { mode } ) {
+function Layout( { mode, isSidebarOpened } ) {
+	const className = classnames( 'editor-layout', {
+		'is-sidebar-opened': isSidebarOpened
+	} );
+
 	return (
-		<div>
+		<div className={ className }>
 			<Header />
-			{ mode === 'text' && <TextEditor /> }
-			{ mode === 'visual' && <VisualEditor /> }
+			<div className="editor-layout__content">
+				{ mode === 'text' && <TextEditor /> }
+				{ mode === 'visual' && <VisualEditor /> }
+			</div>
+			{ isSidebarOpened && <Sidebar /> }
 		</div>
 	);
 }
 
 export default connect( ( state ) => ( {
-	mode: state.mode
+	mode: state.mode,
+	isSidebarOpened: state.isSidebarOpened
 } ) )( Layout );

editor/layout/style.scss

@@ -0,0 +1,3 @@
+.editor-layout.is-sidebar-opened .editor-layout__content {
+	margin-right: $sidebar-width;
+}

editor/modes/text-editor/style.scss

@@ -36,6 +36,10 @@
 
 	@include break-small() {
 		position: fixed;
+
+		.editor-layout.is-sidebar-opened & {
+			margin-right: $sidebar-width;
+		}
 	}
 }
 

editor/sidebar/index.js

@@ -0,0 +1,13 @@
+/**
+ * Internal Dependencies
+ */
+import './style.scss';
+
+const Sidebar = () => {
+	return (
+		<div className="editor-sidebar">
+		</div>
+	);
+};
+
+export default Sidebar;

editor/sidebar/style.scss

@@ -0,0 +1,9 @@
+.editor-sidebar {
+	position: fixed;
+	right: 0;
+	top: 32px + $header-height;
+	bottom: 0;
+	width: $sidebar-width;
+	border-left: 1px solid $light-gray-500;
+	background: $light-gray-300;
+}

editor/state.js

@@ -154,6 +154,15 @@ export function mode( state = 'visual', action ) {
 	return state;
 }
 
+export function isSidebarOpened( state = false, action ) {
+	switch ( action.type ) {
+		case 'TOGGLE_SIDEBAR':
+			return ! state;
+	}
+
+	return state;
+}
+
 /**
  * Creates a new instance of a Redux store.
  *
@@ -164,7 +173,8 @@ export function createReduxStore() {
 		blocks,
 		selectedBlock,
 		hoveredBlock,
-		mode
+		mode,
+		isSidebarOpened
 	} );
 
 	return createStore(

editor/test/state.js

@@ -12,6 +12,7 @@ import {
 	hoveredBlock,
 	selectedBlock,
 	mode,
+	isSidebarOpened,
 	createReduxStore
 } from '../state';
 
@@ -303,6 +304,22 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'isSidebarOpened()', () => {
+		it( 'should be closed by default', () => {
+			const state = isSidebarOpened( undefined, {} );
+
+			expect( state ).to.be.false();
+		} );
+
+		it( 'should toggle the sidebar open flag', () => {
+			const state = isSidebarOpened( false, {
+				type: 'TOGGLE_SIDEBAR'
+			} );
+
+			expect( state ).to.be.true();
+		} );
+	} );
+
 	describe( 'createReduxStore()', () => {
 		it( 'should return a redux store', () => {
 			const store = createReduxStore();
@@ -319,7 +336,8 @@ describe( 'state', () => {
 				'blocks',
 				'selectedBlock',
 				'hoveredBlock',
-				'mode'
+				'mode',
+				'isSidebarOpened'
 			] );
 		} );
 	} );