From 95a6b3b6dcb5092663e2d750523b9e694de3e04b Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 5 Mar 2024 17:00:37 +0800
Subject: [PATCH 1/7] Refine renaming flow for blocks with overrides

---
 .../src/components/block-rename/modal.js      |  65 +++++++---
 .../components/block-rename/rename-control.js |  47 +++++--
 .../src/hooks/use-bindings-attributes.js      |  31 ++++-
 packages/block-editor/src/private-apis.js     |   3 +
 .../editor/src/hooks/pattern-overrides.js     |  39 ++++--
 .../src/components/allow-overrides-modal.js   |  92 +++++++++++++
 .../components/pattern-overrides-controls.js  | 122 ++++++++++++++++++
 packages/patterns/src/components/style.scss   |   5 +
 .../components/use-set-pattern-bindings.js    | 120 -----------------
 packages/patterns/src/constants.js            |   2 +
 packages/patterns/src/private-apis.js         |   4 +-
 test/e2e/specs/editor/blocks/heading.spec.js  |   1 -
 12 files changed, 367 insertions(+), 164 deletions(-)
 create mode 100644 packages/patterns/src/components/allow-overrides-modal.js
 create mode 100644 packages/patterns/src/components/pattern-overrides-controls.js
 delete mode 100644 packages/patterns/src/components/use-set-pattern-bindings.js

diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
index 8e9ffc1d81b63a..98c074f5aba35c 100644
--- a/packages/block-editor/src/components/block-rename/modal.js
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -7,38 +7,49 @@ import {
 	Button,
 	TextControl,
 	Modal,
+	ToggleControl,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import isEmptyString from './is-empty-string';
+import { store as blockEditorStore } from '../../store';
 
 export default function BlockRenameModal( {
 	blockName,
 	originalBlockName,
 	onClose,
 	onSave,
+	initialAllowOverrides,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
+	const [ allowOverrides, setAllowOverrides ] = useState(
+		initialAllowOverrides
+	);
+	const { isEditingPattern } = useSelect(
+		( select ) => ( {
+			isEditingPattern:
+				select( blockEditorStore ).getSettings()?.postType ===
+				'wp_block',
+		} ),
+		[]
+	);
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
 	const nameIsEmpty = isEmptyString( editedBlockName );
 
 	const isNameValid = nameHasChanged || nameIsOriginal;
+	const isSaveDisabled =
+		! isNameValid && allowOverrides === initialAllowOverrides;
 
 	const autoSelectInputText = ( event ) => event.target.select();
 
-	const dialogDescription = useInstanceId(
-		BlockRenameModal,
-		`block-editor-rename-modal__description`
-	);
-
 	const handleSubmit = () => {
 		const message =
 			nameIsOriginal || nameIsEmpty
@@ -55,7 +66,10 @@ export default function BlockRenameModal( {
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
-		onSave( editedBlockName );
+		onSave(
+			editedBlockName,
+			isEditingPattern ? allowOverrides : undefined
+		);
 
 		// Immediate close avoids ability to hit save multiple times.
 		onClose();
@@ -66,19 +80,14 @@ export default function BlockRenameModal( {
 			title={ __( 'Rename' ) }
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
-			aria={ {
-				describedby: dialogDescription,
-			} }
 			focusOnMount="firstContentElement"
+			size="small"
 		>
-			<p id={ dialogDescription }>
-				{ __( 'Enter a custom name for this block.' ) }
-			</p>
 			<form
 				onSubmit={ ( e ) => {
 					e.preventDefault();
 
-					if ( ! isNameValid ) {
+					if ( isSaveDisabled ) {
 						return;
 					}
 
@@ -91,11 +100,33 @@ export default function BlockRenameModal( {
 						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
-						hideLabelFromVision
+						help={ __(
+							'Naming your block will help people understand its purpose.'
+						) }
 						placeholder={ originalBlockName }
-						onChange={ setEditedBlockName }
+						onChange={ ( newName ) => {
+							setEditedBlockName( newName );
+							if ( newName === '' ) {
+								setAllowOverrides( false );
+							}
+						} }
 						onFocus={ autoSelectInputText }
 					/>
+					{ isEditingPattern ? (
+						<ToggleControl
+							label={ __( 'Allow overrides' ) }
+							help={ __(
+								'Allow overriding this block in instances where this pattern is used.'
+							) }
+							checked={ allowOverrides }
+							onChange={ ( checked ) => {
+								if ( ! nameIsEmpty ) {
+									setAllowOverrides( checked );
+								}
+							} }
+							disabled={ nameIsEmpty }
+						/>
+					) : null }
 					<HStack justify="right">
 						<Button
 							__next40pxDefaultSize
@@ -107,7 +138,7 @@ export default function BlockRenameModal( {
 
 						<Button
 							__next40pxDefaultSize
-							aria-disabled={ ! isNameValid }
+							aria-disabled={ isSaveDisabled }
 							variant="primary"
 							type="submit"
 						>
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 1f646126d14a4b..6f6313989a540d 100644
--- a/packages/block-editor/src/components/block-rename/rename-control.js
+++ b/packages/block-editor/src/components/block-rename/rename-control.js
@@ -13,17 +13,25 @@ import { store as blockEditorStore } from '../../store';
 import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
 import BlockRenameModal from './modal';
+import {
+	BLOCK_BINDINGS_ALLOWED_BLOCKS,
+	canBindBlock,
+	addBindings,
+	removeBindings,
+} from '../../hooks/use-bindings-attributes';
 
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata } = useSelect(
+	const { metadata, blockName } = useSelect(
 		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
+			const { getBlockAttributes, getBlockName } =
+				select( blockEditorStore );
 
 			const _metadata = getBlockAttributes( clientId )?.metadata;
 			return {
 				metadata: _metadata,
+				blockName: getBlockName( clientId ),
 			};
 		},
 		[ clientId ]
@@ -32,13 +40,33 @@ export default function BlockRenameControl( { clientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const customName = metadata?.name;
+	const hasPatternOverrides =
+		!! metadata?.bindings &&
+		!! BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ]?.every(
+			( attributeName ) =>
+				metadata.bindings[ attributeName ]?.source ===
+				'core/pattern-overrides'
+		);
+
+	function onChange( newName, allowOverrides ) {
+		const updatedMetadata = { ...metadata, name: newName };
+		if ( allowOverrides !== undefined && canBindBlock( blockName ) ) {
+			const syncedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
+			updatedMetadata.bindings = allowOverrides
+				? addBindings(
+						updatedMetadata.bindings,
+						syncedAttributes,
+						'core/pattern-overrides'
+				  )
+				: removeBindings(
+						updatedMetadata.bindings,
+						syncedAttributes,
+						'core/pattern-overrides'
+				  );
+		}
 
-	function onChange( newName ) {
 		updateBlockAttributes( [ clientId ], {
-			metadata: {
-				...( metadata && metadata ),
-				name: newName,
-			},
+			metadata: updatedMetadata,
 		} );
 	}
 
@@ -59,8 +87,9 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
+					initialAllowOverrides={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName ) => {
+					onSave={ ( newName, allowOverrides ) => {
 						// 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.
@@ -71,7 +100,7 @@ export default function BlockRenameControl( { clientId } ) {
 							newName = undefined;
 						}
 
-						onChange( newName );
+						onChange( newName, allowOverrides );
 					} }
 				/>
 			) }
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index 5cd8cb46b3b7e7..e618b4f0ad5fee 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -23,7 +23,7 @@ import { unlock } from '../lock-unlock';
  * @return {WPHigherOrderComponent} Higher-order component.
  */
 
-const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
 	'core/image': [ 'url', 'title', 'alt' ],
@@ -56,6 +56,35 @@ export function canBindAttribute( blockName, attributeName ) {
 	);
 }
 
+export function removeBindings( bindings, syncedAttributes, source ) {
+	let updatedBindings = {};
+	for ( const attributeName of syncedAttributes ) {
+		// Omit any bindings that's not the same source from the `updatedBindings` object.
+		if (
+			bindings?.[ attributeName ]?.source !== source &&
+			bindings?.[ attributeName ]?.source !== undefined
+		) {
+			updatedBindings[ attributeName ] = bindings[ attributeName ];
+		}
+	}
+	if ( ! Object.keys( updatedBindings ).length ) {
+		updatedBindings = undefined;
+	}
+	return updatedBindings;
+}
+
+export function addBindings( bindings, syncedAttributes, source ) {
+	const updatedBindings = { ...bindings };
+	for ( const attributeName of syncedAttributes ) {
+		if ( ! bindings?.[ attributeName ] ) {
+			updatedBindings[ attributeName ] = {
+				source,
+			};
+		}
+	}
+	return updatedBindings;
+}
+
 /**
  * This component is responsible for detecting and
  * propagating data changes from the source to the block.
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index b51c019e791788..11b33c7354031c 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -37,6 +37,7 @@ import {
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
+import { addBindings, removeBindings } from './hooks/use-bindings-attributes';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -74,4 +75,6 @@ lock( privateApis, {
 	requiresWrapperOnCopy,
 	PrivateRichText,
 	reusableBlocksSelectKey,
+	addBindings,
+	removeBindings,
 } );
diff --git a/packages/editor/src/hooks/pattern-overrides.js b/packages/editor/src/hooks/pattern-overrides.js
index 442ce70a2bf71c..7b5b6ced083400 100644
--- a/packages/editor/src/hooks/pattern-overrides.js
+++ b/packages/editor/src/hooks/pattern-overrides.js
@@ -6,6 +6,7 @@ import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useBlockEditingMode } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -14,7 +15,7 @@ import { store as editorStore } from '../store';
 import { unlock } from '../lock-unlock';
 
 const {
-	useSetPatternBindings,
+	PatternOverridesControls,
 	ResetOverridesControl,
 	PATTERN_TYPES,
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
@@ -38,7 +39,6 @@ const withPatternOverrideControls = createHigherOrderComponent(
 		return (
 			<>
 				<BlockEdit { ...props } />
-				{ isSupportedBlock && <BindingUpdater { ...props } /> }
 				{ props.isSelected && isSupportedBlock && (
 					<ControlsWithStoreSubscription { ...props } />
 				) }
@@ -47,22 +47,24 @@ const withPatternOverrideControls = createHigherOrderComponent(
 	}
 );
 
-function BindingUpdater( props ) {
-	const postType = useSelect(
-		( select ) => select( editorStore ).getCurrentPostType(),
-		[]
-	);
-	useSetPatternBindings( props, postType );
-	return null;
-}
-
 // Split into a separate component to avoid a store subscription
 // on every block.
 function ControlsWithStoreSubscription( props ) {
 	const blockEditingMode = useBlockEditingMode();
-	const isEditingPattern = useSelect(
-		( select ) =>
-			select( editorStore ).getCurrentPostType() === PATTERN_TYPES.user,
+	const { hasPatternOverridesSource, isEditingPattern } = useSelect(
+		( select ) => {
+			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
+
+			return {
+				// For editing link to the site editor if the theme and user permissions support it.
+				hasPatternOverridesSource: !! getBlockBindingsSource(
+					'core/pattern-overrides'
+				),
+				isEditingPattern:
+					select( editorStore ).getCurrentPostType() ===
+					PATTERN_TYPES.user,
+			};
+		},
 		[]
 	);
 
@@ -73,14 +75,23 @@ function ControlsWithStoreSubscription( props ) {
 			( binding ) => binding.source === 'core/pattern-overrides'
 		);
 
+	const shouldShowPatternOverridesControls =
+		isEditingPattern && blockEditingMode === 'default';
 	const shouldShowResetOverridesControl =
 		! isEditingPattern &&
 		!! props.attributes.metadata?.name &&
 		blockEditingMode !== 'disabled' &&
 		hasPatternBindings;
 
+	if ( ! hasPatternOverridesSource ) {
+		return null;
+	}
+
 	return (
 		<>
+			{ shouldShowPatternOverridesControls && (
+				<PatternOverridesControls { ...props } />
+			) }
 			{ shouldShowResetOverridesControl && (
 				<ResetOverridesControl { ...props } />
 			) }
diff --git a/packages/patterns/src/components/allow-overrides-modal.js b/packages/patterns/src/components/allow-overrides-modal.js
new file mode 100644
index 00000000000000..7546cc411bb80f
--- /dev/null
+++ b/packages/patterns/src/components/allow-overrides-modal.js
@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	Button,
+	TextControl,
+	Modal,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+export default function AllowOverridesModal( {
+	placeholder,
+	onClose,
+	onSave,
+} ) {
+	const [ editedBlockName, setEditedBlockName ] = useState( '' );
+
+	const isNameValid = !! editedBlockName.trim();
+
+	const handleSubmit = () => {
+		const message = 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' );
+		onSave( editedBlockName );
+
+		// Immediate close avoids ability to hit save multiple times.
+		onClose();
+	};
+
+	return (
+		<Modal
+			title={ __( 'Allow overrides' ) }
+			onRequestClose={ onClose }
+			overlayClassName="block-editor-block-allow-overrides-modal"
+			focusOnMount="firstContentElement"
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+
+					if ( ! isNameValid ) {
+						return;
+					}
+
+					handleSubmit();
+				} }
+			>
+				<VStack spacing="3">
+					<TextControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						value={ editedBlockName }
+						label={ __( 'Give the block a name' ) }
+						help={ __(
+							'Naming your block will help people understand its purpose. e.g. recipe title, recipe photo, recipe ingredients, recipe instructions.'
+						) }
+						placeholder={ placeholder }
+						onChange={ setEditedBlockName }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ onClose }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+
+						<Button
+							__next40pxDefaultSize
+							aria-disabled={ ! isNameValid }
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
new file mode 100644
index 00000000000000..65eae1e8d01694
--- /dev/null
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useId } from '@wordpress/element';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { ToggleControl, BaseControl, Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import {
+	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
+	PATTERN_OVERRIDES_BINDING_SOURCE,
+} from '../constants';
+import AllowOverridesModal from './allow-overrides-modal';
+
+const { removeBindings, addBindings } = unlock( blockEditorPrivateApis );
+
+function PatternOverridesControls( { attributes, name, setAttributes } ) {
+	const controlId = useId();
+	const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
+		useState( false );
+
+	const syncedAttributes = PARTIAL_SYNCING_SUPPORTED_BLOCKS[ name ];
+	const attributeSources = syncedAttributes.map(
+		( attributeName ) =>
+			attributes.metadata?.bindings?.[ attributeName ]?.source
+	);
+	const isConnectedToOtherSources = attributeSources.every(
+		( source ) => source && source !== 'core/pattern-overrides'
+	);
+
+	function updateBindings( isChecked, customName ) {
+		if ( isChecked && ! attributes.metadata?.name && ! customName ) {
+			setShowAllowOverridesModal( true );
+			return;
+		}
+
+		const prevBindings = attributes?.metadata?.bindings;
+		const updatedBindings = isChecked
+			? addBindings(
+					prevBindings,
+					syncedAttributes,
+					PATTERN_OVERRIDES_BINDING_SOURCE
+			  )
+			: removeBindings(
+					prevBindings,
+					syncedAttributes,
+					PATTERN_OVERRIDES_BINDING_SOURCE
+			  );
+
+		const updatedMetadata = {
+			...attributes.metadata,
+			bindings: updatedBindings,
+		};
+
+		if ( customName ) {
+			updatedMetadata.name = customName;
+		}
+
+		setAttributes( {
+			metadata: updatedMetadata,
+		} );
+	}
+
+	// Avoid overwriting other (e.g. meta) bindings.
+	if ( isConnectedToOtherSources ) return null;
+
+	const hasName = attributes.metadata?.name;
+
+	return (
+		<>
+			<InspectorControls group="advanced">
+				<BaseControl
+					id={ controlId }
+					label={ __( 'Overrides' ) }
+					help={ __(
+						'Allow attributes within this block to be overridden by pattern instances.'
+					) }
+				>
+					{ hasName ? (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Allow overrides' ) }
+							checked={ attributeSources.some(
+								( source ) =>
+									source === 'core/pattern-overrides'
+							) }
+							onChange={ ( isChecked ) => {
+								updateBindings( isChecked );
+							} }
+						/>
+					) : (
+						<Button
+							className="pattern-overrides-control__allow-overrides-button"
+							variant="secondary"
+							onClick={ () => updateBindings( true ) }
+						>
+							{ __( 'Allow overrides' ) }
+						</Button>
+					) }
+				</BaseControl>
+			</InspectorControls>
+
+			{ showAllowOverridesModal && (
+				<AllowOverridesModal
+					onClose={ () => setShowAllowOverridesModal( false ) }
+					onSave={ ( newName ) => {
+						updateBindings( true, newName );
+					} }
+				/>
+			) }
+		</>
+	);
+}
+
+export default PatternOverridesControls;
diff --git a/packages/patterns/src/components/style.scss b/packages/patterns/src/components/style.scss
index e913c924a2149c..36c441ed20659f 100644
--- a/packages/patterns/src/components/style.scss
+++ b/packages/patterns/src/components/style.scss
@@ -38,3 +38,8 @@
 		width: $grid-unit * 40;
 	}
 }
+
+.pattern-overrides-control__allow-overrides-button {
+	width: 100%;
+	justify-content: center;
+}
diff --git a/packages/patterns/src/components/use-set-pattern-bindings.js b/packages/patterns/src/components/use-set-pattern-bindings.js
deleted file mode 100644
index 261187a91088c1..00000000000000
--- a/packages/patterns/src/components/use-set-pattern-bindings.js
+++ /dev/null
@@ -1,120 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { usePrevious } from '@wordpress/compose';
-import { store as blocksStore } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { PARTIAL_SYNCING_SUPPORTED_BLOCKS } from '../constants';
-
-import { unlock } from '../lock-unlock';
-
-function removeBindings( bindings, syncedAttributes ) {
-	let updatedBindings = {};
-	for ( const attributeName of syncedAttributes ) {
-		// Omit any pattern override bindings from the `updatedBindings` object.
-		if (
-			bindings?.[ attributeName ]?.source !== 'core/pattern-overrides' &&
-			bindings?.[ attributeName ]?.source !== undefined
-		) {
-			updatedBindings[ attributeName ] = bindings[ attributeName ];
-		}
-	}
-	if ( ! Object.keys( updatedBindings ).length ) {
-		updatedBindings = undefined;
-	}
-	return updatedBindings;
-}
-
-function addBindings( bindings, syncedAttributes ) {
-	const updatedBindings = { ...bindings };
-	for ( const attributeName of syncedAttributes ) {
-		if ( ! bindings?.[ attributeName ] ) {
-			updatedBindings[ attributeName ] = {
-				source: 'core/pattern-overrides',
-			};
-		}
-	}
-	return updatedBindings;
-}
-
-export default function useSetPatternBindings(
-	{ name, attributes, setAttributes },
-	currentPostType
-) {
-	const hasPatternOverridesSource = useSelect( ( select ) => {
-		const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-
-		// For editing link to the site editor if the theme and user permissions support it.
-		return !! getBlockBindingsSource( 'core/pattern-overrides' );
-	}, [] );
-
-	const metadataName = attributes?.metadata?.name ?? '';
-	const prevMetadataName = usePrevious( metadataName ) ?? '';
-	const bindings = attributes?.metadata?.bindings;
-
-	useEffect( () => {
-		// Bindings should only be created when editing a wp_block post type,
-		// and also when there's a change to the user-given name for the block.
-		// Also check that the pattern overrides source is registered.
-		if (
-			! hasPatternOverridesSource ||
-			currentPostType !== 'wp_block' ||
-			metadataName === prevMetadataName
-		) {
-			return;
-		}
-
-		const syncedAttributes = PARTIAL_SYNCING_SUPPORTED_BLOCKS[ name ];
-		const attributeSources = syncedAttributes.map(
-			( attributeName ) =>
-				attributes.metadata?.bindings?.[ attributeName ]?.source
-		);
-		const isConnectedToOtherSources = attributeSources.every(
-			( source ) => source && source !== 'core/pattern-overrides'
-		);
-
-		// Avoid overwriting other (e.g. meta) bindings.
-		if ( isConnectedToOtherSources ) {
-			return;
-		}
-
-		// The user-given name for the block was deleted, remove the bindings.
-		if ( ! metadataName?.length && prevMetadataName?.length ) {
-			const updatedBindings = removeBindings(
-				bindings,
-				syncedAttributes
-			);
-			setAttributes( {
-				metadata: {
-					...attributes.metadata,
-					bindings: updatedBindings,
-				},
-			} );
-		}
-
-		// The user-given name for the block was set, set the bindings.
-		if ( ! prevMetadataName?.length && metadataName.length ) {
-			const updatedBindings = addBindings( bindings, syncedAttributes );
-			setAttributes( {
-				metadata: {
-					...attributes.metadata,
-					bindings: updatedBindings,
-				},
-			} );
-		}
-	}, [
-		hasPatternOverridesSource,
-		bindings,
-		prevMetadataName,
-		metadataName,
-		currentPostType,
-		name,
-		attributes.metadata,
-		setAttributes,
-	] );
-}
diff --git a/packages/patterns/src/constants.js b/packages/patterns/src/constants.js
index 99d6a0fa975a8d..99563a1a16787f 100644
--- a/packages/patterns/src/constants.js
+++ b/packages/patterns/src/constants.js
@@ -22,3 +22,5 @@ export const PARTIAL_SYNCING_SUPPORTED_BLOCKS = {
 	'core/button': [ 'text', 'url', 'linkTarget', 'rel' ],
 	'core/image': [ 'id', 'url', 'title', 'alt' ],
 };
+
+export const PATTERN_OVERRIDES_BINDING_SOURCE = 'core/pattern-overrides';
diff --git a/packages/patterns/src/private-apis.js b/packages/patterns/src/private-apis.js
index 15ff161305f4a6..05417de2b2c669 100644
--- a/packages/patterns/src/private-apis.js
+++ b/packages/patterns/src/private-apis.js
@@ -15,7 +15,7 @@ import { isOverridableBlock } from './api';
 import RenamePatternModal from './components/rename-pattern-modal';
 import PatternsMenuItems from './components';
 import RenamePatternCategoryModal from './components/rename-pattern-category-modal';
-import useSetPatternBindings from './components/use-set-pattern-bindings';
+import PatternOverridesControls from './components/pattern-overrides-controls';
 import ResetOverridesControl from './components/reset-overrides-control';
 import { useAddPatternCategory } from './private-hooks';
 import {
@@ -38,7 +38,7 @@ lock( privateApis, {
 	RenamePatternModal,
 	PatternsMenuItems,
 	RenamePatternCategoryModal,
-	useSetPatternBindings,
+	PatternOverridesControls,
 	ResetOverridesControl,
 	useAddPatternCategory,
 	PATTERN_TYPES,
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index 5f05ea82079564..caf7378084efe9 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -379,7 +379,6 @@ test.describe( 'Heading', () => {
 			.getByRole( 'dialog', { name: 'Rename' } )
 			.getByRole( 'textbox', { name: 'Block name' } )
 			.fill( 'My new name' );
-
 		await page
 			.getByRole( 'dialog', { name: 'Rename' } )
 			.getByRole( 'button', { name: 'Save' } )

From 28d79272d2cb5cfe60de4148b39841c2503324e5 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Wed, 3 Apr 2024 21:34:39 +0800
Subject: [PATCH 2/7] Design feedback

---
 .../src/components/block-rename/modal.js      | 68 ++++++-------------
 .../components/block-rename/rename-control.js | 48 ++++---------
 .../src/hooks/use-bindings-attributes.js      | 31 +--------
 packages/block-editor/src/private-apis.js     |  3 -
 .../src/components/allow-overrides-modal.js   | 12 +++-
 .../components/pattern-overrides-controls.js  | 50 +++++++++-----
 .../editor/various/pattern-overrides.spec.js  | 11 +++
 7 files changed, 87 insertions(+), 136 deletions(-)

diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
index 98c074f5aba35c..dd929573647b42 100644
--- a/packages/block-editor/src/components/block-rename/modal.js
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -7,46 +7,31 @@ import {
 	Button,
 	TextControl,
 	Modal,
-	ToggleControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import isEmptyString from './is-empty-string';
-import { store as blockEditorStore } from '../../store';
 
 export default function BlockRenameModal( {
 	blockName,
 	originalBlockName,
 	onClose,
 	onSave,
-	initialAllowOverrides,
+	hasOverridesWarning,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( blockName );
-	const [ allowOverrides, setAllowOverrides ] = useState(
-		initialAllowOverrides
-	);
-	const { isEditingPattern } = useSelect(
-		( select ) => ( {
-			isEditingPattern:
-				select( blockEditorStore ).getSettings()?.postType ===
-				'wp_block',
-		} ),
-		[]
-	);
+	const descriptionId = useId();
 
 	const nameHasChanged = editedBlockName !== blockName;
 	const nameIsOriginal = editedBlockName === originalBlockName;
 	const nameIsEmpty = isEmptyString( editedBlockName );
 
 	const isNameValid = nameHasChanged || nameIsOriginal;
-	const isSaveDisabled =
-		! isNameValid && allowOverrides === initialAllowOverrides;
 
 	const autoSelectInputText = ( event ) => event.target.select();
 
@@ -66,10 +51,7 @@ export default function BlockRenameModal( {
 
 		// Must be assertive to immediately announce change.
 		speak( message, 'assertive' );
-		onSave(
-			editedBlockName,
-			isEditingPattern ? allowOverrides : undefined
-		);
+		onSave( editedBlockName );
 
 		// Immediate close avoids ability to hit save multiple times.
 		onClose();
@@ -81,52 +63,41 @@ export default function BlockRenameModal( {
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-rename-modal"
 			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
 			size="small"
 		>
 			<form
 				onSubmit={ ( e ) => {
 					e.preventDefault();
 
-					if ( isSaveDisabled ) {
+					if ( ! isNameValid ) {
 						return;
 					}
 
 					handleSubmit();
 				} }
 			>
+				<p id={ descriptionId }>
+					{ __( 'Enter a custom name for this block.' ) }
+				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
-						help={ __(
-							'Naming your block will help people understand its purpose.'
-						) }
+						hideLabelFromVision
+						help={
+							hasOverridesWarning
+								? __(
+										'This block allows overrides. Note that renaming could potentially break existing connections.'
+								  )
+								: undefined
+						}
 						placeholder={ originalBlockName }
-						onChange={ ( newName ) => {
-							setEditedBlockName( newName );
-							if ( newName === '' ) {
-								setAllowOverrides( false );
-							}
-						} }
+						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }
 					/>
-					{ isEditingPattern ? (
-						<ToggleControl
-							label={ __( 'Allow overrides' ) }
-							help={ __(
-								'Allow overriding this block in instances where this pattern is used.'
-							) }
-							checked={ allowOverrides }
-							onChange={ ( checked ) => {
-								if ( ! nameIsEmpty ) {
-									setAllowOverrides( checked );
-								}
-							} }
-							disabled={ nameIsEmpty }
-						/>
-					) : null }
 					<HStack justify="right">
 						<Button
 							__next40pxDefaultSize
@@ -138,7 +109,8 @@ export default function BlockRenameModal( {
 
 						<Button
 							__next40pxDefaultSize
-							aria-disabled={ isSaveDisabled }
+							aria-disabled={ ! isNameValid }
+							isDestructive={ hasOverridesWarning }
 							variant="primary"
 							type="submit"
 						>
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 6f6313989a540d..fb6b446782aa78 100644
--- a/packages/block-editor/src/components/block-rename/rename-control.js
+++ b/packages/block-editor/src/components/block-rename/rename-control.js
@@ -13,25 +13,17 @@ import { store as blockEditorStore } from '../../store';
 import { useBlockDisplayInformation } from '..';
 import isEmptyString from './is-empty-string';
 import BlockRenameModal from './modal';
-import {
-	BLOCK_BINDINGS_ALLOWED_BLOCKS,
-	canBindBlock,
-	addBindings,
-	removeBindings,
-} from '../../hooks/use-bindings-attributes';
 
 export default function BlockRenameControl( { clientId } ) {
 	const [ renamingBlock, setRenamingBlock ] = useState( false );
 
-	const { metadata, blockName } = useSelect(
+	const { metadata } = useSelect(
 		( select ) => {
-			const { getBlockAttributes, getBlockName } =
-				select( blockEditorStore );
+			const { getBlockAttributes } = select( blockEditorStore );
 
 			const _metadata = getBlockAttributes( clientId )?.metadata;
 			return {
 				metadata: _metadata,
-				blockName: getBlockName( clientId ),
 			};
 		},
 		[ clientId ]
@@ -41,32 +33,18 @@ export default function BlockRenameControl( { clientId } ) {
 
 	const customName = metadata?.name;
 	const hasPatternOverrides =
+		!! customName &&
 		!! metadata?.bindings &&
-		!! BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ]?.every(
-			( attributeName ) =>
-				metadata.bindings[ attributeName ]?.source ===
-				'core/pattern-overrides'
+		Object.values( metadata.bindings ).some(
+			( binding ) => binding.source === 'core/pattern-overrides'
 		);
 
-	function onChange( newName, allowOverrides ) {
-		const updatedMetadata = { ...metadata, name: newName };
-		if ( allowOverrides !== undefined && canBindBlock( blockName ) ) {
-			const syncedAttributes = BLOCK_BINDINGS_ALLOWED_BLOCKS[ blockName ];
-			updatedMetadata.bindings = allowOverrides
-				? addBindings(
-						updatedMetadata.bindings,
-						syncedAttributes,
-						'core/pattern-overrides'
-				  )
-				: removeBindings(
-						updatedMetadata.bindings,
-						syncedAttributes,
-						'core/pattern-overrides'
-				  );
-		}
-
+	function onChange( newName ) {
 		updateBlockAttributes( [ clientId ], {
-			metadata: updatedMetadata,
+			metadata: {
+				...metadata,
+				name: newName,
+			},
 		} );
 	}
 
@@ -87,9 +65,9 @@ export default function BlockRenameControl( { clientId } ) {
 				<BlockRenameModal
 					blockName={ customName || '' }
 					originalBlockName={ blockInformation?.title }
-					initialAllowOverrides={ hasPatternOverrides }
+					hasOverridesWarning={ hasPatternOverrides }
 					onClose={ () => setRenamingBlock( false ) }
-					onSave={ ( newName, allowOverrides ) => {
+					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.
@@ -100,7 +78,7 @@ export default function BlockRenameControl( { clientId } ) {
 							newName = undefined;
 						}
 
-						onChange( newName, allowOverrides );
+						onChange( newName );
 					} }
 				/>
 			) }
diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js
index e618b4f0ad5fee..5cd8cb46b3b7e7 100644
--- a/packages/block-editor/src/hooks/use-bindings-attributes.js
+++ b/packages/block-editor/src/hooks/use-bindings-attributes.js
@@ -23,7 +23,7 @@ import { unlock } from '../lock-unlock';
  * @return {WPHigherOrderComponent} Higher-order component.
  */
 
-export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
 	'core/image': [ 'url', 'title', 'alt' ],
@@ -56,35 +56,6 @@ export function canBindAttribute( blockName, attributeName ) {
 	);
 }
 
-export function removeBindings( bindings, syncedAttributes, source ) {
-	let updatedBindings = {};
-	for ( const attributeName of syncedAttributes ) {
-		// Omit any bindings that's not the same source from the `updatedBindings` object.
-		if (
-			bindings?.[ attributeName ]?.source !== source &&
-			bindings?.[ attributeName ]?.source !== undefined
-		) {
-			updatedBindings[ attributeName ] = bindings[ attributeName ];
-		}
-	}
-	if ( ! Object.keys( updatedBindings ).length ) {
-		updatedBindings = undefined;
-	}
-	return updatedBindings;
-}
-
-export function addBindings( bindings, syncedAttributes, source ) {
-	const updatedBindings = { ...bindings };
-	for ( const attributeName of syncedAttributes ) {
-		if ( ! bindings?.[ attributeName ] ) {
-			updatedBindings[ attributeName ] = {
-				source,
-			};
-		}
-	}
-	return updatedBindings;
-}
-
 /**
  * This component is responsible for detecting and
  * propagating data changes from the source to the block.
diff --git a/packages/block-editor/src/private-apis.js b/packages/block-editor/src/private-apis.js
index 11b33c7354031c..b51c019e791788 100644
--- a/packages/block-editor/src/private-apis.js
+++ b/packages/block-editor/src/private-apis.js
@@ -37,7 +37,6 @@ import {
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
-import { addBindings, removeBindings } from './hooks/use-bindings-attributes';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -75,6 +74,4 @@ lock( privateApis, {
 	requiresWrapperOnCopy,
 	PrivateRichText,
 	reusableBlocksSelectKey,
-	addBindings,
-	removeBindings,
 } );
diff --git a/packages/patterns/src/components/allow-overrides-modal.js b/packages/patterns/src/components/allow-overrides-modal.js
index 7546cc411bb80f..5200c861299a58 100644
--- a/packages/patterns/src/components/allow-overrides-modal.js
+++ b/packages/patterns/src/components/allow-overrides-modal.js
@@ -9,7 +9,7 @@ import {
 	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useId } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
 
 export default function AllowOverridesModal( {
@@ -18,6 +18,7 @@ export default function AllowOverridesModal( {
 	onSave,
 } ) {
 	const [ editedBlockName, setEditedBlockName ] = useState( '' );
+	const descriptionId = useId();
 
 	const isNameValid = !! editedBlockName.trim();
 
@@ -42,6 +43,7 @@ export default function AllowOverridesModal( {
 			onRequestClose={ onClose }
 			overlayClassName="block-editor-block-allow-overrides-modal"
 			focusOnMount="firstContentElement"
+			aria={ { describedby: descriptionId } }
 			size="small"
 		>
 			<form
@@ -55,14 +57,18 @@ export default function AllowOverridesModal( {
 					handleSubmit();
 				} }
 			>
+				<p id={ descriptionId }>
+					{ __( 'Enter a custom name for this block.' ) }
+				</p>
 				<VStack spacing="3">
 					<TextControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 						value={ editedBlockName }
-						label={ __( 'Give the block a name' ) }
+						label={ __( 'Block name' ) }
+						hideLabelFromVision
 						help={ __(
-							'Naming your block will help people understand its purpose. e.g. recipe title, recipe photo, recipe ingredients, recipe instructions.'
+							'This name will be used to denote the override wherever the synced pattern is used. The name here will help people understand its purpose. E.g. if you\'re creating a recipe pattern, it can be "recipe", "ingredients", etc.'
 						) }
 						placeholder={ placeholder }
 						onChange={ setEditedBlockName }
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index 65eae1e8d01694..ff3c4aa5f84ee4 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -2,24 +2,48 @@
  * WordPress dependencies
  */
 import { useState, useId } from '@wordpress/element';
-import {
-	InspectorControls,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import { ToggleControl, BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { unlock } from '../lock-unlock';
 import {
 	PARTIAL_SYNCING_SUPPORTED_BLOCKS,
 	PATTERN_OVERRIDES_BINDING_SOURCE,
 } from '../constants';
 import AllowOverridesModal from './allow-overrides-modal';
 
-const { removeBindings, addBindings } = unlock( blockEditorPrivateApis );
+function removeBindings( bindings, syncedAttributes ) {
+	let updatedBindings = {};
+	for ( const attributeName of syncedAttributes ) {
+		// Omit any bindings that's not the same source from the `updatedBindings` object.
+		if (
+			bindings?.[ attributeName ]?.source !==
+				PATTERN_OVERRIDES_BINDING_SOURCE &&
+			bindings?.[ attributeName ]?.source !== undefined
+		) {
+			updatedBindings[ attributeName ] = bindings[ attributeName ];
+		}
+	}
+	if ( ! Object.keys( updatedBindings ).length ) {
+		updatedBindings = undefined;
+	}
+	return updatedBindings;
+}
+
+function addBindings( bindings, syncedAttributes ) {
+	const updatedBindings = { ...bindings };
+	for ( const attributeName of syncedAttributes ) {
+		if ( ! bindings?.[ attributeName ] ) {
+			updatedBindings[ attributeName ] = {
+				source: PATTERN_OVERRIDES_BINDING_SOURCE,
+			};
+		}
+	}
+	return updatedBindings;
+}
 
 function PatternOverridesControls( { attributes, name, setAttributes } ) {
 	const controlId = useId();
@@ -43,16 +67,8 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 
 		const prevBindings = attributes?.metadata?.bindings;
 		const updatedBindings = isChecked
-			? addBindings(
-					prevBindings,
-					syncedAttributes,
-					PATTERN_OVERRIDES_BINDING_SOURCE
-			  )
-			: removeBindings(
-					prevBindings,
-					syncedAttributes,
-					PATTERN_OVERRIDES_BINDING_SOURCE
-			  );
+			? addBindings( prevBindings, syncedAttributes )
+			: removeBindings( prevBindings, syncedAttributes );
 
 		const updatedMetadata = {
 			...attributes.metadata,
@@ -89,7 +105,7 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 							label={ __( 'Allow overrides' ) }
 							checked={ attributeSources.some(
 								( source ) =>
-									source === 'core/pattern-overrides'
+									source === PATTERN_OVERRIDES_BINDING_SOURCE
 							) }
 							onChange={ ( isChecked ) => {
 								updateBindings( isChecked );
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 2186e4612ff489..3aa5f8e5e766af 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -82,6 +82,17 @@ test.describe( 'Pattern Overrides', () => {
 				.getByRole( 'button', { name: 'Save' } )
 				.click();
 
+			await editor.openDocumentSettingsSidebar();
+			const editorSettings = page.getByRole( 'region', {
+				name: 'Editor settings',
+			} );
+			await editorSettings
+				.getByRole( 'button', { name: 'Advanced' } )
+				.click();
+			await editorSettings
+				.getByRole( 'checkbox', { name: 'Allow overrides' } )
+				.setChecked( true );
+
 			await expect.poll( editor.getBlocks ).toMatchObject( [
 				{
 					name: 'core/paragraph',

From 1f86b640d2e8d26420c8e563178210b8a10b0e14 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Mon, 8 Apr 2024 10:42:35 +0800
Subject: [PATCH 3/7] Restore block rename field

---
 packages/block-editor/src/components/block-rename/modal.js | 1 -
 test/e2e/specs/editor/blocks/heading.spec.js               | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
index dd929573647b42..346a7b3f18e3e5 100644
--- a/packages/block-editor/src/components/block-rename/modal.js
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -110,7 +110,6 @@ export default function BlockRenameModal( {
 						<Button
 							__next40pxDefaultSize
 							aria-disabled={ ! isNameValid }
-							isDestructive={ hasOverridesWarning }
 							variant="primary"
 							type="submit"
 						>
diff --git a/test/e2e/specs/editor/blocks/heading.spec.js b/test/e2e/specs/editor/blocks/heading.spec.js
index caf7378084efe9..5f05ea82079564 100644
--- a/test/e2e/specs/editor/blocks/heading.spec.js
+++ b/test/e2e/specs/editor/blocks/heading.spec.js
@@ -379,6 +379,7 @@ test.describe( 'Heading', () => {
 			.getByRole( 'dialog', { name: 'Rename' } )
 			.getByRole( 'textbox', { name: 'Block name' } )
 			.fill( 'My new name' );
+
 		await page
 			.getByRole( 'dialog', { name: 'Rename' } )
 			.getByRole( 'button', { name: 'Save' } )

From 7f7730777eb2a8d5939e1dcc3132347e5e78cee0 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 9 Apr 2024 14:05:46 +0800
Subject: [PATCH 4/7] Add comment about the warning

---
 packages/block-editor/src/components/block-rename/modal.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
index 346a7b3f18e3e5..dcda00a92410cf 100644
--- a/packages/block-editor/src/components/block-rename/modal.js
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -22,6 +22,8 @@ export default function BlockRenameModal( {
 	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 );

From 88e0543a1adcf00a444c1760b30b154a6b6ee1d6 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Wed, 10 Apr 2024 17:33:26 +0800
Subject: [PATCH 5/7] Address code reviews

---
 packages/components/CHANGELOG.md              |  2 ++
 packages/components/src/form-toggle/index.tsx | 12 +++++++--
 .../src/form-toggle/stories/index.story.tsx   |  2 +-
 .../components/src/toggle-control/index.tsx   | 27 +++++++++++--------
 packages/patterns/src/api/index.js            |  1 +
 .../components/pattern-overrides-controls.js  | 16 +++++------
 .../editor/various/pattern-overrides.spec.js  |  4 +--
 7 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 28475ded0efb0b..63ec961b80f3c2 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -8,6 +8,8 @@
 -   `ProgressBar`: Move the indicator width styles from emotion to a CSS variable ([#60388](https://github.com/WordPress/gutenberg/pull/60388)).
 -   `Text`: Add `text-wrap: pretty;` to improve wrapping. ([#60164](https://github.com/WordPress/gutenberg/pull/60164)).
 -   `Navigator`: Navigation to the active path doesn't create a new location history. ([#60561](https://github.com/WordPress/gutenberg/pull/60561))
+-   `FormToggle`: Forwards ref to input. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
+-   `ToggleControl`: Forwards ref to FormToggle. ([#60234](https://github.com/WordPress/gutenberg/pull/60234)).
 
 ### Bug Fix
 
diff --git a/packages/components/src/form-toggle/index.tsx b/packages/components/src/form-toggle/index.tsx
index 19cb828023ad89..372f646b846a6b 100644
--- a/packages/components/src/form-toggle/index.tsx
+++ b/packages/components/src/form-toggle/index.tsx
@@ -2,6 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import type { ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -31,7 +37,8 @@ export const noop = () => {};
  * ```
  */
 export function FormToggle(
-	props: WordPressComponentProps< FormToggleProps, 'input', false >
+	props: WordPressComponentProps< FormToggleProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
 		className,
@@ -56,6 +63,7 @@ export function FormToggle(
 				onChange={ onChange }
 				disabled={ disabled }
 				{ ...additionalProps }
+				ref={ ref }
 			/>
 			<span className="components-form-toggle__track"></span>
 			<span className="components-form-toggle__thumb"></span>
@@ -63,4 +71,4 @@ export function FormToggle(
 	);
 }
 
-export default FormToggle;
+export default forwardRef( FormToggle );
diff --git a/packages/components/src/form-toggle/stories/index.story.tsx b/packages/components/src/form-toggle/stories/index.story.tsx
index 0958b94c342c4a..d987860955bdf9 100644
--- a/packages/components/src/form-toggle/stories/index.story.tsx
+++ b/packages/components/src/form-toggle/stories/index.story.tsx
@@ -11,7 +11,7 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { FormToggle } from '..';
+import FormToggle from '..';
 
 const meta: Meta< typeof FormToggle > = {
 	component: FormToggle,
diff --git a/packages/components/src/toggle-control/index.tsx b/packages/components/src/toggle-control/index.tsx
index c991953d53e4bf..ed62aea7755cd9 100644
--- a/packages/components/src/toggle-control/index.tsx
+++ b/packages/components/src/toggle-control/index.tsx
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ForwardedRef } from 'react';
 import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
+import { forwardRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -41,15 +42,18 @@ import { space } from '../utils/space';
  * };
  * ```
  */
-export function ToggleControl( {
-	__nextHasNoMarginBottom,
-	label,
-	checked,
-	help,
-	className,
-	onChange,
-	disabled,
-}: WordPressComponentProps< ToggleControlProps, 'input', false > ) {
+export function ToggleControl(
+	{
+		__nextHasNoMarginBottom,
+		label,
+		checked,
+		help,
+		className,
+		onChange,
+		disabled,
+	}: WordPressComponentProps< ToggleControlProps, 'input', false >,
+	ref: ForwardedRef< HTMLInputElement >
+) {
 	function onChangeToggle( event: ChangeEvent< HTMLInputElement > ) {
 		onChange( event.target.checked );
 	}
@@ -94,6 +98,7 @@ export function ToggleControl( {
 					onChange={ onChangeToggle }
 					aria-describedby={ describedBy }
 					disabled={ disabled }
+					ref={ ref }
 				/>
 				<FlexBlock
 					as="label"
@@ -107,4 +112,4 @@ export function ToggleControl( {
 	);
 }
 
-export default ToggleControl;
+export default forwardRef( ToggleControl );
diff --git a/packages/patterns/src/api/index.js b/packages/patterns/src/api/index.js
index 07f3b2321a127c..448001f891fbae 100644
--- a/packages/patterns/src/api/index.js
+++ b/packages/patterns/src/api/index.js
@@ -15,6 +15,7 @@ export function isOverridableBlock( block ) {
 		Object.keys( PARTIAL_SYNCING_SUPPORTED_BLOCKS ).includes(
 			block.name
 		) &&
+		!! block.attributes.metadata?.name &&
 		!! block.attributes.metadata?.bindings &&
 		Object.values( block.attributes.metadata.bindings ).some(
 			( binding ) => binding.source === 'core/pattern-overrides'
diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js
index ff3c4aa5f84ee4..c55bcb8b2d7f80 100644
--- a/packages/patterns/src/components/pattern-overrides-controls.js
+++ b/packages/patterns/src/components/pattern-overrides-controls.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useId } from '@wordpress/element';
+import { useState, useId, useRef, flushSync } from '@wordpress/element';
 import { InspectorControls } from '@wordpress/block-editor';
 import { ToggleControl, BaseControl, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -47,6 +47,7 @@ function addBindings( bindings, syncedAttributes ) {
 
 function PatternOverridesControls( { attributes, name, setAttributes } ) {
 	const controlId = useId();
+	const toggleRef = useRef();
 	const [ showAllowOverridesModal, setShowAllowOverridesModal ] =
 		useState( false );
 
@@ -60,11 +61,6 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 	);
 
 	function updateBindings( isChecked, customName ) {
-		if ( isChecked && ! attributes.metadata?.name && ! customName ) {
-			setShowAllowOverridesModal( true );
-			return;
-		}
-
 		const prevBindings = attributes?.metadata?.bindings;
 		const updatedBindings = isChecked
 			? addBindings( prevBindings, syncedAttributes )
@@ -110,12 +106,13 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 							onChange={ ( isChecked ) => {
 								updateBindings( isChecked );
 							} }
+							ref={ toggleRef }
 						/>
 					) : (
 						<Button
 							className="pattern-overrides-control__allow-overrides-button"
 							variant="secondary"
-							onClick={ () => updateBindings( true ) }
+							onClick={ () => setShowAllowOverridesModal( true ) }
 						>
 							{ __( 'Allow overrides' ) }
 						</Button>
@@ -127,7 +124,10 @@ function PatternOverridesControls( { attributes, name, setAttributes } ) {
 				<AllowOverridesModal
 					onClose={ () => setShowAllowOverridesModal( false ) }
 					onSave={ ( newName ) => {
-						updateBindings( true, newName );
+						flushSync( () => {
+							updateBindings( true, newName );
+						} );
+						toggleRef.current?.focus();
 					} }
 				/>
 			) }
diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index 3aa5f8e5e766af..e5a07e79f6c2fc 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -223,10 +223,10 @@ test.describe( 'Pattern Overrides', () => {
 		requestUtils,
 		editor,
 	} ) => {
-		const paragraphId = 'paragraph-id';
+		const paragraphName = 'paragraph-name';
 		const { id } = await requestUtils.createBlock( {
 			title: 'Pattern',
-			content: `<!-- wp:paragraph {"metadata":{"id":"${ paragraphId }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
+			content: `<!-- wp:paragraph {"metadata":{"name":"${ paragraphName }","bindings":{"content":{"source":"core/pattern-overrides"}}}} -->
 <p>Editable</p>
 <!-- /wp:paragraph -->`,
 			status: 'publish',

From e18cf7f9f377bb1a73b840fae1b44e31fcd9c5ac Mon Sep 17 00:00:00 2001
From: Kai Hao <kevin830726@gmail.com>
Date: Thu, 11 Apr 2024 13:39:10 +0800
Subject: [PATCH 6/7] Apply suggestions from code review

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>
---
 packages/block-editor/src/components/block-rename/modal.js | 2 +-
 packages/patterns/src/components/allow-overrides-modal.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-rename/modal.js b/packages/block-editor/src/components/block-rename/modal.js
index dcda00a92410cf..f3db0d6c36252e 100644
--- a/packages/block-editor/src/components/block-rename/modal.js
+++ b/packages/block-editor/src/components/block-rename/modal.js
@@ -92,7 +92,7 @@ export default function BlockRenameModal( {
 						help={
 							hasOverridesWarning
 								? __(
-										'This block allows overrides. Note that renaming could potentially break existing connections.'
+										'This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.'
 								  )
 								: undefined
 						}
diff --git a/packages/patterns/src/components/allow-overrides-modal.js b/packages/patterns/src/components/allow-overrides-modal.js
index 5200c861299a58..21d306022fd582 100644
--- a/packages/patterns/src/components/allow-overrides-modal.js
+++ b/packages/patterns/src/components/allow-overrides-modal.js
@@ -68,7 +68,7 @@ export default function AllowOverridesModal( {
 						label={ __( 'Block name' ) }
 						hideLabelFromVision
 						help={ __(
-							'This name will be used to denote the override wherever the synced pattern is used. The name here will help people understand its purpose. E.g. if you\'re creating a recipe pattern, it can be "recipe", "ingredients", etc.'
+							'This name will be used to denote the override wherever the synced pattern is used. The name here will help people understand its purpose. E.g. if you\'re creating a recipe pattern, it can be "Recipe Title", "Recipe Description", etc.'
 						) }
 						placeholder={ placeholder }
 						onChange={ setEditedBlockName }

From 37b75a3bc1216c5f984f062f00946f447452f3a6 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Thu, 11 Apr 2024 14:18:58 +0800
Subject: [PATCH 7/7] Fix tests

---
 test/e2e/specs/editor/various/pattern-overrides.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/editor/various/pattern-overrides.spec.js b/test/e2e/specs/editor/various/pattern-overrides.spec.js
index e5a07e79f6c2fc..0e6b8e8172f19e 100644
--- a/test/e2e/specs/editor/various/pattern-overrides.spec.js
+++ b/test/e2e/specs/editor/various/pattern-overrides.spec.js
@@ -258,7 +258,7 @@ test.describe( 'Pattern Overrides', () => {
 				name: 'core/paragraph',
 				attributes: {
 					content: 'edited Editable',
-					metadata: undefined,
+					metadata: { name: paragraphName },
 				},
 			},
 		] );