diff --git a/editor/reducer.js b/editor/reducer.js index 8f62d685fe5b7..f7b02ff028e65 100644 --- a/editor/reducer.js +++ b/editor/reducer.js @@ -3,7 +3,6 @@ */ import optimist from 'redux-optimist'; import { combineReducers } from 'redux'; -import { createResponsiveStateReducer } from 'redux-responsive'; import { flow, partialRight, @@ -33,14 +32,6 @@ import { getBlockTypes, getBlockType } from '@wordpress/blocks'; import withHistory from './utils/with-history'; import withChangeDetection from './utils/with-change-detection'; import { PREFERENCES_DEFAULTS } from './store-defaults'; -import { - BREAK_HUGE, - BREAK_WIDE, - BREAK_LARGE, - BREAK_MEDIUM, - BREAK_SMALL, - BREAK_MOBILE, -} from './constants'; /*** * Module constants @@ -718,15 +709,12 @@ export function metaBoxes( state = defaultMetaBoxState, action ) { } } -// Create responsive reducer with the breakpoints imported from the scss variables file. -const responsive = createResponsiveStateReducer( { - mobile: BREAK_MOBILE, - small: BREAK_SMALL, - medium: BREAK_MEDIUM, - large: BREAK_LARGE, - wide: BREAK_WIDE, - huge: BREAK_HUGE, -} ); +export function browser( state = {}, action ) { + if ( action.type === 'BROWSER_RESIZE' ) { + return { width: action.width, height: action.height }; + } + return state; +} export const reusableBlocks = combineReducers( { data( state = {}, action ) { @@ -807,6 +795,6 @@ export default optimist( combineReducers( { saving, notices, metaBoxes, - responsive, + browser, reusableBlocks, } ) ); diff --git a/editor/selectors.js b/editor/selectors.js index 1680becf51fdb..565452ba2c184 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -26,6 +26,7 @@ import { addQueryArgs } from '@wordpress/url'; * Internal dependencies */ import { POST_UPDATE_TRANSACTION_ID } from './effects'; +import { BREAK_MEDIUM } from './constants'; /*** * Module constants @@ -209,7 +210,7 @@ export function isCleanNewPost( state ) { * @return {Boolean} Whether current window size corresponds to mobile resolutions */ export function isMobile( state ) { - return ! state.responsive.greaterThan.medium; + return state.browser.width < BREAK_MEDIUM; } /** diff --git a/editor/store-browser-enhancer.js b/editor/store-browser-enhancer.js new file mode 100644 index 0000000000000..91d9a2515e726 --- /dev/null +++ b/editor/store-browser-enhancer.js @@ -0,0 +1,25 @@ +/** + * External dependencies + */ +import { throttle } from 'lodash'; + +/** + * Enhance a redux store with the browser size + * + * @param {Object} store Redux Store + */ +function enhanceWithBrowserSize( store ) { + const updateSize = throttle( () => { + store.dispatch( { + type: 'BROWSER_RESIZE', + width: window.innerWidth, + height: window.innerHeight, + } ); + }, 100 ); + + window.addEventListener( 'resize', updateSize ); + window.addEventListener( 'orientationchange', updateSize ); + updateSize(); +} + +export default enhanceWithBrowserSize; diff --git a/editor/store.js b/editor/store.js index 2b7ed59612678..7a0edcc4a1ccd 100644 --- a/editor/store.js +++ b/editor/store.js @@ -5,7 +5,6 @@ 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 @@ -15,6 +14,7 @@ import { mobileMiddleware } from './utils/mobile'; import reducer from './reducer'; import storePersist from './store-persist'; import { PREFERENCES_DEFAULTS } from './store-defaults'; +import enhanceWithBrowserSize from './store-browser-enhancer'; /** * Module constants @@ -30,7 +30,6 @@ const GUTENBERG_PREFERENCES_KEY = `GUTENBERG_PREFERENCES_${ window.userSettings. function createReduxStore( preloadedState ) { const enhancers = [ applyMiddleware( multi, refx( effects ) ), - responsiveStoreEnhancer, storePersist( { reducerKey: 'preferences', storageKey: GUTENBERG_PREFERENCES_KEY, @@ -44,6 +43,7 @@ function createReduxStore( preloadedState ) { } const store = createStore( reducer, preloadedState, flowRight( enhancers ) ); + enhanceWithBrowserSize( store ); return store; } diff --git a/editor/test/selectors.js b/editor/test/selectors.js index 162588c35c7a5..f444c5d7552a7 100644 --- a/editor/test/selectors.js +++ b/editor/test/selectors.js @@ -84,6 +84,10 @@ import { } from '../selectors'; import { POST_UPDATE_TRANSACTION_ID } from '../effects'; +jest.mock( '../constants', () => ( { + BREAK_MEDIUM: 500, +} ) ); + describe( 'selectors', () => { beforeAll( () => { registerBlockType( 'core/test-block', { @@ -324,10 +328,8 @@ describe( 'selectors', () => { describe( 'isEditorSidebarOpened', () => { it( 'should return true when is not mobile and the normal sidebar is opened', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, preferences: { isSidebarOpened: true, @@ -340,10 +342,8 @@ describe( 'selectors', () => { it( 'should return false when is not mobile and the normal sidebar is closed', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, preferences: { isSidebarOpened: false, @@ -355,10 +355,8 @@ describe( 'selectors', () => { it( 'should return true when is mobile and the mobile sidebar is opened', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, preferences: { isSidebarOpened: false, @@ -371,10 +369,8 @@ describe( 'selectors', () => { it( 'should return false when is mobile and the mobile sidebar is closed', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, preferences: { isSidebarOpened: true, @@ -605,10 +601,8 @@ describe( 'selectors', () => { describe( 'isMobile', () => { it( 'should return true if resolution is equal or less than medium breakpoint', () => { const state = { - responsive: { - greaterThan: { - medium: false, - }, + browser: { + width: 100, }, }; @@ -617,10 +611,8 @@ describe( 'selectors', () => { it( 'should return true if resolution is greater than medium breakpoint', () => { const state = { - responsive: { - greaterThan: { - medium: true, - }, + browser: { + width: 1000, }, }; diff --git a/package-lock.json b/package-lock.json index 8ba87c3552025..0438e1861dd82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7405,11 +7405,6 @@ "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=", "dev": true }, - "mediaquery": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/mediaquery/-/mediaquery-0.0.3.tgz", - "integrity": "sha1-OH1hwQqpX/TWkH9qq90i16iY4D4=" - }, "mem": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz", @@ -9252,14 +9247,6 @@ "resolved": "https://registry.npmjs.org/redux-optimist/-/redux-optimist-0.0.2.tgz", "integrity": "sha1-cNoX6GPFOoYE1YHKIKJpCL2haX4=" }, - "redux-responsive": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/redux-responsive/-/redux-responsive-4.3.4.tgz", - "integrity": "sha1-/PbcMCUKyIKrXoYCK6XGp8hJkYs=", - "requires": { - "mediaquery": "0.0.3" - } - }, "refx": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/refx/-/refx-2.1.0.tgz", diff --git a/package.json b/package.json index 7b5392c94d239..dacd2368124c0 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "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",