Confirm dialog: use more descriptive text for the confirm button (#60364

)

* Improve confirm dialog confirm button text.

* Adjust tests.

* Adjust more tests.

* Improve apply revision confirm dialog copy.

* Improve edit template confirm dialog copy.

* Update string.

* Adjust test.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>

packages/edit-site/src/components/global-styles/screen-revisions/index.js

@@ -215,7 +215,7 @@ function ScreenRevisions() {
 					}
 				>
 					{ __(
-						'Any unsaved changes will be lost when you apply this revision.'
+						'Are you sure you want to apply this revision? Any unsaved changes will be lost.'
 					) }
 				</ConfirmDialog>
 			) }

packages/editor/src/components/editor-canvas/edit-template-blocks-notification.js

@@ -68,7 +68,7 @@ export default function EditTemplateBlocksNotification( { contentRef } ) {
 			onCancel={ () => setIsDialogOpen( false ) }
 		>
 			{ __(
-				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages.'
+				'You’ve tried to select a block that is part of a template, which may be used on other posts and pages. Would you like to edit the template?.'
 			) }
 		</ConfirmDialog>
 	);

packages/editor/src/components/post-switch-to-draft-button/index.js

@@ -31,10 +31,13 @@ export default function PostSwitchToDraftButton() {
 	const isDisabled = isSaving || ( ! isPublished && ! isScheduled );
 
 	let alertMessage;
+	let confirmButtonText;
 	if ( isPublished ) {
 		alertMessage = __( 'Are you sure you want to unpublish this post?' );
+		confirmButtonText = __( 'Unpublish' );
 	} else if ( isScheduled ) {
 		alertMessage = __( 'Are you sure you want to unschedule this post?' );
+		confirmButtonText = __( 'Unschedule' );
 	}
 
 	const handleConfirm = () => {
@@ -63,6 +66,7 @@ export default function PostSwitchToDraftButton() {
 				isOpen={ showConfirmDialog }
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ confirmButtonText }
 			>
 				{ alertMessage }
 			</ConfirmDialog>

packages/editor/src/components/post-trash/index.js

@@ -54,6 +54,7 @@ export default function PostTrash() {
 				isOpen={ showConfirmDialog }
 				onConfirm={ handleConfirm }
 				onCancel={ () => setShowConfirmDialog( false ) }
+				confirmButtonText={ __( 'Move to trash' ) }
 			>
 				{ __(
 					'Are you sure you want to move this post to the trash?'

packages/editor/src/components/post-visibility/index.js

@@ -125,6 +125,7 @@ export default function PostVisibility( { onClose } ) {
 				isOpen={ showPrivateConfirmDialog }
 				onConfirm={ confirmPrivate }
 				onCancel={ handleDialogCancel }
+				confirmButtonText={ __( 'Publish' ) }
 			>
 				{ __( 'Would you like to privately publish this post now?' ) }
 			</ConfirmDialog>

test/e2e/specs/editor/various/change-detection.spec.js

@@ -417,7 +417,7 @@ test.describe( 'Change detection', () => {
 			.click();
 		await page
 			.getByRole( 'dialog' )
-			.getByRole( 'button', { name: 'OK' } )
+			.getByRole( 'button', { name: 'Move to trash' } )
 			.click();
 
 		await expect(

test/e2e/specs/editor/various/post-visibility.spec.js

@@ -23,7 +23,7 @@ test.describe( 'Post visibility', () => {
 
 			await page.click( 'role=radio[name="Private"i]' );
 
-			await page.click( 'role=button[name="OK"i]' );
+			await page.click( 'role=button[name="Publish"i]' );
 
 			const currentStatus = await page.evaluate( () => {
 				return window.wp.data
@@ -99,7 +99,7 @@ test.describe( 'Post visibility', () => {
 
 		await page.click( 'role=radio[name="Private"i]' );
 
-		await page.click( 'role=button[name="OK"i]' );
+		await page.click( 'role=button[name="Publish"i]' );
 
 		const currentStatus = await page.evaluate( () => {
 			return window.wp.data

test/e2e/specs/editor/various/preview.spec.js

@@ -188,7 +188,7 @@ test.describe( 'Preview', () => {
 			.getByRole( 'button', { name: 'Switch to draft' } )
 			.click();
 		// FIXME: The confirmation dialog is not named yet.
-		await page.click( 'role=dialog >> role=button[name="OK"i]' );
+		await page.click( 'role=dialog >> role=button[name="Unpublish"i]' );
 
 		// Wait for the status change.
 		// @see https://github.com/WordPress/gutenberg/pull/43933

test/e2e/specs/editor/various/switch-to-draft.spec.js

@@ -65,9 +65,12 @@ test.describe( 'Clicking "Switch to draft" on a published/scheduled post/page',
 
 					await switchToDraftUtils.switchToDraftButton.click();
 
+					const confirmButtonText =
+						postStatus === 'publish' ? 'Unpublish' : 'Unschedule';
+
 					await page
 						.getByRole( 'dialog' )
-						.getByRole( 'button', { name: 'OK' } )
+						.getByRole( 'button', { name: confirmButtonText } )
 						.click();
 
 					await expect(

test/e2e/specs/site-editor/user-global-styles-revisions.spec.js

@@ -101,7 +101,7 @@ test.describe( 'Style Revisions', () => {
 		const confirm = page.getByRole( 'dialog' );
 		await expect( confirm ).toBeVisible();
 		await expect( confirm ).toHaveText(
-			/^Any unsaved changes will be lost when you apply this revision./
+			/^Are you sure you want to apply this revision\? Any unsaved changes will be lost./
 		);
 
 		// This is to make sure there are no lingering unsaved changes.