Editor: Persist the selected editor mode across reloads

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
@@ -426,22 +433,16 @@ export function showInsertionPoint( state = false, action ) {
 }
 
 /**
- * Reducer returning current editor mode, either "visual" or "text".
+ * Reducer returning the user preferences:
  *
- * @param  {string} state  Current state
- * @param  {Object} action Dispatched action
- * @return {string}        Updated state
+ * @param  {Object}  state                 Current state
+ * @param  {string}  state.mode            Current editor mode, either "visual" or "text".
+ * @param  {Boolean} state.isSidebarOpened Whether the sidebar is opened or closed
+ * @param  {Object}  state.panels          The state of the different sidebar panels
+ * @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 = DEFAULT_PREFERENCES, action ) {
 	switch ( action.type ) {
 		case 'TOGGLE_SIDEBAR':
 			return {
@@ -456,6 +457,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 +536,6 @@ export default optimist( combineReducers( {
 	blockSelection,
 	hoveredBlock,
 	showInsertionPoint,
-	mode,
 	preferences,
 	panel,
 	saving,

editor/selectors.js

@@ -19,7 +19,7 @@ import { addQueryArgs } from '@wordpress/url';
  * @return {String}       Editing mode
  */
 export function getEditorMode( state ) {
-	return state.mode;
+	return getPreference( state, 'mode', 'visual' );
 }
 
 /**
@@ -46,11 +46,13 @@ export function getPreferences( state ) {
  *
  * @param  {Object}  state          Global application state
  * @param  {String}  preferenceKey  Preference Key
+ * @param  {Mixed}   defaultValue   Default Value
  * @return {Mixed}                  Preference Value
  */
-export function getPreference( state, preferenceKey ) {
+export function getPreference( state, preferenceKey, defaultValue ) {
 	const preferences = getPreferences( state );
-	return preferences[ preferenceKey ];
+	const value = preferences[ preferenceKey ];
+	return value === undefined ? defaultValue : value;
 }
 
 /**

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 ) );
 

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 (
-		<PanelBody title={ __( 'Featured image' ) } opened={ isOpened } onToggle={ onToggle }>
+		<PanelBody title={ __( 'Featured image' ) } opened={ isOpened } onToggle={ onTogglePanel }>
 			<div className="editor-featured-image__content">
 				{ !! featuredImageId &&
 					<MediaUploadButton
@@ -84,7 +82,9 @@ const applyConnect = connect(
 		onRemoveImage() {
 			return editPost( { featured_media: null } );
 		},
-		toggleSidebarPanel,
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
 	}
 );
 

editor/sidebar/page-attributes/index.js

@@ -27,7 +27,6 @@ export class PageAttributes extends Component {
 		super( ...arguments );
 
 		this.setUpdatedOrder = this.setUpdatedOrder.bind( this );
-		this.onToggle = this.onToggle.bind( this );
 
 		this.state = {
 			supportsPageAttributes: false,
@@ -41,12 +40,8 @@ export class PageAttributes extends Component {
 		}
 	}
 
-	onToggle() {
-		this.props.toggleSidebarPanel( PANEL_NAME );
-	}
-
 	render() {
-		const { instanceId, order, postType, isOpened } = this.props;
+		const { instanceId, order, postType, isOpened, onTogglePanel } = this.props;
 		const supportsPageAttributes = get( postType.data, [
 			'supports',
 			'page-attributes',
@@ -64,7 +59,7 @@ export class PageAttributes extends Component {
 			<PanelBody
 				title={ __( 'Page Attributes' ) }
 				opened={ isOpened }
-				onToggle={ this.onToggle }
+				onToggle={ onTogglePanel }
 			>
 				<PanelRow>
 					<label htmlFor={ inputId }>
@@ -96,7 +91,9 @@ const applyConnect = connect(
 				menu_order: order,
 			} );
 		},
-		toggleSidebarPanel,
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
 	}
 );
 

editor/sidebar/post-excerpt/index.js

@@ -21,9 +21,8 @@ import { editPost, toggleSidebarPanel } from '../../actions';
  */
 const PANEL_NAME = 'post-excerpt';
 
-function PostExcerpt( { excerpt, onUpdateExcerpt, isOpened, ...props } ) {
+function PostExcerpt( { excerpt, onUpdateExcerpt, isOpened, onTogglePanel } ) {
 	const onChange = ( event ) => onUpdateExcerpt( event.target.value );
-	const onTogglePanel = () => props.toggleSidebarPanel( PANEL_NAME );
 
 	return (
 		<PanelBody title={ __( 'Excerpt' ) } opened={ isOpened } onToggle={ onTogglePanel }>
@@ -52,7 +51,9 @@ export default connect(
 		onUpdateExcerpt( excerpt ) {
 			return editPost( { excerpt } );
 		},
-		toggleSidebarPanel,
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
 	}
 )( PostExcerpt );
 

editor/sidebar/post-status/index.js

@@ -35,7 +35,6 @@ class PostStatus extends Component {
 	constructor() {
 		super( ...arguments );
 		this.togglePendingStatus = this.togglePendingStatus.bind( this );
-		this.togglePanel = this.togglePanel.bind( this );
 	}
 
 	togglePendingStatus() {
@@ -44,16 +43,12 @@ class PostStatus extends Component {
 		onUpdateStatus( updatedStatus );
 	}
 
-	togglePanel() {
-		this.props.toggleSidebarPanel( PANEL_NAME );
-	}
-
 	render() {
-		const { status, isPublished, isOpened, instanceId } = this.props;
+		const { status, isPublished, isOpened, instanceId, onTogglePanel } = this.props;
 		const pendingId = 'pending-toggle-' + instanceId;
 
 		return (
-			<PanelBody title={ __( 'Status & Visibility' ) } opened={ isOpened } onToggle={ this.togglePanel }>
+			<PanelBody title={ __( 'Status & Visibility' ) } opened={ isOpened } onToggle={ onTogglePanel }>
 				{ ! isPublished &&
 					<PanelRow>
 						<label htmlFor={ pendingId }>{ __( 'Pending review' ) }</label>
@@ -86,7 +81,9 @@ export default connect(
 		onUpdateStatus( status ) {
 			return editPost( { status } );
 		},
-		toggleSidebarPanel,
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
 	}
 )( withInstanceId( PostStatus ) );
 

editor/sidebar/post-taxonomies/index.js

@@ -28,8 +28,6 @@ class PostTaxonomies extends Component {
 	constructor() {
 		super( ...arguments );
 
-		this.onToggle = this.onToggle.bind( this );
-
 		this.state = {
 			taxonomies: [],
 		};
@@ -47,10 +45,6 @@ class PostTaxonomies extends Component {
 		this.fetchTaxonomies.abort();
 	}
 
-	onToggle() {
-		this.props.toggleSidebarPanel( PANEL_NAME );
-	}
-
 	render() {
 		const availableTaxonomies = this.state.taxonomies
 			.filter( ( taxonomy ) => taxonomy.types.indexOf( this.props.postType ) !== -1 );
@@ -60,7 +54,11 @@ class PostTaxonomies extends Component {
 		}
 
 		return (
-			<PanelBody title={ __( 'Categories & Tags' ) } opened={ this.props.isOpened } onToggle={ this.onToggle }>
+			<PanelBody
+				title={ __( 'Categories & Tags' ) }
+				opened={ this.props.isOpened }
+				onToggle={ this.props.onTogglePanel }
+			>
 				{ availableTaxonomies.map( ( taxonomy ) => {
 					const TaxonomyComponent = taxonomy.hierarchical ? HierarchicalTermSelector : FlatTermSelector;
 					return (
@@ -84,6 +82,10 @@ export default connect(
 			isOpened: isEditorSidebarPanelOpened( state, PANEL_NAME ),
 		};
 	},
-	{ toggleSidebarPanel }
+	{
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
+	}
 )( PostTaxonomies );
 

editor/sidebar/table-of-contents/index.js

@@ -53,9 +53,8 @@ const getHeadingLevel = heading => {
 
 const isEmptyHeading = heading => ! heading.attributes.content || heading.attributes.content.length === 0;
 
-const TableOfContents = ( { blocks, onSelect, isOpened, ...props } ) => {
+const TableOfContents = ( { blocks, onSelect, isOpened, onTogglePanel } ) => {
 	const headings = filter( blocks, ( block ) => block.name === 'core/heading' );
-	const onTogglePanel = () => props.toggleSidebarPanel( PANEL_NAME );
 
 	if ( headings.length <= 1 ) {
 		return null;
@@ -117,6 +116,8 @@ export default connect(
 		onSelect( uid ) {
 			return selectBlock( uid );
 		},
-		toggleSidebarPanel,
+		onTogglePanel() {
+			return toggleSidebarPanel( PANEL_NAME );
+		},
 	}
 )( TableOfContents );

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( deepFreeze( { isSidebarOpened: false } ), {
+				type: 'SWITCH_MODE',
+				mode: 'text',
+			} );
+
+			expect( state ).toEqual( { isSidebarOpened: false, mode: 'text' } );
+		} );
 	} );
 
 	describe( 'saving()', () => {