diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 3e32afd372524d..53d7da7a1c0547 100644 --- 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 = ( <> - { ! isEditingImage && ( + { ! multiImageSelection && ! isEditingImage && ( ) } - { canEditImage && ! isEditingImage && ( + { allowCrop && ( setIsEditingImage( true ) } @@ -280,7 +293,7 @@ export default function Image( { /> ) } - { ! isEditingImage && ( + { ! multiImageSelection && ! isEditingImage && ( - - + { ! multiImageSelection && ( + + + { __( + 'Describe the purpose of the image' + ) } + { __( - 'Describe the purpose of the image' + 'Leave empty if the image is purely decorative.' ) } - - { __( - 'Leave empty if the image is purely decorative.' - ) } - - } - /> + + } + /> + ) } setAttributes( value ) }