Add AYS dialog when leaving editor in dirty state

editor/effects.js

@@ -141,10 +141,14 @@ export default {
  },
  TRASH_POST_SUCCESS( action ) {
  const { postId, postType } = action;
- window.location.href = getWPAdminURL( 'edit.php', {
- trashed: 1,
- post_type: postType,
- ids: postId,
+
+ // Delay redirect to ensure store has been updated with the successful trash.
+ setTimeout( () => {
+ window.location.href = getWPAdminURL( 'edit.php', {
+ trashed: 1,
+ post_type: postType,
+ ids: postId,
+ } );
  } );
  },
  MERGE_BLOCKS( action, store ) {

editor/index.js

@@ -13,13 +13,17 @@ import 'moment-timezone/moment-timezone-utils';
 import { parse } from 'blocks';
 import { render } from 'element';
 import { settings } from 'date';
+import { __ } from 'i18n';
 
 /**
  * Internal dependencies
  */
 import './assets/stylesheets/main.scss';
 import Layout from './layout';
 import { createReduxStore } from './state';
+import {
+ isEditedPostDirty,
+} from './selectors';
 
 // Configure moment globally
 moment.locale( settings.l10n.locale );
@@ -82,6 +86,15 @@ export function createEditorInstance( id, post ) {
 
  preparePostState( store, post );
 
+ const warnDirtyBeforeUnload = ( event ) => {
+ const state = store.getState();
+ if ( isEditedPostDirty( state ) ) {
+ event.returnValue = __( 'You have unsaved changes. If you proceed, they will be lost.' );
+ return event.returnValue;
+ }
+ };
+ window.addEventListener( 'beforeunload', warnDirtyBeforeUnload );
+
  render(
  <ReduxProvider store={ store }>
  <SlotFillProvider>

editor/state.js

@@ -64,6 +64,7 @@ export const editor = combineUndoableReducers( {
  switch ( action.type ) {
  case 'RESET_BLOCKS':
  case 'REQUEST_POST_UPDATE_SUCCESS':
+ case 'TRASH_POST_SUCCESS':
  return false;
 
  case 'UPDATE_BLOCK':