Editor Module: Replace connect usage with withSelect/withDispatch (1s…

…t round) (#6142)
WordPress · Apr 13, 2018 · 751245a · 751245a
1 parent e0342fa
commit 751245a
Show file tree

Hide file tree

Showing 22 changed files with 323 additions and 381 deletions.
diff --git a/editor/components/autosave-monitor/index.js b/editor/components/autosave-monitor/index.js
@@ -1,21 +1,8 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { autosave } from '../../store/actions';
-import {
-	isEditedPostDirty,
-	isEditedPostSaveable,
-} from '../../store/selectors';
+import { Component, compose } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 export class AutosaveMonitor extends Component {
 	componentDidUpdate( prevProps ) {
@@ -46,12 +33,15 @@ export class AutosaveMonitor extends Component {
 	}
 }
 
-export default connect(
-	( state ) => {
+export default compose( [
+	withSelect( ( select ) => {
+		const { isEditedPostDirty, isEditedPostSaveable } = select( 'core/editor' );
 		return {
-			isDirty: isEditedPostDirty( state ),
-			isSaveable: isEditedPostSaveable( state ),
+			isDirty: isEditedPostDirty(),
+			isSaveable: isEditedPostSaveable(),
 		};
-	},
-	{ autosave }
-)( AutosaveMonitor );
+	} ),
+	withDispatch( ( dispatch ) => ( {
+		autosave: dispatch( 'core/editor' ).autosave,
+	} ) ),
+] )( AutosaveMonitor );
diff --git a/editor/components/block-inspector/index.js b/editor/components/block-inspector/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { isEmpty } from 'lodash';
-import { connect } from 'react-redux';
 
 /**
  * WordPress dependencies
@@ -15,13 +14,13 @@ import {
 	InspectorAdvancedControls,
 } from '@wordpress/blocks';
 import { PanelBody } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal Dependencies
  */
 import './style.scss';
 import SkipToSelectedBlock from '../skip-to-selected-block';
-import { getSelectedBlock, getSelectedBlockCount } from '../../store/selectors';
 
 const BlockInspector = ( { selectedBlock, count } ) => {
 	if ( count > 1 ) {
@@ -60,11 +59,12 @@ const BlockInspector = ( { selectedBlock, count } ) => {
 	];
 };
 
-export default connect(
-	( state ) => {
+export default withSelect(
+	( select ) => {
+		const { getSelectedBlock, getSelectedBlockCount } = select( 'core/editor' );
 		return {
-			selectedBlock: getSelectedBlock( state ),
-			count: getSelectedBlockCount( state ),
+			selectedBlock: getSelectedBlock(),
+			count: getSelectedBlockCount(),
 		};
 	}
 )( BlockInspector );
diff --git a/editor/components/block-list/block-html.js b/editor/components/block-list/block-html.js
@@ -1,21 +1,16 @@
-/**
- * WordPress Dependencies
- */
-import { isEqual } from 'lodash';
-import { Component } from '@wordpress/element';
-import { getBlockAttributes, getBlockContent, getBlockType, isValidBlock } from '@wordpress/blocks';
 
 /**
  * External Dependencies
  */
-import { connect } from 'react-redux';
 import TextareaAutosize from 'react-autosize-textarea';
+import { isEqual } from 'lodash';
 
 /**
- * Internal Dependencies
+ * WordPress Dependencies
  */
-import { updateBlock } from '../../store/actions';
-import { getBlock } from '../../store/selectors';
+import { Component, compose } from '@wordpress/element';
+import { getBlockAttributes, getBlockContent, getBlockType, isValidBlock } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 class BlockHTML extends Component {
 	constructor( props ) {
@@ -59,13 +54,13 @@ class BlockHTML extends Component {
 	}
 }
 
-export default connect(
-	( state, ownProps ) => ( {
-		block: getBlock( state, ownProps.uid ),
-	} ),
-	{
+export default compose( [
+	withSelect( ( select, ownProps ) => ( {
+		block: select( 'core/editor' ).getBlock( ownProps.uid ),
+	} ) ),
+	withDispatch( dispatch => ( {
 		onChange( uid, attributes, originalContent, isValid ) {
-			return updateBlock( uid, { attributes, originalContent, isValid } );
+			dispatch( 'core/editor' ).updateBlock( uid, { attributes, originalContent, isValid } );
 		},
-	}
-)( BlockHTML );
+	} ) ),
+] )( BlockHTML );
diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
@@ -1,36 +1,18 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 import { Component, compose } from '@wordpress/element';
 import { ifCondition, withContext } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import {
-	getBlockIndex,
-	getBlockInsertionPoint,
-	isBlockInsertionPointVisible,
-	getBlock,
-	isTyping,
-} from '../../store/selectors';
-import {
-	insertDefaultBlock,
-	startTyping,
-} from '../../store/actions';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 class BlockInsertionPoint extends Component {
 	constructor() {
 		super( ...arguments );
 		this.onClick = this.onClick.bind( this );
 	}
+
 	onClick() {
 		const { layout, rootUID, index, ...props } = this.props;
 		props.insertDefaultBlock( { layout }, rootUID, index );
@@ -57,24 +39,36 @@ class BlockInsertionPoint extends Component {
 export default compose(
 	withContext( 'editor' )( ( { templateLock } ) => ( { templateLock } ) ),
 	ifCondition( ( { templateLock } ) => ! templateLock ),
-	connect(
-		( state, { uid, rootUID } ) => {
-			const blockIndex = uid ? getBlockIndex( state, uid, rootUID ) : -1;
-			const insertIndex = blockIndex;
-			const insertionPoint = getBlockInsertionPoint( state );
-			const block = uid ? getBlock( state, uid ) : null;
+	withSelect( ( select, { uid, rootUID } ) => {
+		const {
+			getBlockIndex,
+			getBlockInsertionPoint,
+			getBlock,
+			isBlockInsertionPointVisible,
+			isTyping,
+		} = select( 'core/editor' );
+		const blockIndex = uid ? getBlockIndex( uid, rootUID ) : -1;
+		const insertIndex = blockIndex;
+		const insertionPoint = getBlockInsertionPoint();
+		const block = uid ? getBlock( uid ) : null;
+		const showInsertionPoint = (
+			isBlockInsertionPointVisible() &&
+			insertionPoint.index === insertIndex &&
+			insertionPoint.rootUID === rootUID &&
+			( ! block || ! isUnmodifiedDefaultBlock( block ) )
+		);
 
-			return {
-				showInsertionPoint: (
-					isBlockInsertionPointVisible( state ) &&
-				insertionPoint.index === insertIndex &&
-				insertionPoint.rootUID === rootUID &&
-				( ! block || ! isUnmodifiedDefaultBlock( block ) )
-				),
-				showInserter: ! isTyping( state ),
-				index: insertIndex,
-			};
-		},
-		{ insertDefaultBlock, startTyping }
-	)
+		return {
+			showInserter: ! isTyping(),
+			index: insertIndex,
+			showInsertionPoint,
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const { insertDefaultBlock, startTyping } = dispatch( 'core/editor' );
+		return {
+			insertDefaultBlock,
+			startTyping,
+		};
+	} )
 )( BlockInsertionPoint );
diff --git a/editor/components/block-list/invalid-block-warning.js b/editor/components/block-list/invalid-block-warning.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
@@ -13,11 +8,11 @@ import {
 	createBlock,
 	rawHandler,
 } from '@wordpress/blocks';
+import { withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { replaceBlock } from '../../store/actions';
 import Warning from '../warning';
 
 function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
@@ -41,19 +36,19 @@ function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
 	);
 }
 
-export default connect(
-	null,
-	( dispatch, { block } ) => ( {
+export default withDispatch( ( dispatch, { block } ) => {
+	const { replaceBlock } = dispatch( 'core/editor' );
+	return {
 		convertToHTML() {
-			dispatch( replaceBlock( block.uid, createBlock( 'core/html', {
+			replaceBlock( block.uid, createBlock( 'core/html', {
 				content: block.originalContent,
-			} ) ) );
+			} ) );
 		},
 		convertToBlocks() {
-			dispatch( replaceBlock( block.uid, rawHandler( {
+			replaceBlock( block.uid, rawHandler( {
 				HTML: block.originalContent,
 				mode: 'BLOCKS',
-			} ) ) );
+			} ) );
 		},
-	} )
-)( InvalidBlockWarning );
+	};
+} )( InvalidBlockWarning );
diff --git a/editor/components/block-list/layout.js b/editor/components/block-list/layout.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import {
 	findLast,
 	map,
@@ -17,7 +16,8 @@ import 'element-closest';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -26,13 +26,6 @@ import './style.scss';
 import BlockListBlock from './block';
 import IgnoreNestedEvents from './ignore-nested-events';
 import DefaultBlockAppender from '../default-block-appender';
-import {
-	isSelectionEnabled,
-	isMultiSelecting,
-	getMultiSelectedBlocksStartUid,
-	getMultiSelectedBlocksEndUid,
-} from '../../store/selectors';
-import { startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../store/actions';
 
 class BlockListLayout extends Component {
 	constructor( props ) {
@@ -243,29 +236,37 @@ class BlockListLayout extends Component {
 	}
 }
 
-export default connect(
-	( state ) => ( {
-		// Reference block selection value directly, since current selectors
-		// assume either multi-selection (getMultiSelectedBlocksStartUid) or
-		// singular-selection (getSelectedBlock) exclusively.
-		selectionStart: getMultiSelectedBlocksStartUid( state ),
-		selectionEnd: getMultiSelectedBlocksEndUid( state ),
-		selectionStartUID: state.blockSelection.start,
-		isSelectionEnabled: isSelectionEnabled( state ),
-		isMultiSelecting: isMultiSelecting( state ),
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			isSelectionEnabled,
+			isMultiSelecting,
+			getMultiSelectedBlocksStartUid,
+			getMultiSelectedBlocksEndUid,
+			getBlockSelectionStart,
+		} = select( 'core/editor' );
+
+		return {
+			selectionStart: getMultiSelectedBlocksStartUid(),
+			selectionEnd: getMultiSelectedBlocksEndUid(),
+			selectionStartUID: getBlockSelectionStart(),
+			isSelectionEnabled: isSelectionEnabled(),
+			isMultiSelecting: isMultiSelecting(),
+		};
+	} ),
+	withDispatch( ( dispatch ) => {
+		const {
+			startMultiSelect,
+			stopMultiSelect,
+			multiSelect,
+			selectBlock,
+		} = dispatch( 'core/editor' );
+
+		return {
+			onStartMultiSelect: startMultiSelect,
+			onStopMultiSelect: stopMultiSelect,
+			onMultiSelect: multiSelect,
+			onSelect: selectBlock,
+		};
 	} ),
-	( dispatch ) => ( {
-		onStartMultiSelect() {
-			dispatch( startMultiSelect() );
-		},
-		onStopMultiSelect() {
-			dispatch( stopMultiSelect() );
-		},
-		onMultiSelect( start, end ) {
-			dispatch( multiSelect( start, end ) );
-		},
-		onSelect( uid ) {
-			dispatch( selectBlock( uid ) );
-		},
-	} )
-)( BlockListLayout );
+] )( BlockListLayout );