Refactor conditional rendering logic for block controls.

amitraj2203 · May 30, 2024 · 04b466e · 04b466e
1 parent 43fa143
commit 04b466e
Showing 1 changed file with 27 additions and 30 deletions.
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -499,47 +499,44 @@ 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 ) }
 							icon={ crop }
 							label={ __( 'Crop' ) }
 						/>
 					) }
-					{ isSingleSelected && canInsertCover && (
+					{ showCoverControls && (
 						<ToolbarButton
 							icon={ overlayText }
 							label={ __( 'Add text over image' ) }