Image block: fix cover transform and excessive re-rendering (#32102)

WordPress · May 21, 2021 · 5215429 · 5215429
1 parent 65a9a15
commit 5215429
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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>