Add basic 'dirty state' handling (#610)

editor/header/saved-state/index.js

@@ -1,16 +1,36 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
 import './style.scss';
 import Dashicon from '../../components/dashicon';
 
-function SavedState() {
+function SavedState( { isDirty } ) {
+	const classes = classNames( 'editor-saved-state', {
+		'is-dirty': isDirty,
+	} );
+	const icon = isDirty
+		? 'warning'
+		: 'saved';
+	const text = isDirty
+		? wp.i18n.__( 'Unsaved changes' )
+		: wp.i18n.__( 'Saved' );
+
 	return (
-		<div className="editor-saved-state">
-			<Dashicon icon="saved" />
-			{ wp.i18n.__( 'Saved' ) }
+		<div className={ classes }>
+			<Dashicon icon={ icon } />
+			{ text }
 		</div>
 	);
 }
 
-export default SavedState;
+export default connect(
+	( state ) => ( {
+		isDirty: state.blocks.dirty,
+	} )
+)( SavedState );

editor/state.js

@@ -18,6 +18,22 @@ import { combineUndoableReducers } from 'utils/undoable-reducer';
  * @return {Object}        Updated state
  */
 export const blocks = combineUndoableReducers( {
+	dirty( state = false, action ) {
+		switch ( action.type ) {
+			case 'RESET_BLOCKS':
+				return false;
+
+			case 'UPDATE_BLOCK':
+			case 'INSERT_BLOCK':
+			case 'MOVE_BLOCK_DOWN':
+			case 'MOVE_BLOCK_UP':
+			case 'REPLACE_BLOCKS':
+			case 'REMOVE_BLOCK':
+				return true;
+		}
+
+		return state;
+	},
 	byUid( state = {}, action ) {
 		switch ( action.type ) {
 			case 'RESET_BLOCKS':