Don't load isSidebarOpened preference from localStorage on mobile.

editor/constants.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import scssVariables from '!!sass-variables-loader!./assets/stylesheets/_variables.scss';
+
+export const BREAK_HUGE = parseInt( scssVariables.breakHuge );
+export const BREAK_WIDE = parseInt( scssVariables.breakWide );
+export const BREAK_LARGE = parseInt( scssVariables.breakLarge );
+export const BREAK_MEDIUM = parseInt( scssVariables.breakMedium );
+export const BREAK_SMALL = parseInt( scssVariables.breakSmall );
+export const BREAK_MOBILE = parseInt( scssVariables.breakMobile );
+

editor/store.js

@@ -10,6 +10,7 @@ import { flowRight } from 'lodash';
  * Internal dependencies
  */
 import effects from './effects';
+import { mobileMiddleware } from './utils/mobile';
 import reducer from './reducer';
 import storePersist from './store-persist';
 
@@ -27,6 +28,7 @@ function createReduxStore() {
 	const enhancers = [
 		applyMiddleware( multi, refx( effects ) ),
 		storePersist( 'preferences', GUTENBERG_PREFERENCES_KEY ),
+		applyMiddleware( mobileMiddleware ),
 	];
 
 	if ( window.__REDUX_DEVTOOLS_EXTENSION__ ) {

editor/utils/mobile/index.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { BREAK_MEDIUM } from '../../constants';
+
+/**
+ * Checks if we are in a mobile resolution using window.innerWidth if available
+ *
+ * @return {Boolean}  Returns true if on mobile resolution and false if on non mobile or impossible to check.
+ */
+const isMobileChecker = () => 'object' === typeof window && window.innerWidth < BREAK_MEDIUM;
+
+/**
+ * Disables isSidebarOpened on rehydrate payload if the user is on a mobile screen size.
+ *
+ * @param  {Object}  payload   rehydrate payload
+ * @param  {Boolean} isMobile  flag indicating if executing on mobile screen sizes or not
+ *
+ * @return {Object}            rehydrate payload with isSidebarOpened disabled if on mobile
+ */
+export const disableIsSidebarOpenedOnMobile = ( payload, isMobile = isMobileChecker() ) => (
+	isMobile ? { ...payload, isSidebarOpened: false } : payload
+);
+
+/**
+ * Middleware
+ */
+
+export const mobileMiddleware = () => next => action => {
+	if ( action.type === 'REDUX_REHYDRATE' ) {
+		return next( {
+			type: 'REDUX_REHYDRATE',
+			payload: disableIsSidebarOpenedOnMobile( action.payload ),
+		} );
+	}
+	return next( action );
+};

editor/utils/mobile/test/mobile.js

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import { disableIsSidebarOpenedOnMobile } from '../';
+
+describe( 'disableIsSidebarOpenOnMobile()', () => {
+	it( 'should disable isSidebarOpen on mobile and keep other properties as before', () => {
+		const input = {
+				isSidebarOpened: true,
+				dummyPref: 'dummy',
+			},
+			output = {
+				isSidebarOpened: false,
+				dummyPref: 'dummy',
+			},
+			isMobile = true;
+
+		expect( disableIsSidebarOpenedOnMobile( input, isMobile ) ).toEqual( output );
+	} );
+
+	it( 'should keep isSidebarOpen on non-mobile and keep other properties as before', () => {
+		const input = {
+				isSidebarOpened: true,
+				dummy: 'non-dummy',
+			},
+			output = {
+				isSidebarOpened: true,
+				dummy: 'non-dummy',
+			},
+			isMobile = false;
+		expect( disableIsSidebarOpenedOnMobile( input, isMobile ) ).toEqual( output );
+	} );
+} );

package.json

@@ -85,6 +85,7 @@
     "react-markdown": "2.5.0",
     "react-test-renderer": "16.0.0",
     "sass-loader": "6.0.6",
+    "sass-variables-loader": "0.1.3",
     "style-loader": "0.18.2",
     "tinymce": "4.7.1",
     "webpack": "3.8.1"