Adding a js confirmation before navigating away from settings menus

Gruntfile.js

@@ -438,6 +438,7 @@ module.exports = function(grunt) {
 					[ WORKING_DIR + 'wp-admin/js/theme-plugin-editor.js' ]: [ './src/js/_enqueues/wp/theme-plugin-editor.js' ],
 					[ WORKING_DIR + 'wp-admin/js/theme.js' ]: [ './src/js/_enqueues/wp/theme.js' ],
 					[ WORKING_DIR + 'wp-admin/js/updates.js' ]: [ './src/js/_enqueues/wp/updates.js' ],
+					[ WORKING_DIR + 'wp-admin/js/options.js' ]: [ './src/js/_enqueues/admin/options.js' ],
 					[ WORKING_DIR + 'wp-admin/js/user-profile.js' ]: [ './src/js/_enqueues/admin/user-profile.js' ],
 					[ WORKING_DIR + 'wp-admin/js/user-suggest.js' ]: [ './src/js/_enqueues/lib/user-suggest.js' ],
 					[ WORKING_DIR + 'wp-admin/js/widgets/custom-html-widgets.js' ]: [ './src/js/_enqueues/wp/widgets/custom-html.js' ],
@@ -1059,6 +1060,7 @@ module.exports = function(grunt) {
 					'src/wp-admin/js/theme-plugin-editor.js': 'src/js/_enqueues/wp/theme-plugin-editor.js',
 					'src/wp-admin/js/theme.js': 'src/js/_enqueues/wp/theme.js',
 					'src/wp-admin/js/updates.js': 'src/js/_enqueues/wp/updates.js',
+					'src/wp-admin/js/options.js': 'src/js/_enqueues/admin/options.js',
 					'src/wp-admin/js/user-profile.js': 'src/js/_enqueues/admin/user-profile.js',
 					'src/wp-admin/js/user-suggest.js': 'src/js/_enqueues/lib/user-suggest.js',
 					'src/wp-admin/js/widgets/custom-html-widgets.js': 'src/js/_enqueues/wp/widgets/custom-html.js',

src/js/_enqueues/admin/options.js

@@ -0,0 +1,51 @@
+/**
+ * @output wp-admin/js/options.js
+ */
+
+/**
+ * Detects unsaved changes on settings forms and warns users before navigating away.
+ *
+ * @since 7.0.0
+ */
+( function( $ ) {
+	var $form,
+		originalFormContent,
+		isSubmitting = false,
+		__ = wp.i18n.__;
+
+	$( function() {
+		// Target all settings forms on options pages.
+		$form = $( 'form[action="options.php"]' );
+
+		// Exit if no form is found.
+		if ( ! $form.length ) {
+			return;
+		}
+
+		// Store the original form state.
+		originalFormContent = $form.serialize();
+
+		// Track form submission to avoid false warnings.
+		$form.on( 'submit', function() {
+			isSubmitting = true;
+		} );
+	} );
+
+	/**
+	 * Warn the user if they have unsaved changes.
+	 *
+	 * The browser will show a native confirmation dialog when the user
+	 * attempts to leave the page with unsaved changes.
+	 */
+	$( window ).on( 'beforeunload', function() {
+		// Skip warning if form is being submitted or content hasn't changed.
+		if ( isSubmitting || ! $form || ! $form.length ) {
+			return;
+		}
+
+		if ( originalFormContent !== $form.serialize() ) {
+			return __( 'The changes you made will be lost if you navigate away from this page.' );
+		}
+	} );
+
+}( jQuery ) );

src/wp-admin/options-discussion.php

@@ -33,6 +33,8 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'options' );
+
 require_once ABSPATH . 'wp-admin/admin-header.php';
 ?>
 

src/wp-admin/options-general.php

@@ -61,6 +61,8 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'options' );
+
 require_once ABSPATH . 'wp-admin/admin-header.php';
 ?>
 

src/wp-admin/options-media.php

@@ -42,6 +42,8 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'options' );
+
 require_once ABSPATH . 'wp-admin/admin-header.php';
 
 ?>

src/wp-admin/options-permalink.php

@@ -69,6 +69,8 @@
 get_current_screen()->set_help_sidebar( $help_sidebar_content );
 unset( $help_sidebar_content );
 
+wp_enqueue_script( 'options' );
+
 $home_path           = get_home_path();
 $iis7_permalinks     = iis7_supports_permalinks();
 $permalink_structure = get_option( 'permalink_structure' );

src/wp-admin/options-reading.php

@@ -54,6 +54,8 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'options' );
+
 require_once ABSPATH . 'wp-admin/admin-header.php';
 ?>
 

src/wp-admin/options-writing.php

@@ -54,7 +54,7 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
-wp_enqueue_script( 'user-profile' );
+wp_enqueue_script( 'options' );
 
 require_once ABSPATH . 'wp-admin/admin-header.php';
 ?>

src/wp-includes/script-loader.php

@@ -1256,6 +1256,9 @@ function wp_default_scripts( $scripts ) {
 
 	$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
 
+	$scripts->add( 'options', "/wp-admin/js/options$suffix.js", array( 'jquery', 'wp-i18n' ), false, 1 );
+	$scripts->set_translations( 'options' );
+
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
 
 	$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array( 'hoverintent-js' ), false, 1 );