On the Edit User Profile page, prevent losing data when clicking links

[ashokrane]

On the Edit User Profile, open the "You can change your profile picture on Gravatar." link in a new window.
Reason being that otherwise it causes the user to loose any data that they have edited in the form, but not yet saved.

[swissspidy]

Hey there,

Thanks for your report and welcome!

As per #23432, we rather strive to remove usage of target="_blank". As for losing data, the browser should warn you when you're about to leave a page without having saved the form.

See https://core.trac.wordpress.org/query?keywords=~target-blank for related tickets.

[ashokrane]

Thanks @swissspidy. I agree. The browser didn't throw any warning when I have unsaved data & when I clicked on the "Gravatar" text. Doing that would be a better approach then opening in a new window (after going through other related tickets).

[ajmaurya]

Hey i also once had the same thought on opening the Gravatar link in a new window, but after reading this it totally makes much more sense now.

[afercia]

Discussed during today's accessibility bug-scrub, agreed this form would need the JS confirm to warn users they can lose data when navigating away. No target _blank please :)

[karlijnbk]

Regarding the patch above, please also give props to @diedeexterkate.

The patch above fixes the issue on the user edit pages and "add new user" page. We tested this on Chrome, Edge, Firefox and Safari on macOS.
Important to note that in Safari this does not work. We think this is due to back-forward caching (see ​https://stackoverflow.com/questions/40938707/safari-onbeforeunload/41769343).

[joedolson]

Looking at this for 6.6, and as a requirement to resolve #60100.

Verified @karlijnbk patch:

Added isSubmitting boolean, and form variables for tracking changes
Added initial form check.
Added conditional in 'beforeunload' check to handle redirects and present 'Changes that you made may not be saved.' warning message.

Trac ticket:
https://core.trac.wordpress.org/ticket/40493

[jwgoedert]

updated 40493 diff file

[jwgoedert]

40493 Warning after edits and redirect

[jwgoedert]

Submitted PR and included screenshots(accidentally added two, need to remove one...)
Verification of patch and efforts from work of @karlijnbk @diedeexterkate

New Diff attached and PR link below.

​https://github.com/WordPress/wordpress-develop/pull/6424

[joedolson]

Minor formatting tweaks

[joedolson]

This looks good. Other than a couple of minor formatting tweaks, I think it's good to go.

[joedolson]

In 58137:

Users: Add JS confirmation if user profile has unsaved changes.

Add a confirmation dialog when users navigate away from the user profile screen if they have unsaved changes to prevent data loss.

Props ashokrane, karlijnbk, diedeexterkate, jwgoedert, joedolson, swissspidy, afercia.
Fixes #40493.

[SergeyBiryukov]

Thanks for the commit!

A similar string is already used elsewhere:

The changes you made will be lost if you navigate away from this page.

Could we reuse it here instead of introducing a new one?

Thanks for the PR! This was merged in r58137.

[SergeyBiryukov]

In 58145:

Users: Reuse an existing string in the confirmation for unsaved changes in user profile.

Follow-up to [58137].

Fixes #40493.

[joedolson]

Thanks, @SergeyBiryukov!