@wordpress/block-library 6.0.1 → 6.0.5

package/src/image/edit.native.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { View, TouchableWithoutFeedback } from 'react-native';
+import { useRoute } from '@react-navigation/native';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, useEffect } from '@wordpress/element';
 import {
 	requestMediaImport,
 	mediaUploadSync,
@@ -41,6 +42,7 @@ import {
 	BlockAlignmentToolbar,
 	BlockStyles,
 	store as blockEditorStore,
+	blockSettingsScreens,
 } from '@wordpress/block-editor';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getProtocol, hasQueryArg } from '@wordpress/url';
@@ -63,6 +65,7 @@ import styles from './styles.scss';
 import { getUpdatedLinkTargetSettings } from './utils';
 
 import {
+	LINK_DESTINATION_NONE,
 	LINK_DESTINATION_CUSTOM,
 	LINK_DESTINATION_ATTACHMENT,
 	LINK_DESTINATION_MEDIA,
@@ -76,6 +79,101 @@ const getUrlForSlug = ( image, sizeSlug ) => {
 	return image?.media_details?.sizes?.[ sizeSlug ]?.source_url;
 };
 
+function LinkSettings( {
+	attributes,
+	image,
+	isLinkSheetVisible,
+	setMappedAttributes,
+} ) {
+	const route = useRoute();
+	const { href: url, label, linkDestination, linkTarget, rel } = attributes;
+
+	// Persist attributes passed from child screen
+	useEffect( () => {
+		const { inputValue: newUrl } = route.params || {};
+
+		let newLinkDestination;
+		switch ( newUrl ) {
+			case attributes.url:
+				newLinkDestination = LINK_DESTINATION_MEDIA;
+				break;
+			case image?.link:
+				newLinkDestination = LINK_DESTINATION_ATTACHMENT;
+				break;
+			case '':
+				newLinkDestination = LINK_DESTINATION_NONE;
+				break;
+			default:
+				newLinkDestination = LINK_DESTINATION_CUSTOM;
+				break;
+		}
+
+		setMappedAttributes( {
+			url: newUrl,
+			linkDestination: newLinkDestination,
+		} );
+	}, [ route.params?.inputValue ] );
+
+	let valueMask;
+	switch ( linkDestination ) {
+		case LINK_DESTINATION_MEDIA:
+			valueMask = __( 'Media File' );
+			break;
+		case LINK_DESTINATION_ATTACHMENT:
+			valueMask = __( 'Attachment Page' );
+			break;
+		case LINK_DESTINATION_CUSTOM:
+			valueMask = __( 'Custom URL' );
+			break;
+		default:
+			valueMask = __( 'None' );
+			break;
+	}
+
+	const linkSettingsOptions = {
+		url: {
+			valueMask,
+			autoFocus: false,
+			autoFill: true,
+		},
+		openInNewTab: {
+			label: __( 'Open in new tab' ),
+		},
+		linkRel: {
+			label: __( 'Link Rel' ),
+			placeholder: _x( 'None', 'Link rel attribute value placeholder' ),
+		},
+	};
+
+	return (
+		<PanelBody title={ __( 'Link Settings' ) }>
+			<LinkSettingsNavigation
+				isVisible={ isLinkSheetVisible }
+				url={ url }
+				rel={ rel }
+				label={ label }
+				linkTarget={ linkTarget }
+				setAttributes={ setMappedAttributes }
+				withBottomSheet={ false }
+				hasPicker
+				options={ linkSettingsOptions }
+				showIcon={ false }
+				onLinkCellPressed={ ( { navigation } ) => {
+					navigation.navigate(
+						blockSettingsScreens.imageLinkDestinations,
+						{
+							inputValue: attributes.href,
+							linkDestination: attributes.linkDestination,
+							imageUrl: attributes.url,
+							attachmentPageUrl: image?.link,
+						}
+					);
+				} }
+			/>
+		</PanelBody>
+	);
+}
+
 export class ImageEdit extends Component {
 	constructor( props ) {
 		super( props );
@@ -96,7 +194,6 @@ export class ImageEdit extends Component {
 		);
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.updateImageURL = this.updateImageURL.bind( this );
-		this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
 		this.onSetNewTab = this.onSetNewTab.bind( this );
 		this.onSetSizeSlug = this.onSetSizeSlug.bind( this );
 		this.onImagePressed = this.onImagePressed.bind( this );
@@ -108,25 +205,6 @@ export class ImageEdit extends Component {
 		);
 		this.setMappedAttributes = this.setMappedAttributes.bind( this );
 		this.onSizeChangeValue = this.onSizeChangeValue.bind( this );
-
-		this.linkSettingsOptions = {
-			url: {
-				label: __( 'Image Link URL' ),
-				placeholder: __( 'Add URL' ),
-				autoFocus: false,
-				autoFill: true,
-			},
-			openInNewTab: {
-				label: __( 'Open in new tab' ),
-			},
-			linkRel: {
-				label: __( 'Link Rel' ),
-				placeholder: _x(
-					'None',
-					'Link rel attribute value placeholder'
-				),
-			},
-		};
 	}
 
 	componentDidMount() {
@@ -282,13 +360,6 @@ export class ImageEdit extends Component {
 		} );
 	}
 
-	onSetLinkDestination( href ) {
-		this.props.setAttributes( {
-			linkDestination: LINK_DESTINATION_CUSTOM,
-			href,
-		} );
-	}
-
 	onSetNewTab( value ) {
 		const updatedLinkTarget = getUpdatedLinkTargetSettings(
 			value,
@@ -383,45 +454,23 @@ export class ImageEdit extends Component {
 			: width;
 	}
 
-	setMappedAttributes( { url: href, ...restAttributes } ) {
+	setMappedAttributes( { url: href, linkDestination, ...restAttributes } ) {
 		const { setAttributes } = this.props;
+		if ( ! href && ! linkDestination ) {
+			linkDestination = LINK_DESTINATION_NONE;
+		} else if ( ! linkDestination ) {
+			linkDestination = LINK_DESTINATION_CUSTOM;
+		}
 
-		return href === undefined
-			? setAttributes( {
-					...restAttributes,
-					linkDestination: LINK_DESTINATION_CUSTOM,
-			  } )
+		return href === undefined || href === this.props.attributes.href
+			? setAttributes( restAttributes )
 			: setAttributes( {
 					...restAttributes,
+					linkDestination,
 					href,
-					linkDestination: LINK_DESTINATION_CUSTOM,
 			  } );
 	}
 
-	getLinkSettings() {
-		const { isLinkSheetVisible } = this.state;
-		const {
-			attributes: { href: url, ...unMappedAttributes },
-		} = this.props;
-		const mappedAttributes = { ...unMappedAttributes, url };
-
-		return (
-			<LinkSettingsNavigation
-				isVisible={ isLinkSheetVisible }
-				url={ mappedAttributes.url }
-				rel={ mappedAttributes.rel }
-				label={ mappedAttributes.label }
-				linkTarget={ mappedAttributes.linkTarget }
-				onClose={ this.dismissSheet }
-				setAttributes={ this.setMappedAttributes }
-				withBottomSheet={ false }
-				hasPicker
-				options={ this.linkSettingsOptions }
-				showIcon={ false }
-			/>
-		);
-	}
-
 	getAltTextSettings() {
 		const {
 			attributes: { alt },
@@ -583,9 +632,12 @@ export class ImageEdit extends Component {
 					) }
 					{ this.getAltTextSettings() }
 				</PanelBody>
-				<PanelBody title={ __( 'Link Settings' ) }>
-					{ this.getLinkSettings( true ) }
-				</PanelBody>
+				<LinkSettings
+					attributes={ this.props.attributes }
+					image={ this.props.image }
+					isLinkSheetVisible={ this.state.isLinkSheetVisible }
+					setMappedAttributes={ this.setMappedAttributes }
+				/>
 				<PanelBody
 					title={ __( 'Featured Image' ) }
 					titleStyle={ styles.featuredImagePanelTitle }
@@ -633,7 +685,9 @@ export class ImageEdit extends Component {
 			resizeMode: context?.imageCrop ? 'cover' : 'contain',
 		};
 
-		const imageContainerStyles = [ hasImageContext && styles.fixedHeight ];
+		const imageContainerStyles = [
+			context?.fixedHeight && styles.fixedHeight,
+		];
 
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<Badge label={ __( 'Featured' ) } show={ isFeaturedImage }>
@@ -689,7 +743,9 @@ export class ImageEdit extends Component {
 											}
 											retryMessage={ retryMessage }
 											url={ url }
-											shapeStyle={ styles[ className ] }
+											shapeStyle={
+												styles[ className ] || className
+											}
 											width={ this.getWidth() }
 											{ ...( hasImageContext
 												? additionalImageProps

package/src/image/editor.scss

@@ -52,6 +52,7 @@ figure.wp-block-image:not(.wp-block) {
 [data-align="wide"] > .wp-block-image,
 [data-align="full"] > .wp-block-image {
 	img {
+		height: auto;
 		width: 100%;
 	}
 }

package/src/image/index.php

@@ -0,0 +1,42 @@
+<?php
+/**
+ * Server-side rendering of the `core/image` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/image` block on the server,
+ * adding a data-id attribute to the element if core/gallery has added on pre-render.
+ *
+ * @param  array $attributes The block attributes.
+ * @param  array $content    The block content.
+ * @return string            Returns the block content with the data-id attribute added.
+ */
+function render_block_core_image( $attributes, $content ) {
+	if ( isset( $attributes['data-id'] ) ) {
+		// Add the data-id="$id" attribute to the img element
+		// to provide backwards compatibility for the Gallery Block,
+		// which now wraps Image Blocks within innerBlocks.
+		// The data-id attribute is added in a core/gallery `render_block_data` hook.
+		$data_id_attribute = 'data-id="' . esc_attr( $attributes['data-id'] ) . '"';
+		if ( ! strpos( $content, $data_id_attribute ) ) {
+			$content = str_replace( '<img', '<img ' . $data_id_attribute . ' ', $content );
+		}
+	}
+	return $content;
+}
+
+
+/**
+ * Registers the `core/image` block on server.
+ */
+function register_block_core_image() {
+	register_block_type_from_metadata(
+		__DIR__ . '/image',
+		array(
+			'render_callback' => 'render_block_core_image',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_image' );

package/src/image/style.scss

@@ -2,11 +2,16 @@
 	margin: 0 0 1em 0;
 
 	img {
+		height: auto;
 		max-width: 100%;
+		vertical-align: bottom;
 	}
 
-	&:not(.is-style-rounded) img {
-		border-radius: inherit;
+	&:not(.is-style-rounded) {
+		> a,
+		img {
+			border-radius: inherit;
+		}
 	}
 
 	&.aligncenter {
@@ -15,6 +20,7 @@
 
 	&.alignfull img,
 	&.alignwide img {
+		height: auto;
 		width: 100%;
 	}
 

package/src/image/test/edit.native.js

@@ -1,65 +1,250 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
+import { act, fireEvent, initializeEditor, getEditorHtml } from 'test/helpers';
+import { Image } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+import { apiFetch } from '@wordpress/data-controls';
 
 /**
  * Internal dependencies
  */
-import { ImageEdit } from '../edit';
-import { NEW_TAB_REL } from '../constants';
+import { registerCoreBlocks } from '../..';
+
+jest.mock( '@wordpress/data-controls', () => {
+	const dataControls = jest.requireActual( '@wordpress/data-controls' );
+	return {
+		...dataControls,
+		apiFetch: jest.fn(),
+	};
+} );
 
-const getStylesFromColorScheme = () => {
-	return { color: 'white' };
-};
+const apiFetchPromise = Promise.resolve( {} );
+apiFetch.mockImplementation( () => apiFetchPromise );
 
-const setAttributes = jest.fn();
+beforeAll( () => {
+	registerCoreBlocks();
+
+	// Mock Image.getSize to avoid failed attempt to size non-existant image
+	const getSizeSpy = jest.spyOn( Image, 'getSize' );
+	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
+} );
+
+afterAll( () => {
+	getBlockTypes().forEach( ( { name } ) => {
+		unregisterBlockType( name );
+	} );
 
-const getImageComponent = ( attributes = {} ) => (
-	<ImageEdit
-		setAttributes={ setAttributes }
-		attributes={ attributes }
-		getStylesFromColorScheme={ getStylesFromColorScheme }
-	/>
-);
+	// Restore mocks
+	Image.getSize.mockRestore();
+} );
 
 describe( 'Image Block', () => {
-	beforeEach( () => {
-		setAttributes.mockReset();
+	it( 'sets link to None', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<a href="https://cldup.com/cXyG__fTLN.jpg">
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+			</a>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () =>
+			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'Media File' ) );
+		fireEvent.press( screen.getByText( 'None' ) );
+
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+
+	it( 'sets link to Media File', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () =>
+			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'None' ) );
+		fireEvent.press( screen.getByText( 'Media File' ) );
+
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 
-	it( 'renders without crashing', () => {
-		const component = renderer.create( getImageComponent() );
-		const rendered = component.toJSON();
-		expect( rendered ).toBeTruthy();
+	it( 'sets link to Custom URL', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () =>
+			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'None' ) );
+		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Search or type URL' ),
+			'wordpress.org'
+		);
+		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="http://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 
-	it( 'sets link target', () => {
-		const component = renderer.create( getImageComponent() );
-		const instance = component.getInstance();
+	it( 'swaps the link between destinations', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
 
-		instance.onSetNewTab( true );
+		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () =>
+			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
+		);
+		fireEvent.press( screen.getByText( 'None' ) );
+		fireEvent.press( screen.getByText( 'Media File' ) );
+		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		fireEvent.changeText(
+			screen.getByPlaceholderText( 'Search or type URL' ),
+			'wordpress.org'
+		);
+		fireEvent.press( screen.getByA11yLabel( 'Apply' ) );
+		fireEvent.press( screen.getByText( 'Custom URL' ) );
+		fireEvent.press( screen.getByText( 'Media File' ) );
 
-		expect( setAttributes ).toHaveBeenCalledWith( {
-			linkTarget: '_blank',
-			rel: undefined,
-		} );
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://cldup.com/cXyG__fTLN.jpg"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 
-	it( 'unset link target', () => {
-		const component = renderer.create(
-			getImageComponent( {
-				linkTarget: '_blank',
-				rel: NEW_TAB_REL.join( ' ' ),
-			} )
+	it( 'does not display the Link To URL within the Custom URL input when set to Media File and query parameters are present', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"media","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<a href="https://cldup.com/cXyG__fTLN.jpg">
+				<img src="https://cldup.com/cXyG__fTLN.jpg?w=683" alt="" class="wp-image-1"/>
+			</a>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		fireEvent.press( screen.getByA11yLabel( /Image Block/ ) );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () =>
+			fireEvent.press( screen.getByA11yLabel( 'Open Settings' ) )
 		);
-		const instance = component.getInstance();
+		fireEvent.press( screen.getByText( 'Media File' ) );
+
+		expect( screen.queryByA11yLabel( /https:\/\/cldup\.com/ ) ).toBeNull();
+	} );
+
+	it( 'sets link target', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<a href="https://wordpress.org">
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+			</a>
+		<figcaption>Mountain</figcaption></figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		fireEvent.press( imageBlock );
+
+		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () => fireEvent.press( settingsButton ) );
+
+		const linkTargetButton = screen.getByText( 'Open in new tab' );
+		fireEvent.press( linkTargetButton );
+
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org" target="_blank" rel="noreferrer noopener"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
+	} );
+
+	it( 'unset link target', async () => {
+		const initialHtml = `
+		<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
+		<figure class="wp-block-image size-large is-style-default">
+			<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">
+				<img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/>
+			</a>
+			<figcaption>Mountain</figcaption>
+		</figure>
+		<!-- /wp:image -->`;
+		const screen = await initializeEditor( { initialHtml } );
+		// We must await the image fetch via `getMedia`
+		await act( () => apiFetchPromise );
+
+		const imageBlock = screen.getByA11yLabel( /Image Block/ );
+		fireEvent.press( imageBlock );
+
+		const settingsButton = screen.getByA11yLabel( 'Open Settings' );
+		// Awaiting navigation event seemingly required due to React Navigation bug
+		// https://git.io/Ju35Z
+		await act( () => fireEvent.press( settingsButton ) );
 
-		instance.onSetNewTab( false );
+		const linkTargetButton = screen.getByText( 'Open in new tab' );
+		fireEvent.press( linkTargetButton );
 
-		expect( setAttributes ).toHaveBeenCalledWith( {
-			linkTarget: undefined,
-			rel: undefined,
-		} );
+		const expectedHtml = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"custom","className":"is-style-default"} -->
+<figure class="wp-block-image size-large is-style-default"><a href="https://wordpress.org"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></a><figcaption>Mountain</figcaption></figure>
+<!-- /wp:image -->`;
+		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 } );

package/src/image/transforms.js

@@ -136,7 +136,11 @@ const transforms = {
 			// creating a new gallery.
 			type: 'files',
 			isMatch( files ) {
+				// The following check is intended to catch non-image files when dropped together with images.
 				if (
+					files.some(
+						( file ) => file.type.indexOf( 'image/' ) === 0
+					) &&
 					files.some(
 						( file ) => file.type.indexOf( 'image/' ) !== 0
 					)