Post Editor: Port editor to use viewport module

edit-post/components/header/fixed-toolbar-toggle/index.js

@@ -1,49 +1,41 @@
 /**
- * External Dependencies
+ * WordPress Dependencies
  */
-import { connect } from 'react-redux';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * WordPress Dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { compose } from '@wordpress/element';
 import { MenuItemsGroup, MenuItemsToggle, withInstanceId } from '@wordpress/components';
+import { ifViewportMatches } from '@wordpress/viewport';
 
-/**
- * Internal Dependencies
- */
-import { hasFixedToolbar, isMobile } from '../../../store/selectors';
-import { toggleFeature } from '../../../store/actions';
-
-function FeatureToggle( { onToggle, active, onMobile } ) {
-	if ( onMobile ) {
-		return null;
-	}
+function FeatureToggle( { onToggle, isActive } ) {
 	return (
 		<MenuItemsGroup
 			label={ __( 'Settings' ) }
 			filterName="editPost.MoreMenu.settings"
 		>
 			<MenuItemsToggle
 				label={ __( 'Fix Toolbar to Top' ) }
-				isSelected={ active }
+				isSelected={ isActive }
 				onClick={ onToggle }
 			/>
 		</MenuItemsGroup>
 	);
 }
 
-export default connect(
-	( state ) => ( {
-		active: hasFixedToolbar( state ),
-		onMobile: isMobile( state ),
-	} ),
-	( dispatch, ownProps ) => ( {
+export default compose( [
+	withSelect( ( select ) => ( {
+		isActive: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+	} ) ),
+	withDispatch( ( dispatch, ownProps ) => ( {
 		onToggle() {
-			dispatch( toggleFeature( 'fixedToolbar' ) );
+			dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' );
 			ownProps.onToggle();
 		},
-	} ),
-	undefined,
-	{ storeKey: 'edit-post' }
-)( withInstanceId( FeatureToggle ) );
+	} ) ),
+	ifViewportMatches( 'medium' ),
+	withInstanceId,
+] )( FeatureToggle );

edit-post/components/header/header-toolbar/index.js

@@ -1,7 +1,9 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { connect } from 'react-redux';
+import { compose } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { ifViewportMatches } from '@wordpress/viewport';
 
 /**
  * WordPress dependencies
@@ -21,9 +23,8 @@ import {
  * Internal dependencies
  */
 import './style.scss';
-import { hasFixedToolbar } from '../../../store/selectors';
 
-function HeaderToolbar( { fixedToolbarActive } ) {
+function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
@@ -34,7 +35,7 @@ function HeaderToolbar( { fixedToolbarActive } ) {
 			<EditorHistoryRedo />
 			<TableOfContents />
 			<MultiBlocksSwitcher />
-			{ fixedToolbarActive && (
+			{ hasFixedToolbar && isLargeViewport && (
 				<div className="edit-post-header-toolbar__block-toolbar">
 					<BlockToolbar />
 				</div>
@@ -43,11 +44,9 @@ function HeaderToolbar( { fixedToolbarActive } ) {
 	);
 }
 
-export default connect(
-	( state ) => ( {
-		fixedToolbarActive: hasFixedToolbar( state ),
-	} ),
-	undefined,
-	undefined,
-	{ storeKey: 'edit-post' }
-)( HeaderToolbar );
+export default compose( [
+	withSelect( ( select ) => ( {
+		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+	} ) ),
+	ifViewportMatches( 'medium', 'isLargeViewport' ),
+] )( HeaderToolbar );

edit-post/components/modes/visual-editor/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
@@ -15,16 +10,17 @@ import {
 	BlockSelectionClearer,
 	MultiSelectScrollIntoView,
 } from '@wordpress/editor';
-import { Fragment } from '@wordpress/element';
+import { Fragment, compose } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+import { ifViewportMatches } from '@wordpress/viewport';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import BlockInspectorButton from './block-inspector-button';
-import { hasFixedToolbar } from '../../../store/selectors';
 
-function VisualEditor( props ) {
+function VisualEditor( { hasFixedToolbar, isLargeViewport } ) {
 	return (
 		<BlockSelectionClearer className="edit-post-visual-editor">
 			<EditorGlobalKeyboardShortcuts />
@@ -33,7 +29,7 @@ function VisualEditor( props ) {
 			<WritingFlow>
 				<PostTitle />
 				<BlockList
-					showContextualToolbar={ ! props.hasFixedToolbar }
+					showContextualToolbar={ isLargeViewport && ! hasFixedToolbar }
 					renderBlockMenu={ ( { children, onClose } ) => (
 						<Fragment>
 							<BlockInspectorButton onClick={ onClose } />
@@ -46,13 +42,9 @@ function VisualEditor( props ) {
 	);
 }
 
-export default connect(
-	( state ) => {
-		return {
-			hasFixedToolbar: hasFixedToolbar( state ),
-		};
-	},
-	undefined,
-	undefined,
-	{ storeKey: 'edit-post' }
-)( VisualEditor );
+export default compose( [
+	withSelect( ( select ) => ( {
+		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+	} ) ),
+	ifViewportMatches( 'medium', 'isLargeViewport' ),
+] )( VisualEditor );

edit-post/store/actions.js

@@ -89,19 +89,6 @@ export function toggleGeneralSidebarEditorPanel( panel ) {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the viewport type preference should be set.
- *
- * @param {string} viewportType The viewport type (desktop or mobile).
- * @return {Object} Action object.
- */
-export function setViewportType( viewportType ) {
-	return {
-		type: 'SET_VIEWPORT_TYPE',
-		viewportType,
-	};
-}
-
 /**
  * Returns an action object used to toggle a feature flag.
  *

edit-post/store/index.js

@@ -1,24 +1,39 @@
 /**
  * WordPress Dependencies
  */
-import { registerReducer, withRehydratation, loadAndPersist } from '@wordpress/data';
+import {
+	registerStore,
+	withRehydratation,
+	loadAndPersist,
+	subscribe,
+	dispatch,
+} from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import reducer from './reducer';
-import enhanceWithBrowserSize from './mobile';
-import { BREAK_MEDIUM } from './constants';
+import * as actions from './actions';
+import * as selectors from './selectors';
 
 /**
  * Module Constants
  */
 const STORAGE_KEY = `WP_EDIT_POST_PREFERENCES_${ window.userSettings.uid }`;
-const MODULE_KEY = 'core/edit-post';
 
-const store = registerReducer( MODULE_KEY, withRehydratation( reducer, 'preferences', STORAGE_KEY ) );
+const store = registerStore( 'core/edit-post', {
+	reducer: withRehydratation( reducer, 'preferences', STORAGE_KEY ),
+	actions,
+	selectors,
+} );
 
 loadAndPersist( store, reducer, 'preferences', STORAGE_KEY );
-enhanceWithBrowserSize( store, BREAK_MEDIUM );
+
+subscribe( 'core/viewport', [ 'isViewportMatch', '< medium' ], ( isSmall ) => {
+	// Collapse sidebar when viewport shrinks.
+	if ( isSmall ) {
+		dispatch( 'core/edit-post' ).closeGeneralSidebar();
+	}
+} );
 
 export default store;

edit-post/store/reducer.js

@@ -53,23 +53,6 @@ export function preferences( state = PREFERENCES_DEFAULTS, action ) {
 					[ action.panel ]: ! get( state, [ 'panels', action.panel ], false ),
 				},
 			};
-		case 'SET_VIEWPORT_TYPE':
-			return {
-				...state,
-				viewportType: action.viewportType,
-			};
-		case 'UPDATE_MOBILE_STATE':
-			if ( action.isMobile ) {
-				return {
-					...state,
-					viewportType: 'mobile',
-					activeGeneralSidebar: null,
-				};
-			}
-			return {
-				...state,
-				viewportType: 'desktop',
-			};
 		case 'SWITCH_MODE':
 			return {
 				...state,
@@ -111,16 +94,8 @@ export function publishSidebarActive( state = false, action ) {
 	return state;
 }
 
-export function mobile( state = false, action ) {
-	if ( action.type === 'UPDATE_MOBILE_STATE' ) {
-		return action.isMobile;
-	}
-	return state;
-}
-
 export default combineReducers( {
 	preferences,
 	panel,
 	publishSidebarActive,
-	mobile,
 } );

edit-post/store/selectors.js

@@ -115,29 +115,6 @@ export function isEditorSidebarPanelOpened( state, panel ) {
 	return panels ? !! panels[ panel ] : false;
 }
 
-/**
- * Returns true if the current window size corresponds to mobile resolutions (<= medium breakpoint).
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether current window size corresponds to
- *                    mobile resolutions.
- */
-export function isMobile( state ) {
-	return state.mobile;
-}
-
-/**
- * Returns whether the toolbar should be fixed or not.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} True if toolbar is fixed.
- */
-export function hasFixedToolbar( state ) {
-	return ! isMobile( state ) && isFeatureActive( state, 'fixedToolbar' );
-}
-
 /**
  * Returns whether the given feature is enabled or not.
  *

edit-post/store/test/actions.js

@@ -9,7 +9,6 @@ import {
 	openPublishSidebar,
 	closePublishSidebar,
 	togglePublishSidebar,
-	setViewportType,
 	toggleFeature,
 } from '../actions';
 
@@ -78,16 +77,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'setViewportType', () => {
-		it( 'should return SET_VIEWPORT_TYPE action', () => {
-			const viewportType = 'mobile';
-			expect( setViewportType( viewportType ) ).toEqual( {
-				type: 'SET_VIEWPORT_TYPE',
-				viewportType,
-			} );
-		} );
-	} );
-
 	describe( 'toggleFeature', () => {
 		it( 'should return TOGGLE_FEATURE action', () => {
 			const feature = 'name';