Consider replacing usages of Window.confirm() with Modal

[noisysocks]

We're currently using Window.confirm() in four places. This isn't an ideal experience as we're unable to customise the OK button to have a more descriptive label.

Moving these instances to use a Modal component might provide a better experience. Here's an example of a Modal being used this way, from @kjellr's mockup in #16315 (comment):

---

1. Switching a published post to draft

Current:

Proposed:

Switch to Draft

Are you sure you want to unpublish this post?

[ Cancel ] [ Unpublish ]

2. Switching a published post to private

Current:

Proposed:

Privately Publish

Are you sure you want to privately publish this post now?

[ Cancel ] [ Privately Publish ]

3. Deleting a reusable block

Current:

Proposed:

Delete Reusable Block

Are you sure you want to delete this Reusable Block? 

It will be permanently removed from all posts and pages that use it.

[ Cancel ] [ Delete ]

4. Pressing Reset the template when template doesn't match post content

Current:

Proposed:

Reset Template

Resetting the template may result in loss of content, do you want to continue?

[ Cancel ] [ Reset Template ]

[kjellr]

Do we currently use modals as a stand-in for standard alerts elsewhere? I do find modals like the one pictured to be a little less alarming than the standard browser one, but I'm definitely be curious about any a11y considerations for this.

[aduth]

This is technically impossible to implement, at least for the confirmations shown on beforeunload (i.e. the unsaved changes prompt when reloading or navigating away). The browser does not give you an opportunity to prevent navigation except by the standard prompts.

[noisysocks]

@aduth: None of the confirm()s shown above are triggered when reloading or navigating away 🙂

[aduth]

@aduth: None of the confirm()s shown above are triggered when reloading or navigating away 🙂

You're totally right! I skimmed the text of the last screenshot and the "result in content loss" had me jump the gun on assuming that's what we were discussing.

For the ones which don't involve navigation, it's totally possible to re-style. I guess it's worth clarifying at least that it cannot be applied for the prompt which asks the user to confirm unsaved changes before navigating away or refreshing a "dirty" post.

[t-hamano]

I searched the entire project for this issue with the keyword window.alert|window.confirm|window.prompt. Currently, there appears to be only one implementation left, excluding Storybook.

gutenberg/packages/editor/src/components/template-validation-notice/index.js

Lines 18 to 22 in 0f689f9

	window.confirm(
	__(
	'Resetting the template may result in loss of content, do you want to continue?'
	)
	)