From 04b466e8fd8fd380c90718dceedbc54604aa8059 Mon Sep 17 00:00:00 2001
From: Amit Raj <harsh.harshraj.ra@gmail.com>
Date: Thu, 30 May 2024 16:27:14 +0530
Subject: [PATCH] Refactor conditional rendering logic for block controls.

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

diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index c723d5c78ef6e0..ab0aeac8cdfb36 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -499,39 +499,36 @@ export default function Image( {
 		[ clientId, isSingleSelected, metadata?.bindings ]
 	);
 
-	const shouldRenderOtherControls =
-		( isSingleSelected &&
-			! isEditingImage &&
-			! lockHrefControls &&
-			! lockUrlControls ) ||
-		allowCrop ||
-		( isSingleSelected && canInsertCover );
+	const showUrlInput =
+		isSingleSelected &&
+		! isEditingImage &&
+		! lockHrefControls &&
+		! lockUrlControls;
+
+	const showCoverControls = isSingleSelected && canInsertCover;
+
+	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 
 	const controls = (
 		<>
-			{ shouldRenderOtherControls && (
+			{ showBlockControls && (
 				<BlockControls group="block">
-					{ isSingleSelected &&
-						! isEditingImage &&
-						! lockHrefControls &&
-						! 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 }
-								resetLightbox={ resetLightbox }
-							/>
-						) }
+					{ showUrlInput && (
+						<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 }
+							resetLightbox={ resetLightbox }
+						/>
+					) }
 					{ allowCrop && (
 						<ToolbarButton
 							onClick={ () => setIsEditingImage( true ) }
@@ -539,7 +536,7 @@ export default function Image( {
 							label={ __( 'Crop' ) }
 						/>
 					) }
-					{ isSingleSelected && canInsertCover && (
+					{ showCoverControls && (
 						<ToolbarButton
 							icon={ overlayText }
 							label={ __( 'Add text over image' ) }