From 83512b808b9a5acb17c7c9f77ecf114050c7adbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Mon, 10 Jul 2017 13:29:00 +0100 Subject: [PATCH] Add sidebar tabs to switch between doc and block settings. --- editor/header/tools/index.js | 2 +- editor/selectors.js | 10 +++++ editor/sidebar/block-inspector/index.js | 3 +- editor/sidebar/header.js | 54 +++++++++++++++++++++++++ editor/sidebar/index.js | 11 +++-- editor/sidebar/post-settings/index.js | 13 ------ editor/sidebar/style.scss | 11 +++++ editor/state.js | 10 +++++ 8 files changed, 94 insertions(+), 20 deletions(-) create mode 100644 editor/sidebar/header.js diff --git a/editor/header/tools/index.js b/editor/header/tools/index.js index b67baa96612a3..2fc32fd7b1716 100644 --- a/editor/header/tools/index.js +++ b/editor/header/tools/index.js @@ -39,7 +39,7 @@ function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar }
- { __( 'Post Settings' ) } + { __( 'Settings' ) }
diff --git a/editor/selectors.js b/editor/selectors.js index 8daa56fab0043..d3eb0927260a9 100644 --- a/editor/selectors.js +++ b/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. * diff --git a/editor/sidebar/block-inspector/index.js b/editor/sidebar/block-inspector/index.js index 5f9a1ca4c8f7b..f4e3488057c8f 100644 --- a/editor/sidebar/block-inspector/index.js +++ b/editor/sidebar/block-inspector/index.js @@ -20,7 +20,7 @@ import { getSelectedBlock } from '../../selectors'; const BlockInspector = ( { selectedBlock, ...props } ) => { if ( ! selectedBlock ) { - return null; + return { __( 'No block selected.' ) }; } const blockType = getBlockType( selectedBlock.name ); @@ -42,7 +42,6 @@ const BlockInspector = ( { selectedBlock, ...props } ) => { return ( - diff --git a/editor/sidebar/header.js b/editor/sidebar/header.js new file mode 100644 index 0000000000000..e6cdb29591f2b --- /dev/null +++ b/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 ( +
+

onSelectMode( 'document' ) } + className={ `editor-sidebar__mode-tab ${ mode === 'document' ? 'is-active' : '' }` } + > + { __( 'Document' ) } +

+

onSelectMode( 'block' ) } + className={ `editor-sidebar__mode-tab ${ mode === 'block' ? 'is-active' : '' }` } + > + { __( 'Block' ) } +

+ +
+ ); +}; + +export default connect( + ( state ) => ( { + mode: getSidebarMode( state ), + } ), + ( dispatch ) => ( { + onSelectMode( mode ) { + dispatch( { + type: 'SELECT_SIDEBAR_MODE', + sidebarMode: mode, + } ); + }, + toggleSidebar: () => dispatch( { type: 'TOGGLE_SIDEBAR' } ), + } ) +)( SidebarHeader ); diff --git a/editor/sidebar/index.js b/editor/sidebar/index.js index d97c55abed3e6..5b7bcb528fa9e 100644 --- a/editor/sidebar/index.js +++ b/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 (
- { ! selectedBlock && } - { selectedBlock && } +
+ { sidebarMode === 'document' && } + { sidebarMode === 'block' && }
); }; @@ -29,6 +31,7 @@ export default connect( ( state ) => { return { selectedBlock: getSelectedBlock( state ), + sidebarMode: getSidebarMode( state ), }; } )( withFocusReturn( Sidebar ) ); diff --git a/editor/sidebar/post-settings/index.js b/editor/sidebar/post-settings/index.js index 7d939a44e4217..0fba8db7c0f96 100644 --- a/editor/sidebar/post-settings/index.js +++ b/editor/sidebar/post-settings/index.js @@ -23,19 +23,6 @@ import LastRevision from '../last-revision'; const PostSettings = ( { toggleSidebar } ) => { return ( - -
- - -
- diff --git a/editor/sidebar/style.scss b/editor/sidebar/style.scss index 71b58f3899c1e..31a64483a18e7 100644 --- a/editor/sidebar/style.scss +++ b/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; + } +} diff --git a/editor/state.js b/editor/state.js index ff8915a780c18..5078c937c4db5 100644 --- a/editor/state.js +++ b/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, } ) );