From 73422e933bb9c85c62839778f9c7dde5a06dae0a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Aug 2017 12:23:50 +0100 Subject: [PATCH 1/6] Editor: Persist the selected editor mode accross reloads --- editor/reducer.js | 22 ++++++++++------------ editor/selectors.js | 2 +- editor/test/reducer.js | 29 ++++++++++------------------- editor/test/selectors.js | 18 +++++++++++++----- editor/test/store.js | 1 - 5 files changed, 34 insertions(+), 38 deletions(-) diff --git a/editor/reducer.js b/editor/reducer.js index 6a8431fbe0265..698721cba42b3 100644 --- a/editor/reducer.js +++ b/editor/reducer.js @@ -426,22 +426,16 @@ export function showInsertionPoint( state = false, action ) { } /** - * Reducer returning current editor mode, either "visual" or "text". + * Reducer returning the user preferences: + * - current editor mode, either "visual" or "text". + * - whether the sidebar is opened or closed + * - The state of the different sidebar panels * * @param {string} state Current state * @param {Object} action Dispatched action * @return {string} Updated state */ -export function mode( state = 'visual', action ) { - switch ( action.type ) { - case 'SWITCH_MODE': - return action.mode; - } - - return state; -} - -export function preferences( state = { isSidebarOpened: ! isMobile, panels: { 'post-status': true } }, action ) { +export function preferences( state = { mode: 'visual', isSidebarOpened: ! isMobile, panels: { 'post-status': true } }, action ) { switch ( action.type ) { case 'TOGGLE_SIDEBAR': return { @@ -456,6 +450,11 @@ export function preferences( state = { isSidebarOpened: ! isMobile, panels: { 'p [ action.panel ]: ! get( state, [ 'panels', action.panel ], false ), }, }; + case 'SWITCH_MODE': + return { + ...state, + mode: action.mode, + }; } return state; @@ -530,7 +529,6 @@ export default optimist( combineReducers( { blockSelection, hoveredBlock, showInsertionPoint, - mode, preferences, panel, saving, diff --git a/editor/selectors.js b/editor/selectors.js index 5286bc8aa4e73..ffd0e99d6ea2e 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -19,7 +19,7 @@ import { addQueryArgs } from '@wordpress/url'; * @return {String} Editing mode */ export function getEditorMode( state ) { - return state.mode; + return state.preferences.mode || 'visual'; } /** diff --git a/editor/test/reducer.js b/editor/test/reducer.js index 4021da7b0ad93..472cf24455540 100644 --- a/editor/test/reducer.js +++ b/editor/test/reducer.js @@ -19,7 +19,6 @@ import { hoveredBlock, isTyping, blockSelection, - mode, preferences, saving, notices, @@ -784,28 +783,11 @@ describe( 'state', () => { } ); } ); - describe( 'mode()', () => { - it( 'should return "visual" by default', () => { - const state = mode( undefined, {} ); - - expect( state ).toBe( 'visual' ); - } ); - - it( 'should return switched mode', () => { - const state = mode( null, { - type: 'SWITCH_MODE', - mode: 'text', - } ); - - expect( state ).toBe( 'text' ); - } ); - } ); - describe( 'preferences()', () => { it( 'should be opened by default and show the post-status panel', () => { const state = preferences( undefined, {} ); - expect( state ).toEqual( { isSidebarOpened: true, panels: { 'post-status': true } } ); + expect( state ).toEqual( { mode: 'visual', isSidebarOpened: true, panels: { 'post-status': true } } ); } ); it( 'should toggle the sidebar open flag', () => { @@ -833,6 +815,15 @@ describe( 'state', () => { expect( state ).toEqual( { isSidebarOpened: false, panels: { 'post-taxonomies': false } } ); } ); + + it( 'should return switched mode', () => { + const state = preferences( { isSidebarOpened: false }, { + type: 'SWITCH_MODE', + mode: 'text', + } ); + + expect( state ).toEqual( { isSidebarOpened: false, mode: 'text' } ); + } ); } ); describe( 'saving()', () => { diff --git a/editor/test/selectors.js b/editor/test/selectors.js index 71f00db6768f3..2888a8747aaff 100644 --- a/editor/test/selectors.js +++ b/editor/test/selectors.js @@ -92,7 +92,15 @@ describe( 'selectors', () => { describe( 'getEditorMode', () => { it( 'should return the selected editor mode', () => { const state = { - mode: 'visual', + preferences: { mode: 'text' }, + }; + + expect( getEditorMode( state ) ).toEqual( 'text' ); + } ); + + it( 'should fallback to visual if not set', () => { + const state = { + preferences: {}, }; expect( getEditorMode( state ) ).toEqual( 'visual' ); @@ -1450,7 +1458,7 @@ describe( 'selectors', () => { describe( 'getBlockInsertionPoint', () => { it( 'should return the uid of the selected block', () => { const state = { - mode: 'visual', + preferences: { mode: 'visual' }, blockSelection: { start: 2, end: 2, @@ -1468,7 +1476,7 @@ describe( 'selectors', () => { it( 'should return the last multi selected uid', () => { const state = { - mode: 'visual', + preferences: { mode: 'visual' }, blockSelection: { start: 1, end: 2, @@ -1483,7 +1491,7 @@ describe( 'selectors', () => { it( 'should return the last block if no selection', () => { const state = { - mode: 'visual', + preferences: { mode: 'visual' }, blockSelection: { start: null, end: null }, editor: { blockOrder: [ 1, 2, 3 ], @@ -1495,7 +1503,7 @@ describe( 'selectors', () => { it( 'should return the last block for the text mode', () => { const state = { - mode: 'text', + preferences: { mode: 'text' }, blockSelection: { start: 2, end: 2 }, editor: { blockOrder: [ 1, 2, 3 ], diff --git a/editor/test/store.js b/editor/test/store.js index b05deb70b0a8e..d46d69675d3a8 100644 --- a/editor/test/store.js +++ b/editor/test/store.js @@ -23,7 +23,6 @@ describe( 'store', () => { 'isTyping', 'blockSelection', 'hoveredBlock', - 'mode', 'preferences', 'saving', 'showInsertionPoint', From 3915a4e6088507c77e6a341cdfd1df937efd50de Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Aug 2017 13:29:46 +0100 Subject: [PATCH 2/6] Preferences: Move the default preferences to a module const --- editor/reducer.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/editor/reducer.js b/editor/reducer.js index 698721cba42b3..4b91e5d20130e 100644 --- a/editor/reducer.js +++ b/editor/reducer.js @@ -15,7 +15,14 @@ import { getBlockTypes } from '@wordpress/blocks'; */ import { combineUndoableReducers } from './utils/undoable-reducer'; -const isMobile = window.innerWidth < 782; +/** + * Module constants + */ +const DEFAULT_PREFERENCES = { + mode: 'visual', + isSidebarOpened: window.innerWidth >= 782, + panels: { 'post-status': true }, +}; /** * Returns a post attribute value, flattening nested rendered content using its @@ -435,7 +442,7 @@ export function showInsertionPoint( state = false, action ) { * @param {Object} action Dispatched action * @return {string} Updated state */ -export function preferences( state = { mode: 'visual', isSidebarOpened: ! isMobile, panels: { 'post-status': true } }, action ) { +export function preferences( state = DEFAULT_PREFERENCES, action ) { switch ( action.type ) { case 'TOGGLE_SIDEBAR': return { From 2c2c9bc0328bab97d99b302e5102908c74d342cc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Mon, 28 Aug 2017 13:36:32 +0100 Subject: [PATCH 3/6] Chrome: Refactor togglePanel callback --- editor/sidebar/discussion-panel/index.js | 10 +++++++--- editor/sidebar/featured-image/index.js | 10 +++++----- editor/sidebar/page-attributes/index.js | 13 +++++-------- editor/sidebar/post-excerpt/index.js | 7 ++++--- editor/sidebar/post-status/index.js | 13 +++++-------- editor/sidebar/post-taxonomies/index.js | 14 ++++++-------- editor/sidebar/table-of-contents/index.js | 7 ++++--- 7 files changed, 36 insertions(+), 38 deletions(-) diff --git a/editor/sidebar/discussion-panel/index.js b/editor/sidebar/discussion-panel/index.js index 96e766c1377ac..b42a76b648d07 100644 --- a/editor/sidebar/discussion-panel/index.js +++ b/editor/sidebar/discussion-panel/index.js @@ -20,10 +20,9 @@ import { editPost, toggleSidebarPanel } from '../../actions'; */ const PANEL_NAME = 'discussion-panel'; -function DiscussionPanel( { pingStatus = 'open', commentStatus = 'open', instanceId, isOpened, ...props } ) { +function DiscussionPanel( { pingStatus = 'open', commentStatus = 'open', instanceId, isOpened, onTogglePanel, ...props } ) { const onTogglePingback = () => props.editPost( { ping_status: pingStatus === 'open' ? 'closed' : 'open' } ); const onToggleComments = () => props.editPost( { comment_status: commentStatus === 'open' ? 'closed' : 'open' } ); - const onTogglePanel = () => props.toggleSidebarPanel( PANEL_NAME ); const commentsToggleId = 'allow-comments-toggle-' + instanceId; const pingbacksToggleId = 'allow-pingbacks-toggle-' + instanceId; @@ -60,6 +59,11 @@ export default connect( isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ), }; }, - { editPost, toggleSidebarPanel } + { + editPost, + onTogglePanel() { + return toggleSidebarPanel( PANEL_NAME ); + }, + } )( withInstanceId( DiscussionPanel ) ); diff --git a/editor/sidebar/featured-image/index.js b/editor/sidebar/featured-image/index.js index a936787bf3f46..b46b49e9662c8 100644 --- a/editor/sidebar/featured-image/index.js +++ b/editor/sidebar/featured-image/index.js @@ -23,11 +23,9 @@ import { editPost, toggleSidebarPanel } from '../../actions'; */ const PANEL_NAME = 'featured-image'; -function FeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, isOpened, ...props } ) { - const onToggle = () => props.toggleSidebarPanel( PANEL_NAME ); - +function FeaturedImage( { featuredImageId, onUpdateImage, onRemoveImage, media, isOpened, onTogglePanel } ) { return ( - +
{ !! featuredImageId &&