From f3715565ef8394beb2ceb96fd2789b90b3c40fda Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Mon, 5 Feb 2024 17:21:44 +0800
Subject: [PATCH 1/4] Disable overriding links of images

---
 packages/block-library/src/image/image.js | 45 +++++++++++++++--------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 2eb41467c6b5bb..203281cca1a638 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -439,24 +439,39 @@ export default function Image( {
 		[ isSingleSelected ]
 	);
 
+	const hasParentPattern = useSelect(
+		( select ) => {
+			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			return (
+				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0
+			);
+		},
+		[ clientId ]
+	);
+
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-					<ImageURLInputUI
-						url={ href || '' }
-						onChangeUrl={ onSetHref }
-						linkDestination={ linkDestination }
-						mediaUrl={ ( image && image.source_url ) || url }
-						mediaLink={ image && image.link }
-						linkTarget={ linkTarget }
-						linkClass={ linkClass }
-						rel={ rel }
-						showLightboxSetting={ showLightboxSetting }
-						lightboxEnabled={ lightboxChecked }
-						onSetLightbox={ onSetLightbox }
-					/>
-				) }
+				{ isSingleSelected &&
+					! isEditingImage &&
+					! lockUrlControls &&
+					// Disable editing the link of the URL if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the link on the frontend.
+					! hasParentPattern && (
+						<ImageURLInputUI
+							url={ href || '' }
+							onChangeUrl={ onSetHref }
+							linkDestination={ linkDestination }
+							mediaUrl={ ( image && image.source_url ) || url }
+							mediaLink={ image && image.link }
+							linkTarget={ linkTarget }
+							linkClass={ linkClass }
+							rel={ rel }
+							showLightboxSetting={ showLightboxSetting }
+							lightboxEnabled={ lightboxChecked }
+							onSetLightbox={ onSetLightbox }
+						/>
+					) }
 				{ allowCrop && (
 					<ToolbarButton
 						onClick={ () => setIsEditingImage( true ) }

From 9f17f1408ceae19b4202a7e24b9d1ab320b04571 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Mon, 5 Feb 2024 18:09:28 +0800
Subject: [PATCH 2/4] Combine into existing useSelect

---
 packages/block-library/src/image/image.js | 63 ++++++++++-------------
 1 file changed, 26 insertions(+), 37 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 203281cca1a638..eebf5221086c69 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -413,19 +413,23 @@ export default function Image( {
 				return {};
 			}
 
-			const { getBlockBindingsSource } = unlock(
-				select( blockEditorStore )
-			);
+			const { getBlockBindingsSource, getBlockParentsByBlockName } =
+				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
+			const hasParentPattern =
+				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
 			return {
 				lockUrlControls:
-					!! urlBinding &&
-					getBlockBindingsSource( urlBinding?.source )
-						?.lockAttributesEditing === true,
+					( !! urlBinding &&
+						getBlockBindingsSource( urlBinding?.source )
+							?.lockAttributesEditing === true ) ||
+					// Disable editing the link of the URL if the image is inside a pattern instance.
+					// This is a temporary solution until we support overriding the link on the frontend.
+					hasParentPattern,
 				lockAltControls:
 					!! altBinding &&
 					getBlockBindingsSource( altBinding?.source )
@@ -436,42 +440,27 @@ export default function Image( {
 						?.lockAttributesEditing === true,
 			};
 		},
-		[ isSingleSelected ]
-	);
-
-	const hasParentPattern = useSelect(
-		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
-			return (
-				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0
-			);
-		},
-		[ clientId ]
+		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ isSingleSelected &&
-					! isEditingImage &&
-					! lockUrlControls &&
-					// Disable editing the link of the URL if the image is inside a pattern instance.
-					// This is a temporary solution until we support overriding the link on the frontend.
-					! hasParentPattern && (
-						<ImageURLInputUI
-							url={ href || '' }
-							onChangeUrl={ onSetHref }
-							linkDestination={ linkDestination }
-							mediaUrl={ ( image && image.source_url ) || url }
-							mediaLink={ image && image.link }
-							linkTarget={ linkTarget }
-							linkClass={ linkClass }
-							rel={ rel }
-							showLightboxSetting={ showLightboxSetting }
-							lightboxEnabled={ lightboxChecked }
-							onSetLightbox={ onSetLightbox }
-						/>
-					) }
+				{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
+					<ImageURLInputUI
+						url={ href || '' }
+						onChangeUrl={ onSetHref }
+						linkDestination={ linkDestination }
+						mediaUrl={ ( image && image.source_url ) || url }
+						mediaLink={ image && image.link }
+						linkTarget={ linkTarget }
+						linkClass={ linkClass }
+						rel={ rel }
+						showLightboxSetting={ showLightboxSetting }
+						lightboxEnabled={ lightboxChecked }
+						onSetLightbox={ onSetLightbox }
+					/>
+				) }
 				{ allowCrop && (
 					<ToolbarButton
 						onClick={ () => setIsEditingImage( true ) }

From 2d5b6f21b99e1c8a5baa17c9fab79f88a68aa056 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 6 Feb 2024 16:54:53 +0800
Subject: [PATCH 3/4] Separate into a different lockHrefControls

---
 packages/block-library/src/image/image.js | 42 ++++++++++++++---------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index eebf5221086c69..09e624dae38e46 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -405,6 +405,7 @@ export default function Image( {
 
 	const {
 		lockUrlControls = false,
+		lockHrefControls = false,
 		lockAltControls = false,
 		lockTitleControls = false,
 	} = useSelect(
@@ -417,6 +418,7 @@ export default function Image( {
 				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
+				href: hrefBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
@@ -424,8 +426,12 @@ export default function Image( {
 				getBlockParentsByBlockName( clientId, 'core/block' ).length > 0;
 			return {
 				lockUrlControls:
-					( !! urlBinding &&
-						getBlockBindingsSource( urlBinding?.source )
+					!! urlBinding &&
+					getBlockBindingsSource( urlBinding?.source )
+						?.lockAttributesEditing === true,
+				lockHrefControls:
+					( !! hrefBinding &&
+						getBlockBindingsSource( hrefBinding?.source )
 							?.lockAttributesEditing === true ) ||
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
@@ -446,21 +452,23 @@ export default function Image( {
 	const controls = (
 		<>
 			<BlockControls group="block">
-				{ isSingleSelected && ! isEditingImage && ! lockUrlControls && (
-					<ImageURLInputUI
-						url={ href || '' }
-						onChangeUrl={ onSetHref }
-						linkDestination={ linkDestination }
-						mediaUrl={ ( image && image.source_url ) || url }
-						mediaLink={ image && image.link }
-						linkTarget={ linkTarget }
-						linkClass={ linkClass }
-						rel={ rel }
-						showLightboxSetting={ showLightboxSetting }
-						lightboxEnabled={ lightboxChecked }
-						onSetLightbox={ onSetLightbox }
-					/>
-				) }
+				{ isSingleSelected &&
+					! isEditingImage &&
+					! lockHrefControls && (
+						<ImageURLInputUI
+							url={ href || '' }
+							onChangeUrl={ onSetHref }
+							linkDestination={ linkDestination }
+							mediaUrl={ ( image && image.source_url ) || url }
+							mediaLink={ image && image.link }
+							linkTarget={ linkTarget }
+							linkClass={ linkClass }
+							rel={ rel }
+							showLightboxSetting={ showLightboxSetting }
+							lightboxEnabled={ lightboxChecked }
+							onSetLightbox={ onSetLightbox }
+						/>
+					) }
 				{ allowCrop && (
 					<ToolbarButton
 						onClick={ () => setIsEditingImage( true ) }

From 2063647d5ff1f444b0906df992b58d8065920bb4 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Wed, 7 Feb 2024 18:42:24 +0800
Subject: [PATCH 4/4] Address code review

---
 packages/block-library/src/image/image.js | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index 09e624dae38e46..8c911fad726aed 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -418,7 +418,6 @@ export default function Image( {
 				unlock( select( blockEditorStore ) );
 			const {
 				url: urlBinding,
-				href: hrefBinding,
 				alt: altBinding,
 				title: titleBinding,
 			} = metadata?.bindings || {};
@@ -430,9 +429,6 @@ export default function Image( {
 					getBlockBindingsSource( urlBinding?.source )
 						?.lockAttributesEditing === true,
 				lockHrefControls:
-					( !! hrefBinding &&
-						getBlockBindingsSource( hrefBinding?.source )
-							?.lockAttributesEditing === true ) ||
 					// Disable editing the link of the URL if the image is inside a pattern instance.
 					// This is a temporary solution until we support overriding the link on the frontend.
 					hasParentPattern,
@@ -454,7 +450,8 @@ export default function Image( {
 			<BlockControls group="block">
 				{ isSingleSelected &&
 					! isEditingImage &&
-					! lockHrefControls && (
+					! lockHrefControls &&
+					! lockUrlControls && (
 						<ImageURLInputUI
 							url={ href || '' }
 							onChangeUrl={ onSetHref }