From 6b577a5d9bdbc7c3704a1996c9e7ed6c4ea5d49a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <ella@vandurpe.com>
Date: Fri, 21 May 2021 19:17:13 +0300
Subject: [PATCH] Image block: fix cover transform and excessive re-rendering

---
 .../block-library/src/cover/transforms.js     |  2 +-
 packages/block-library/src/image/edit.js      |  2 ++
 packages/block-library/src/image/image.js     | 33 +++++++++----------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/cover/transforms.js b/packages/block-library/src/cover/transforms.js
index c2e2d42fa4f225..7837225bb3dcec 100644
--- a/packages/block-library/src/cover/transforms.js
+++ b/packages/block-library/src/cover/transforms.js
@@ -23,7 +23,7 @@ const transforms = {
 						anchor,
 						style: {
 							color: {
-								duotone: style.color.duotone,
+								duotone: style?.color?.duotone,
 							},
 						},
 					},
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index f9529efb7e7932..56561ae4d4fa13 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -80,6 +80,7 @@ export function ImageEdit( {
 	insertBlocksAfter,
 	noticeOperations,
 	onReplace,
+	clientId,
 } ) {
 	const {
 		url = '',
@@ -300,6 +301,7 @@ export function ImageEdit( {
 					onSelectURL={ onSelectURL }
 					onUploadError={ onUploadError }
 					containerRef={ ref }
+					clientId={ clientId }
 				/>
 			) }
 			{ ! url && (
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
index ba59b8f4250ec3..6000d4513e61d1 100644
--- a/packages/block-library/src/image/image.js
+++ b/packages/block-library/src/image/image.js
@@ -87,28 +87,25 @@ export default function Image( {
 	onSelectURL,
 	onUploadError,
 	containerRef,
+	clientId,
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
-	const { block, currentId, image, multiImageSelection } = useSelect(
+	const { getBlock } = useSelect( blockEditorStore );
+	const { image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( coreStore );
-			const {
-				getMultiSelectedBlockClientIds,
-				getBlockName,
-				getSelectedBlock,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+			const { getMultiSelectedBlockClientIds, getBlockName } = select(
+				blockEditorStore
+			);
 			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
 			return {
-				block: getSelectedBlock(),
-				currentId: getSelectedBlockClientId(),
 				image: id && isSelected ? getMedia( id ) : null,
 				multiImageSelection:
 					multiSelectedClientIds.length &&
 					multiSelectedClientIds.every(
-						( clientId ) =>
-							getBlockName( clientId ) === 'core/image'
+						( _clientId ) =>
+							getBlockName( _clientId ) === 'core/image'
 					),
 			};
 		},
@@ -260,6 +257,13 @@ export default function Image( {
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
 	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
 
+	function switchToCover() {
+		replaceBlocks(
+			clientId,
+			switchToBlockType( getBlock( clientId ), 'core/cover' )
+		);
+	}
+
 	const controls = (
 		<>
 			<BlockControls group="block">
@@ -297,12 +301,7 @@ export default function Image( {
 					<ToolbarButton
 						icon={ overlayText }
 						label={ __( 'Add text over image' ) }
-						onClick={ () =>
-							replaceBlocks(
-								currentId,
-								switchToBlockType( block, 'core/cover' )
-							)
-						}
+						onClick={ switchToCover }
 					/>
 				) }
 			</BlockControls>