Added redux-resposive usage to implement automatic side disabling whe…

…n resizing to small sizes.

editor/layout/index.js

@@ -30,47 +30,11 @@ import {
 	getNotices,
 } from '../selectors';
 
-const MOBILE_WIDTH = 762;
-
 class Layout extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onUpdateDimensions = this.onUpdateDimensions.bind( this );
-		this.saveLastWindowWidth = this.saveLastWindowWidth.bind( this );
-		this.state = {
-			lastWindowWidth: null,
-		};
-	}
-
-	saveLastWindowWidth() {
-		this.setState( {
-			lastWindowWidth: window.innerWidth,
-		} );
-	}
-
-	onUpdateDimensions() {
-		if ( this.props.isSidebarOpened &&
-			this.state.lastWindowWidth > MOBILE_WIDTH &&
-			window.innerWidth < MOBILE_WIDTH
-		) {
+	componentWillReceiveProps( nextProps ) {
+		if ( nextProps.isSidebarOpened && nextProps.isMobile && ! this.props.isMobile ) {
 			this.props.toggleSidebar();
 		}
-		this.saveLastWindowWidth();
-	}
-
-	componentDidMount() {
-		if ( window ) {
-			if ( ! this.state.lastWindowWidth ) {
-				this.saveLastWindowWidth();
-			}
-			window.addEventListener( 'resize', this.onUpdateDimensions );
-		}
-	}
-
-	componentWillUnmount() {
-		if ( window ) {
-			window.removeEventListener( 'resize', this.onUpdateDimensions );
-		}
 	}
 
 	render() {
@@ -106,6 +70,7 @@ export default connect(
 		mode: getEditorMode( state ),
 		isSidebarOpened: isEditorSidebarOpened( state ),
 		notices: getNotices( state ),
+		isMobile: ! state.responsive.greaterThan.small,
 	} ),
 	{ removeNotice, toggleSidebar }
 )( navigateRegions( Layout ) );

editor/reducer.js

@@ -3,6 +3,7 @@
  */
 import optimist from 'redux-optimist';
 import { combineReducers } from 'redux';
+import { createResponsiveStateReducer } from 'redux-responsive';
 import {
 	difference,
 	get,
@@ -637,6 +638,14 @@ export function metaBoxes( state = defaultMetaBoxState, action ) {
 	}
 }
 
+// Create responsive reducer with lib default breakpoints excluding small where we are currently using 782.
+const responsive = createResponsiveStateReducer( {
+	extraSmall: 480,
+	small: 782,
+	medium: 992,
+	large: 1200,
+} );
+
 export default optimist( combineReducers( {
 	editor,
 	currentPost,
@@ -650,4 +659,5 @@ export default optimist( combineReducers( {
 	saving,
 	notices,
 	metaBoxes,
+	responsive,
 } ) );

editor/store.js

@@ -5,6 +5,7 @@ import { applyMiddleware, createStore } from 'redux';
 import refx from 'refx';
 import multi from 'redux-multi';
 import { flowRight } from 'lodash';
+import { responsiveStoreEnhancer } from 'redux-responsive';
 
 /**
  * Internal dependencies
@@ -27,6 +28,7 @@ function createReduxStore() {
 	const enhancers = [
 		applyMiddleware( multi, refx( effects ) ),
 		storePersist( 'preferences', GUTENBERG_PREFERENCES_KEY ),
+		responsiveStoreEnhancer,
 	];
 
 	if ( window.__REDUX_DEVTOOLS_EXTENSION__ ) {

package.json

@@ -41,6 +41,7 @@
     "redux": "3.7.2",
     "redux-multi": "0.1.12",
     "redux-optimist": "0.0.2",
+    "redux-responsive": "4.3.4",
     "refx": "2.1.0",
     "rememo": "2.3.3",
     "showdown": "1.7.4",