Align rename modals (#62874)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: afercia <[email protected]>
WordPress · Jul 1, 2024 · 214f466 · 214f466 · github-actions · Jul 1, 2024
1 parent ae37dc2
commit 214f466
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
@@ -9,7 +9,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState, useId } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 /**
@@ -27,7 +27,6 @@ export default function BlockRenameModal( {
 	hasOverridesWarning,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
-	const descriptionId = useId();
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
@@ -65,7 +64,6 @@ export default function BlockRenameModal( {
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
 			focusOnMount="firstContentElement"
-			aria={ { describedby: descriptionId } }
 			size="small"
 		>
 			<form
@@ -79,16 +77,12 @@ export default function BlockRenameModal( {
 					handleSubmit();
 				} }
 			>
-				<p id={ descriptionId }>
-					{ __( 'Enter a custom name for this block.' ) }
-				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName }
-						label={ __( 'Block name' ) }
-						hideLabelFromVision
+						label={ __( 'Name' ) }
 						help={
 							hasOverridesWarning
 								? __(

diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -61,6 +61,7 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 				<HStack justify="right">
 					<Button
 						variant="tertiary"
+						__next40pxDefaultSize
 						onClick={ () => {
 							setIsRenaming( false );
 						} }
@@ -71,8 +72,9 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 						variant="primary"
 						type="submit"
 						aria-disabled={ ! title }
+						__next40pxDefaultSize
 					>
-						{ __( 'Rename' ) }
+						{ __( 'Save' ) }
 					</Button>
 				</HStack>
 			</VStack>
@@ -160,10 +162,12 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 			/>
 			{ isRenaming && (
 				<Modal
-					title={ __( 'Rename view' ) }
+					title={ __( 'Rename' ) }
 					onRequestClose={ () => {
 						setIsRenaming( false );
 					} }
+					focusOnMount="firstContentElement"
+					size="small"
 				>
 					<RenameItemModalContent
 						dataviewId={ dataviewId }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/rename-modal.js
@@ -36,6 +36,7 @@ export default function RenameModal( { menuTitle, onClose, onSave } ) {
 						value={ editedMenuTitle }
 						placeholder={ __( 'Navigation title' ) }
 						onChange={ setEditedMenuTitle }
+						label={ __( 'Name' ) }
 					/>
 					<HStack justify="right">
 						<Button

diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -377,7 +377,7 @@ test.describe( 'Heading', () => {
 		await editor.clickBlockOptionsMenuItem( 'Rename' );
 		await page
 			.getByRole( 'dialog', { name: 'Rename' } )
-			.getByRole( 'textbox', { name: 'Block name' } )
+			.getByRole( 'textbox', { name: 'Name' } )
 			.fill( 'My new name' );
 
 		await page

diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js
@@ -60,7 +60,7 @@ test.describe( 'Block Renaming', () => {
 			await expect( renameModal ).toBeVisible();
 
 			const nameInput = renameModal.getByRole( 'textbox', {
-				name: 'Block name',
+				name: 'Name',
 			} );
 
 			// Check focus is transferred into the input within the Modal.

diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -75,7 +75,7 @@ test.describe( 'Pattern Overrides', () => {
 			await editor.clickBlockOptionsMenuItem( 'Rename' );
 			await page
 				.getByRole( 'dialog', { name: 'Rename' } )
-				.getByRole( 'textbox', { name: 'Block name' } )
+				.getByRole( 'textbox', { name: 'Name' } )
 				.fill( editableParagraphName );
 			await page
 				.getByRole( 'dialog', { name: 'Rename' } )