Block Editor: Move state logic inside 'BlockRenameModal'

packages/block-editor/src/components/block-rename/modal.js

@@ -11,24 +11,44 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { store as blockEditorStore } from '../../store';
+import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
 
-export default function BlockRenameModal( {
-	blockName,
-	originalBlockName,
-	onClose,
-	onSave,
+export default function BlockRenameModal( { clientId, onClose } ) {
+	const [ editedBlockName, setEditedBlockName ] = useState();
+
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+
+			return {
+				metadata: getBlockAttributes( clientId )?.metadata,
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const blockName = metadata?.name || '';
+	const originalBlockName = blockInformation?.title;
 	// Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
 	// Ideally this should not be inside the block editor package, but we keep it here for simplicity.
-	hasOverridesWarning,
-} ) {
-	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const hasOverridesWarning =
+		!! blockName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
 
-	const nameHasChanged = editedBlockName !== blockName;
+	const nameHasChanged =
+		editedBlockName !== undefined && editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
 	const nameIsEmpty = isEmptyString( editedBlockName );
 
@@ -37,6 +57,8 @@ export default function BlockRenameModal( {
 	const autoSelectInputText = ( event ) => event.target.select();
 
 	const handleSubmit = () => {
+		const newName =
+			nameIsOriginal || nameIsEmpty ? undefined : editedBlockName;
 		const message =
 			nameIsOriginal || nameIsEmpty
 				? sprintf(
@@ -52,7 +74,12 @@ export default function BlockRenameModal( {
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
-		onSave( editedBlockName );
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...metadata,
+				name: newName,
+			},
+		} );
 
 		// Immediate close avoids ability to hit save multiple times.
 		onClose();
@@ -81,7 +108,7 @@ export default function BlockRenameModal( {
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
-						value={ editedBlockName }
+						value={ editedBlockName ?? blockName }
 						label={ __( 'Name' ) }
 						help={
 							hasOverridesWarning
@@ -105,7 +132,8 @@ export default function BlockRenameModal( {
 
 						<Button
 							__next40pxDefaultSize
-							aria-disabled={ ! isNameValid }
+							accessibleWhenDisabled
+							disabled={ ! isNameValid }
 							variant="primary"
 							type="submit"
 						>

packages/block-editor/src/components/block-rename/rename-control.js

@@ -2,54 +2,17 @@
  * WordPress dependencies
  */
 import { MenuItem } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
-import { useBlockDisplayInformation } from '..';
-import isEmptyString from './is-empty-string';
 import BlockRenameModal from './modal';
 
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-
-			const _metadata = getBlockAttributes( clientId )?.metadata;
-			return {
-				metadata: _metadata,
-			};
-		},
-		[ clientId ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const customName = metadata?.name;
-	const hasPatternOverrides =
-		!! customName &&
-		!! metadata?.bindings &&
-		Object.values( metadata.bindings ).some(
-			( binding ) => binding.source === 'core/pattern-overrides'
-		);
-
-	function onChange( newName ) {
-		updateBlockAttributes( [ clientId ], {
-			metadata: {
-				...metadata,
-				name: newName,
-			},
-		} );
-	}
-
-	const blockInformation = useBlockDisplayInformation( clientId );
-
 	return (
 		<>
 			<MenuItem
@@ -63,23 +26,8 @@ export default function BlockRenameControl( { clientId } ) {
 			</MenuItem>
 			{ renamingBlock && (
 				<BlockRenameModal
-					blockName={ customName || '' }
-					originalBlockName={ blockInformation?.title }
-					hasOverridesWarning={ hasPatternOverrides }
+					clientId={ clientId }
 					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName ) => {
-						// If the new value is the block's original name (e.g. `Group`)
-						// or it is an empty string then assume the intent is to reset
-						// the value. Therefore reset the metadata.
-						if (
-							newName === blockInformation?.title ||
-							isEmptyString( newName )
-						) {
-							newName = undefined;
-						}
-
-						onChange( newName );
-					} }
 				/>
 			) }
 		</>

test/e2e/specs/editor/various/block-renaming.spec.js

@@ -126,8 +126,9 @@ test.describe( 'Block Renaming', () => {
 			await pageUtils.pressKeys( 'primary+a' );
 			await page.keyboard.press( 'Delete' );
 
-			// Check placeholder for input is the original block name.
+			// Check that input is empty and placeholder is the original block name.
 			await expect( nameInput ).toHaveAttribute( 'placeholder', 'Group' );
+			await expect( nameInput ).toHaveValue( '' );
 
 			// It should be possible to submit empty.
 			await expect( saveButton ).toBeEnabled();