Extract pattern-overrides code from the block-editor package

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

@@ -7,6 +7,7 @@ import {
 	Button,
 	TextControl,
 	Modal,
+	__experimentalText as Text,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState, useId } from '@wordpress/element';
@@ -17,14 +18,13 @@ import { speak } from '@wordpress/a11y';
  */
 import isEmptyString from './is-empty-string';
 
+// This component is only used in a non-WP environment.
+// Changes here should likely be duplicated in the `patterns` package as well.
 export default function BlockRenameModal( {
 	blockName,
 	originalBlockName,
 	onClose,
 	onSave,
-	// 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 descriptionId = useId();
@@ -79,23 +79,16 @@ export default function BlockRenameModal( {
 					handleSubmit();
 				} }
 			>
-				<p id={ descriptionId }>
-					{ __( 'Enter a custom name for this block.' ) }
-				</p>
 				<VStack spacing="3">
+					<Text id={ descriptionId }>
+						{ __( 'Enter a custom name for this block.' ) }
+					</Text>
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
 						hideLabelFromVision
-						help={
-							hasOverridesWarning
-								? __(
-										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
-								  )
-								: undefined
-						}
 						placeholder={ originalBlockName }
 						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }

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

@@ -9,6 +9,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import { store as blockEditorStore } from '../../store';
 import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
@@ -17,13 +18,18 @@ import BlockRenameModal from './modal';
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata } = useSelect(
+	const { metadata, onRenameBlock } = useSelect(
 		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+			const settings = getSettings();
+			const { renameBlock } = unlock( settings );
 
 			const _metadata = getBlockAttributes( clientId )?.metadata;
 			return {
 				metadata: _metadata,
+				// Custom extended rename block function.
+				onRenameBlock: renameBlock,
 			};
 		},
 		[ clientId ]
@@ -32,12 +38,6 @@ export default function BlockRenameControl( { 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 ], {
@@ -54,7 +54,11 @@ export default function BlockRenameControl( { clientId } ) {
 		<>
 			<MenuItem
 				onClick={ () => {
-					setRenamingBlock( true );
+					if ( onRenameBlock ) {
+						onRenameBlock( clientId );
+					} else {
+						setRenamingBlock( true );
+					}
 				} }
 				aria-expanded={ renamingBlock }
 				aria-haspopup="dialog"
@@ -65,7 +69,6 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
-					hasOverridesWarning={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
 					onSave={ ( newName ) => {
 						// If the new value is the block's original name (e.g. `Group`)

packages/editor/src/components/provider/index.js

@@ -30,7 +30,9 @@ import StartPageOptions from '../start-page-options';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 
 const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
-const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
+const { PatternsMenuItems, RenameBlockModalControl } = unlock(
+	editPatternsPrivateApis
+);
 
 const noop = () => {};
 
@@ -264,6 +266,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 							{ ! settings.__unstableIsPreviewMode && (
 								<>
 									<PatternsMenuItems />
+									<RenameBlockModalControl />
 									{ mode === 'template-locked' && (
 										<DisableNonPageContentBlocks />
 									) }

packages/editor/src/components/provider/use-block-editor-settings.js

@@ -16,6 +16,7 @@ import {
 	privateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { store as patternsStore } from '@wordpress/patterns';
 
 /**
  * Internal dependencies
@@ -209,6 +210,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 	const { undo, setIsInserterOpened } = useDispatch( editorStore );
 
 	const { saveEntityRecord } = useDispatch( coreStore );
+	const { setRenamingBlock } = unlock( useDispatch( patternsStore ) );
 
 	/**
 	 * Creates a Post entity.
@@ -303,6 +305,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		};
 		lock( blockEditorSettings, {
 			sectionRootClientId,
+			renameBlock: setRenamingBlock,
 		} );
 		return blockEditorSettings;
 	}, [
@@ -327,6 +330,7 @@ function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
 		postType,
 		setIsInserterOpened,
 		sectionRootClientId,
+		setRenamingBlock,
 	] );
 }
 

packages/patterns/src/components/rename-block-modal-control.js

@@ -0,0 +1,176 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+	__experimentalText as Text,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState, useId } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { store as patternsStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+// This component is largely based on the BlockRenameModal component from the block-editor package.
+function BlockRenameModal( { clientId } ) {
+	const { metadata } = useSelect(
+		( select ) => {
+			const { getBlockAttributes } = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			return {
+				metadata: attributes?.metadata,
+			};
+		},
+		[ clientId ]
+	);
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { setRenamingBlock } = unlock( useDispatch( patternsStore ) );
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const customName = metadata?.name ?? '';
+	const hasPatternOverrides =
+		!! customName &&
+		!! metadata?.bindings &&
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
+		);
+
+	const [ editedBlockName, setEditedBlockName ] = useState( customName );
+	const descriptionId = useId();
+
+	const nameHasChanged = editedBlockName !== customName;
+	const nameIsOriginal = editedBlockName === blockInformation?.title;
+	const nameIsEmpty = ! editedBlockName?.trim();
+	const isNameValid = nameHasChanged || nameIsOriginal;
+
+	const autoSelectInputText = ( event ) => event.target.select();
+
+	const closeModal = () => setRenamingBlock( null );
+	const handleSubmit = () => {
+		const message =
+			nameIsOriginal || nameIsEmpty
+				? sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name reset to: "%s".' ),
+						editedBlockName
+				  )
+				: sprintf(
+						/* translators: %s: new name/label for the block */
+						__( 'Block name changed to: "%s".' ),
+						editedBlockName
+				  );
+
+		// Must be assertive to immediately announce change.
+		speak( message, 'assertive' );
+
+		// 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.
+		let newName = editedBlockName;
+		if ( newName === blockInformation?.title || ! newName.trim() ) {
+			newName = undefined;
+		}
+
+		updateBlockAttributes( [ clientId ], {
+			metadata: {
+				...metadata,
+				name: newName,
+			},
+		} );
+
+		// Immediate close avoids ability to hit save multiple times.
+		closeModal();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Rename' ) }
+			onRequestClose={ closeModal }
+			overlayClassName="block-editor-block-rename-modal"
+			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
+			size="small"
+		>
+			<form
+				onSubmit={ ( e ) => {
+					e.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="3">
+					<Text id={ descriptionId }>
+						{ __( 'Enter a custom name for this block.' ) }
+					</Text>
+
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						value={ editedBlockName }
+						label={ __( 'Block name' ) }
+						hideLabelFromVision
+						help={
+							hasPatternOverrides
+								? __(
+										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
+								  )
+								: undefined
+						}
+						placeholder={ blockInformation?.title }
+						onChange={ setEditedBlockName }
+						onFocus={ autoSelectInputText }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ closeModal }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+// Split into a different component to minimize the store subscriptions.
+export default function RenameBlockModalControl() {
+	const { renamingBlockClientId } = useSelect(
+		( select ) => ( {
+			renamingBlockClientId: unlock(
+				select( patternsStore )
+			).getRenamingBlockClientId(),
+		} ),
+		[]
+	);
+	if ( ! renamingBlockClientId ) return null;
+
+	return <BlockRenameModal clientId={ renamingBlockClientId } />;
+}

packages/patterns/src/private-apis.js

@@ -17,6 +17,7 @@ import PatternsMenuItems from './components';
 import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
 import PatternOverridesControls from './components/pattern-overrides-controls';
 import ResetOverridesControl from './components/reset-overrides-control';
+import RenameBlockModalControl from './components/rename-block-modal-control';
 import { useAddPatternCategory } from './private-hooks';
 import {
 	PATTERN_TYPES,
@@ -40,6 +41,7 @@ lock( privateApis, {
 	RenamePatternCategoryModal,
 	PatternOverridesControls,
 	ResetOverridesControl,
+	RenameBlockModalControl,
 	useAddPatternCategory,
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,

packages/patterns/src/store/actions.js

@@ -137,3 +137,14 @@ export function setEditingPattern( clientId, isEditing ) {
 		isEditing,
 	};
 }
+
+/**
+ * Set the renaming block to open the rename modal.
+ * @param {string|null} clientId The client ID of the block to rename, or `null` to close the modal.
+ */
+export function setRenamingBlock( clientId ) {
+	return {
+		type: 'SET_RENAMING_BLOCK',
+		clientId,
+	};
+}

packages/patterns/src/store/reducer.js

@@ -14,6 +14,15 @@ export function isEditingPattern( state = {}, action ) {
 	return state;
 }
 
+export function renamingBlock( state = null, action ) {
+	if ( action?.type === 'SET_RENAMING_BLOCK' ) {
+		return action.clientId;
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	isEditingPattern,
+	renamingBlock,
 } );

packages/patterns/src/store/selectors.js

@@ -8,3 +8,7 @@
 export function isEditingPattern( state, clientId ) {
 	return state.isEditingPattern[ clientId ];
 }
+
+export function getRenamingBlockClientId( state ) {
+	return state.renamingBlock;
+}