Perform dirty detection as diff against saved post

editor/actions.js

@@ -4,6 +4,21 @@
 import uuid from 'uuid/v4';
 import { partial } from 'lodash';
 
+/**
+ * Returns an action object used in signalling that blocks state should be
+ * reset to the specified array of blocks, taking precedence over any other
+ * content reflected as an edit in state.
+ *
+ * @param  {Array}  blocks Array of blocks
+ * @return {Object}        Action object
+ */
+export function resetBlocks( blocks ) {
+	return {
+		type: 'RESET_BLOCKS',
+		blocks,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the block with the
  * specified UID has been updated.
@@ -121,18 +136,6 @@ export function autosave() {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the post should be queued
- * for autosave after a delay.
- *
- * @return {Object} Action object
- */
-export function queueAutosave() {
-	return {
-		type: 'QUEUE_AUTOSAVE',
-	};
-}
-
 /**
  * Returns an action object used in signalling that undo history should
  * restore last popped state.

editor/autosave-monitor/index.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { autosave } from '../actions';
+import { isEditedPostDirty } from '../selectors';
+
+class AutosaveMonitor extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.debouncedAutosave = debounce( () => {
+			this.props.autosave();
+		}, 10000 );
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { isDirty } = this.props;
+		if ( prevProps.isDirty === isDirty ) {
+			return;
+		}
+
+		if ( isDirty ) {
+			this.debouncedAutosave();
+		} else {
+			this.debouncedAutosave.cancel();
+		}
+	}
+
+	render() {
+		return null;
+	}
+}
+
+export default connect(
+	( state ) => {
+		return {
+			isDirty: isEditedPostDirty( state ),
+		};
+	},
+	{ autosave }
+)( AutosaveMonitor );

editor/effects.js

@@ -2,32 +2,31 @@
  * External dependencies
  */
 import { BEGIN, COMMIT, REVERT } from 'redux-optimist';
-import { get, uniqueId, debounce } from 'lodash';
+import { get, uniqueId } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { serialize, getBlockType, switchToBlockType } from '@wordpress/blocks';
+import { parse, getBlockType, switchToBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { getGutenbergURL, getWPAdminURL } from './utils/url';
 import {
+	resetBlocks,
 	focusBlock,
 	replaceBlocks,
 	createSuccessNotice,
 	createErrorNotice,
-	autosave,
-	queueAutosave,
 	savePost,
 	editPost,
 } from './actions';
 import {
 	getCurrentPost,
 	getCurrentPostType,
-	getBlocks,
+	getEditedPostContent,
 	getPostEdits,
 	isCurrentPostPublished,
 	isEditedPostDirty,
@@ -43,19 +42,15 @@ export default {
 		const edits = getPostEdits( state );
 		const toSend = {
 			...edits,
-			content: serialize( getBlocks( state ) ),
+			content: getEditedPostContent( state ),
 			id: post.id,
 		};
 		const transactionId = uniqueId();
 
-		dispatch( {
-			type: 'CLEAR_POST_EDITS',
-			optimist: { type: BEGIN, id: transactionId },
-		} );
 		dispatch( {
 			type: 'UPDATE_POST',
 			edits: toSend,
-			optimist: { id: transactionId },
+			optimist: { type: BEGIN, id: transactionId },
 		} );
 		const Model = wp.api.getPostTypeModel( getCurrentPostType( state ) );
 		new Model( toSend ).save().done( ( newPost ) => {
@@ -243,15 +238,10 @@ export default {
 
 		dispatch( savePost() );
 	},
-	QUEUE_AUTOSAVE: debounce( ( action, store ) => {
-		store.dispatch( autosave() );
-	}, 10000 ),
-	UPDATE_BLOCK_ATTRIBUTES: () => queueAutosave(),
-	INSERT_BLOCKS: () => queueAutosave(),
-	MOVE_BLOCKS_DOWN: () => queueAutosave(),
-	MOVE_BLOCKS_UP: () => queueAutosave(),
-	REPLACE_BLOCKS: () => queueAutosave(),
-	REMOVE_BLOCKS: () => queueAutosave(),
-	EDIT_POST: () => queueAutosave(),
-	MARK_DIRTY: () => queueAutosave(),
+	RESET_POST( action ) {
+		const { post } = action;
+		if ( post.content ) {
+			return resetBlocks( parse( post.content.raw ) );
+		}
+	},
 };

editor/index.js

@@ -10,7 +10,7 @@ import 'moment-timezone/moment-timezone-utils';
 /**
  * WordPress dependencies
  */
-import { EditableProvider, parse } from '@wordpress/blocks';
+import { EditableProvider } from '@wordpress/blocks';
 import { render } from '@wordpress/element';
 import { settings } from '@wordpress/date';
 
@@ -65,14 +65,6 @@ function preparePostState( store, post ) {
 		post,
 	} );
 
-	// Parse content as blocks
-	if ( post.content.raw ) {
-		store.dispatch( {
-			type: 'RESET_BLOCKS',
-			blocks: parse( post.content.raw ),
-		} );
-	}
-
 	// Include auto draft title in edits while not flagging post as dirty
 	if ( post.status === 'auto-draft' ) {
 		store.dispatch( {

editor/layout/index.js

@@ -19,6 +19,7 @@ import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 import UnsavedChangesWarning from '../unsaved-changes-warning';
 import DocumentTitle from '../document-title';
+import AutosaveMonitor from '../autosave-monitor';
 import { removeNotice } from '../actions';
 import {
 	getEditorMode,
@@ -36,6 +37,7 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 			<DocumentTitle />
 			<NoticeList onRemove={ props.removeNotice } notices={ notices } />
 			<UnsavedChangesWarning />
+			<AutosaveMonitor />
 			<Header />
 			<div className="editor-layout__content">
 				{ mode === 'text' && <TextEditor /> }

editor/modes/text-editor/index.js

@@ -8,60 +8,45 @@ import Textarea from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { serialize, parse } from '@wordpress/blocks';
+import { parse } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import PostTitle from '../../post-title';
-import { getBlocks } from '../../selectors';
+import { getEditedPostContent } from '../../selectors';
+import { editPost, resetBlocks } from '../../actions';
 
 class TextEditor extends Component {
-	constructor( { blocks } ) {
+	constructor( props ) {
 		super( ...arguments );
-		const value = serialize( blocks );
+
+		this.onChange = this.onChange.bind( this );
+		this.onPersist = this.onPersist.bind( this );
+
 		this.state = {
-			blocks,
-			persistedValue: value,
-			value,
+			initialValue: props.value,
 		};
-		this.onChange = this.onChange.bind( this );
-		this.onBlur = this.onBlur.bind( this );
 	}
 
 	onChange( event ) {
-		this.setState( {
-			value: event.target.value,
-		} );
-		this.props.markDirty();
+		this.props.onChange( event.target.value );
 	}
 
-	onBlur() {
-		if ( this.state.value === this.state.persistedValue ) {
-			return;
-		}
-		const blocks = parse( this.state.value );
-		this.setState( {
-			blocks,
-		} );
-		this.props.onChange( blocks );
-		this.props.markDirty();
-	}
+	onPersist( event ) {
+		const { value } = event.target;
+		if ( value !== this.state.initialValue ) {
+			this.props.onPersist( value );
 
-	componentWillReceiveProps( newProps ) {
-		if ( newProps.blocks !== this.state.blocks ) {
-			const value = serialize( newProps.blocks );
 			this.setState( {
-				blocks: newProps.blocks,
-				persistedValue: value,
-				value,
+				initialValue: value,
 			} );
 		}
 	}
 
 	render() {
-		const { value } = this.state;
+		const { value } = this.props;
 
 		return (
 			<div className="editor-text-editor">
@@ -88,7 +73,7 @@ class TextEditor extends Component {
 						autoComplete="off"
 						value={ value }
 						onChange={ this.onChange }
-						onBlur={ this.onBlur }
+						onBlur={ this.onPersist }
 						className="editor-text-editor__textarea"
 					/>
 				</div>
@@ -99,19 +84,14 @@ class TextEditor extends Component {
 
 export default connect(
 	( state ) => ( {
-		blocks: getBlocks( state ),
+		value: getEditedPostContent( state ),
 	} ),
 	{
-		onChange( blocks ) {
-			return {
-				type: 'RESET_BLOCKS',
-				blocks,
-			};
+		onChange( content ) {
+			return editPost( { content } );
 		},
-		markDirty() {
-			return {
-				type: 'MARK_DIRTY',
-			};
+		onPersist( content ) {
+			return resetBlocks( parse( content ) );
 		},
 	}
 )( TextEditor );