State: Extract selectors to a global selectors file

editor/block-mover/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { first, last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -13,6 +12,7 @@ import IconButton from 'components/icon-button';
  * Internal dependencies
  */
 import './style.scss';
+import { isFirstBlock, isLastBlock } from '../selectors';
 
 function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
 	return (
@@ -35,8 +35,8 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
 
 export default connect(
 	( state, ownProps ) => ( {
-		isFirst: first( state.editor.blockOrder ) === ownProps.uid,
-		isLast: last( state.editor.blockOrder ) === ownProps.uid
+		isFirst: isFirstBlock( state, ownProps.uid ),
+		isLast: isLastBlock( state, ownProps.uid )
 	} ),
 	( dispatch, ownProps ) => ( {
 		onMoveDown() {

editor/block-switcher/index.js

@@ -14,6 +14,7 @@ import IconButton from 'components/icon-button';
  * Internal dependencies
  */
 import './style.scss';
+import { getBlock } from '../selectors';
 
 class BlockSwitcher extends wp.element.Component {
 	constructor() {
@@ -96,7 +97,7 @@ class BlockSwitcher extends wp.element.Component {
 
 export default connect(
 	( state, ownProps ) => ( {
-		block: state.editor.blocksByUid[ ownProps.uid ]
+		block: getBlock( state, ownProps.uid )
 	} ),
 	( dispatch, ownProps ) => ( {
 		onTransform( block, blockType ) {

editor/header/mode-switcher/index.js

@@ -12,6 +12,7 @@ import Dashicon from 'components/dashicon';
  * Internal dependencies
  */
 import './style.scss';
+import { getEditorMode } from '../../selectors';
 
 /**
  * Set of available mode options.
@@ -57,7 +58,7 @@ function ModeSwitcher( { mode, onSwitch } ) {
 
 export default connect(
 	( state ) => ( {
-		mode: state.mode
+		mode: getEditorMode( state )
 	} ),
 	( dispatch ) => ( {
 		onSwitch( mode ) {

editor/header/saved-state/index.js

@@ -13,6 +13,7 @@ import Dashicon from 'components/dashicon';
  * Internal dependencies
  */
 import './style.scss';
+import { isEditedPostDirty } from '../../selectors';
 
 function SavedState( { isDirty } ) {
 	const classes = classNames( 'editor-saved-state', {
@@ -35,6 +36,6 @@ function SavedState( { isDirty } ) {
 
 export default connect(
 	( state ) => ( {
-		isDirty: state.editor.dirty,
+		isDirty: isEditedPostDirty( state ),
 	} )
 )( SavedState );

editor/header/tools/index.js

@@ -16,6 +16,7 @@ import Button from 'components/button';
 import './style.scss';
 import Inserter from '../../inserter';
 import PublishButton from './publish-button';
+import { isEditorSidebarOpened, hasEditorUndo, hasEditorRedo } from '../../selectors';
 
 function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar } ) {
 	return (
@@ -50,9 +51,9 @@ function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar }
 
 export default connect(
 	( state ) => ( {
-		hasUndo: state.editor.history.past.length > 0,
-		hasRedo: state.editor.history.future.length > 0,
-		isSidebarOpened: state.isSidebarOpened,
+		hasUndo: hasEditorUndo( state ),
+		hasRedo: hasEditorRedo( state ),
+		isSidebarOpened: isEditorSidebarOpened( state ),
 	} ),
 	( dispatch ) => ( {
 		undo: () => dispatch( { type: 'UNDO' } ),

editor/header/tools/publish-button.js

@@ -12,6 +12,16 @@ import Button from 'components/button';
  * Internal dependencies
  */
 import { savePost } from '../../actions';
+import {
+	isEditedPostDirty,
+	getCurrentPost,
+	getPostEdits,
+	getBlocks,
+	isSavingPost,
+	didPostSaveRequestSucceed,
+	didPostSaveRequestFail,
+	isSavingNewPost
+} from '../../selectors';
 
 function PublishButton( {
 	post,
@@ -66,16 +76,14 @@ function PublishButton( {
 
 export default connect(
 	( state ) => ( {
-		post: state.currentPost,
-		edits: state.editor.edits,
-		dirty: state.editor.dirty,
-		blocks: state.editor.blockOrder.map( ( uid ) => (
-			state.editor.blocksByUid[ uid ]
-		) ),
-		isRequesting: state.saving.requesting,
-		isSuccessful: state.saving.successful,
-		isError: !! state.saving.error,
-		requestIsNewPost: state.saving.isNew,
+		post: getCurrentPost( state ),
+		edits: getPostEdits( state ),
+		dirty: isEditedPostDirty( state ),
+		blocks: getBlocks( state ),
+		isRequesting: isSavingPost( state ),
+		isSuccessful: didPostSaveRequestSucceed( state ),
+		isError: !! didPostSaveRequestFail( state ),
+		requestIsNewPost: isSavingNewPost( state ),
 	} ),
 	( dispatch ) => ( {
 		onUpdate( post, edits, blocks ) {

editor/layout/index.js

@@ -12,6 +12,7 @@ import Header from '../header';
 import Sidebar from '../sidebar';
 import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
+import { getEditorMode, isEditorSidebarOpened } from '../selectors';
 
 function Layout( { mode, isSidebarOpened } ) {
 	const className = classnames( 'editor-layout', {
@@ -31,6 +32,6 @@ function Layout( { mode, isSidebarOpened } ) {
 }
 
 export default connect( ( state ) => ( {
-	mode: state.mode,
-	isSidebarOpened: state.isSidebarOpened
+	mode: getEditorMode( state ),
+	isSidebarOpened: isEditorSidebarOpened( state )
 } ) )( Layout );

editor/modes/text-editor/index.js

@@ -9,6 +9,7 @@ import Textarea from 'react-autosize-textarea';
  */
 import './style.scss';
 import PostTitle from '../../post-title';
+import { getBlocks } from '../../selectors';
 
 function TextEditor( { blocks, onChange } ) {
 	return (
@@ -45,9 +46,7 @@ function TextEditor( { blocks, onChange } ) {
 
 export default connect(
 	( state ) => ( {
-		blocks: state.editor.blockOrder.map( ( uid ) => (
-			state.editor.blocksByUid[ uid ]
-		) )
+		blocks: getBlocks( state )
 	} ),
 	( dispatch ) => ( {
 		onChange( value ) {

editor/modes/visual-editor/block.js

@@ -16,6 +16,15 @@ import Toolbar from 'components/toolbar';
  */
 import BlockMover from '../../block-mover';
 import BlockSwitcher from '../../block-switcher';
+import {
+	getPreviousBlock,
+	getBlock,
+	getBlockFocus,
+	getBlockOrder,
+	isBlockHovered,
+	isBlockSelected,
+	isTypingInBlock
+} from '../../selectors';
 
 class VisualEditorBlock extends wp.element.Component {
 	constructor() {
@@ -230,15 +239,14 @@ class VisualEditorBlock extends wp.element.Component {
 
 export default connect(
 	( state, ownProps ) => {
-		const order = state.editor.blockOrder.indexOf( ownProps.uid );
 		return {
-			previousBlock: state.editor.blocksByUid[ state.editor.blockOrder[ order - 1 ] ] || null,
-			block: state.editor.blocksByUid[ ownProps.uid ],
-			isSelected: state.selectedBlock.uid === ownProps.uid,
-			isHovered: state.hoveredBlock === ownProps.uid,
-			focus: state.selectedBlock.uid === ownProps.uid ? state.selectedBlock.focus : null,
-			isTyping: state.selectedBlock.uid === ownProps.uid ? state.selectedBlock.typing : false,
-			order
+			previousBlock: getPreviousBlock( state, ownProps.uid ),
+			block: getBlock( state, ownProps.uid ),
+			isSelected: isBlockSelected( state, ownProps.uid ),
+			isHovered: isBlockHovered( state, ownProps.uid ),
+			focus: getBlockFocus( state, ownProps.uid ),
+			isTyping: isTypingInBlock( state, ownProps.uid ),
+			order: getBlockOrder( state, ownProps.uid )
 		};
 	},
 	( dispatch, ownProps ) => ( {

editor/modes/visual-editor/index.js

@@ -10,6 +10,7 @@ import './style.scss';
 import Inserter from '../../inserter';
 import VisualEditorBlock from './block';
 import PostTitle from '../../post-title';
+import { getBlockUids } from '../../selectors';
 
 function VisualEditor( { blocks } ) {
 	return (
@@ -24,5 +25,5 @@ function VisualEditor( { blocks } ) {
 }
 
 export default connect( ( state ) => ( {
-	blocks: state.editor.blockOrder
+	blocks: getBlockUids( state )
 } ) )( VisualEditor );

editor/post-title/index.js

@@ -8,6 +8,7 @@ import Textarea from 'react-autosize-textarea';
  * Internal dependencies
  */
 import './style.scss';
+import { getEditedPostTitle } from '../selectors';
 
 /**
  * Constants
@@ -34,9 +35,7 @@ function PostTitle( { title, onUpdate } ) {
 
 export default connect(
 	( state ) => ( {
-		title: state.editor.edits.title === undefined
-			? state.currentPost.title.raw
-			: state.editor.edits.title,
+		title: getEditedPostTitle( state ),
 	} ),
 	( dispatch ) => {
 		return {

editor/selectors.js

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import { first, last } from 'lodash';
+
+export function getEditorMode( state ) {
+	return state.mode;
+}
+
+export function isEditorSidebarOpened( state ) {
+	return state.isSidebarOpened;
+}
+
+export function hasEditorUndo( state ) {
+	return state.editor.history.past.length > 0;
+}
+
+export function hasEditorRedo( state ) {
+	return state.editor.history.future.length > 0;
+}
+
+export function isEditedPostDirty( state ) {
+	return state.editor.dirty;
+}
+
+export function getCurrentPost( state ) {
+	return state.currentPost;
+}
+
+export function getPostEdits( state ) {
+	return state.editor.edits;
+}
+
+export function getEditedPostTitle( state ) {
+	return state.editor.edits.title === undefined
+		? state.currentPost.title.raw
+		: state.editor.edits.title;
+}
+
+export function getBlock( state, uid ) {
+	return state.editor.blocksByUid[ uid ];
+}
+
+export function getBlocks( state ) {
+	return state.editor.blockOrder.map( ( uid ) => (
+		state.editor.blocksByUid[ uid ]
+	) );
+}
+
+export function getBlockUids( state ) {
+	return state.editor.blockOrder;
+}
+
+export function getBlockOrder( state, uid ) {
+	return state.editor.blockOrder.indexOf( uid );
+}
+
+export function isFirstBlock( state, uid ) {
+	return first( state.editor.blockOrder ) === uid;
+}
+
+export function isLastBlock( state, uid ) {
+	return last( state.editor.blockOrder ) === uid;
+}
+
+export function getPreviousBlock( state, uid ) {
+	const order = getBlockOrder( state, uid );
+	return state.editor.blocksByUid[ state.editor.blockOrder[ order - 1 ] ] || null;
+}
+
+export function isBlockSelected( state, uid ) {
+	return state.selectedBlock.uid === uid;
+}
+
+export function isBlockHovered( state, uid ) {
+	return state.hoveredBlock === uid;
+}
+
+export function getBlockFocus( state, uid ) {
+	return state.selectedBlock.uid === uid ? state.selectedBlock.focus : null;
+}
+
+export function isTypingInBlock( state, uid ) {
+	return state.selectedBlock.uid === uid ? state.selectedBlock.typing : false;
+}
+
+export function isSavingPost( state ) {
+	return state.saving.requesting;
+}
+
+export function didPostSaveRequestSucceed( state ) {
+	return state.saving.successful;
+}
+
+export function didPostSaveRequestFail( state ) {
+	return !! state.saving.error;
+}
+
+export function isSavingNewPost( state ) {
+	return state.saving.isNew;
+}