hide controls on multi select (#27105)

WordPress · Nov 20, 2020 · 3dff67a · 3dff67a
1 parent 3aeb89e
commit 3dff67a
Showing 1 changed file with 35 additions and 20 deletions.
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -82,10 +82,22 @@ export default function Image( {
 } ) {
 	const captionRef = useRef();
 	const prevUrl = usePrevious( url );
-	const image = useSelect(
+	const { image, multiImageSelection } = useSelect(
 		( select ) => {
 			const { getMedia } = select( 'core' );
-			return id && isSelected ? getMedia( id ) : null;
+			const { getMultiSelectedBlockClientIds, getBlockName } = select(
+				'core/block-editor'
+			);
+			const multiSelectedClientIds = getMultiSelectedBlockClientIds();
+			return {
+				image: id && isSelected ? getMedia( id ) : null,
+				multiImageSelection:
+					multiSelectedClientIds.length &&
+					multiSelectedClientIds.every(
+						( clientId ) =>
+							getBlockName( clientId ) === 'core/image'
+					),
+			};
 		},
 		[ id, isSelected ]
 	);
@@ -244,11 +256,12 @@ export default function Image( {
 	}, [ isSelected ] );
 
 	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
+	const allowCrop = ! multiImageSelection && canEditImage && ! isEditingImage;
 
 	const controls = (
 		<>
 			<BlockControls>
-				{ ! isEditingImage && (
+				{ ! multiImageSelection && ! isEditingImage && (
 					<ToolbarGroup>
 						<ImageURLInputUI
 							url={ href || '' }
@@ -262,7 +275,7 @@ export default function Image( {
 						/>
 					</ToolbarGroup>
 				) }
-				{ canEditImage && ! isEditingImage && (
+				{ allowCrop && (
 					<ToolbarGroup>
 						<ToolbarButton
 							onClick={ () => setIsEditingImage( true ) }
@@ -280,7 +293,7 @@ export default function Image( {
 						/>
 					</ToolbarGroup>
 				) }
-				{ ! isEditingImage && (
+				{ ! multiImageSelection && ! isEditingImage && (
 					<MediaReplaceFlow
 						mediaId={ id }
 						mediaURL={ url }
@@ -294,23 +307,25 @@ export default function Image( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Image settings' ) }>
-					<TextareaControl
-						label={ __( 'Alt text (alternative text)' ) }
-						value={ alt }
-						onChange={ updateAlt }
-						help={
-							<>
-								<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+					{ ! multiImageSelection && (
+						<TextareaControl
+							label={ __( 'Alt text (alternative text)' ) }
+							value={ alt }
+							onChange={ updateAlt }
+							help={
+								<>
+									<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+										{ __(
+											'Describe the purpose of the image'
+										) }
+									</ExternalLink>
 									{ __(
-										'Describe the purpose of the image'
+										'Leave empty if the image is purely decorative.'
 									) }
-								</ExternalLink>
-								{ __(
-									'Leave empty if the image is purely decorative.'
-								) }
-							</>
-						}
-					/>
+								</>
+							}
+						/>
+					) }
 					<ImageSizeControl
 						onChangeImage={ updateImage }
 						onChange={ ( value ) => setAttributes( value ) }