diff --git a/editor/constants.js b/editor/constants.js new file mode 100644 index 0000000000000..5c1da342f0859 --- /dev/null +++ b/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 ); + diff --git a/editor/store.js b/editor/store.js index fa2e7db7dfc7c..20eb41ee57485 100644 --- a/editor/store.js +++ b/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__ ) { diff --git a/editor/utils/mobile/index.js b/editor/utils/mobile/index.js new file mode 100644 index 0000000000000..dd3617f4b2582 --- /dev/null +++ b/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 ); +}; diff --git a/editor/utils/mobile/test/mobile.js b/editor/utils/mobile/test/mobile.js new file mode 100644 index 0000000000000..94bb76bcee57a --- /dev/null +++ b/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 ); + } ); +} ); diff --git a/package.json b/package.json index aa8a53fbaf2d5..ca4445fedd654 100644 --- a/package.json +++ b/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"