diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js index 2679c8157cc0a2..3f99e71b7b699e 100644 --- a/packages/block-editor/src/components/block-rename/modal.js +++ b/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( { diff --git a/packages/block-editor/src/components/block-rename/rename-control.js b/packages/block-editor/src/components/block-rename/rename-control.js index fb6b446782aa78..641ff7cebe951b 100644 --- a/packages/block-editor/src/components/block-rename/rename-control.js +++ b/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 ( <> { renamingBlock && ( 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 ); - } } /> ) } diff --git a/test/e2e/specs/editor/various/block-renaming.spec.js b/test/e2e/specs/editor/various/block-renaming.spec.js index 6998683cb96163..5b7ac1226d1589 100644 --- a/test/e2e/specs/editor/various/block-renaming.spec.js +++ b/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();