@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
53 lines (47 loc) • 1.56 kB
JavaScript
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
/**
* Warns the user if there are unsaved changes before leaving the editor.
* Compatible with Post Editor and Site Editor.
*
* @return {WPComponent} The component.
*/
export default function UnsavedChangesWarning() {
const isDirty = useSelect( ( select ) => {
return () => {
const { __experimentalGetDirtyEntityRecords } = select( 'core' );
const dirtyEntityRecords = __experimentalGetDirtyEntityRecords();
return dirtyEntityRecords.length > 0;
};
}, [] );
/**
* Warns the user if there are unsaved changes before leaving the editor.
*
* @param {Event} event `beforeunload` event.
*
* @return {?string} Warning prompt message, if unsaved changes exist.
*/
const warnIfUnsavedChanges = ( event ) => {
// We need to call the selector directly in the listener to avoid race
// conditions with `BrowserURL` where `componentDidUpdate` gets the
// new value of `isEditedPostDirty` before this component does,
// causing this component to incorrectly think a trashed post is still dirty.
if ( isDirty() ) {
event.returnValue = __(
'You have unsaved changes. If you proceed, they will be lost.'
);
return event.returnValue;
}
};
useEffect( () => {
window.addEventListener( 'beforeunload', warnIfUnsavedChanges );
return () => {
window.removeEventListener( 'beforeunload', warnIfUnsavedChanges );
};
}, [] );
return null;
}