diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
index 56561ae4d4fa13..bc6ac27412bf6d 100644
--- a/packages/block-library/src/image/edit.js
+++ b/packages/block-library/src/image/edit.js
@@ -2,7 +2,7 @@
* External dependencies
*/
import classnames from 'classnames';
-import { get, omit, pick } from 'lodash';
+import { get, has, omit, pick } from 'lodash';
/**
* WordPress dependencies
@@ -71,6 +71,22 @@ const isTemporaryImage = ( id, url ) => ! id && isBlobURL( url );
*/
export const isExternalImage = ( id, url ) => url && ! id && ! isBlobURL( url );
+/**
+ * Checks if WP generated default image size. Size generation is skipped
+ * when the image is smaller than the said size.
+ *
+ * @param {Object} image
+ * @param {string} defaultSize
+ *
+ * @return {boolean} Whether or not it has default image size.
+ */
+function hasDefaultSize( image, defaultSize ) {
+ return (
+ has( image, [ 'sizes', defaultSize, 'url' ] ) ||
+ has( image, [ 'media_details', 'sizes', defaultSize, 'source_url' ] )
+ );
+}
+
export function ImageEdit( {
attributes,
setAttributes,
@@ -148,7 +164,11 @@ export function ImageEdit( {
additionalAttributes = {
width: undefined,
height: undefined,
- sizeSlug: imageDefaultSize,
+ // Fallback to size "full" if there's no default image size.
+ // It means the image is smaller, and the block will use a full-size URL.
+ sizeSlug: hasDefaultSize( media, imageDefaultSize )
+ ? imageDefaultSize
+ : 'full',
};
} else {
// Keep the same url when selecting the same file, so "Image Size"
diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js
index 1acf1248f7182c..93dfd001e1030c 100644
--- a/packages/e2e-tests/specs/editor/blocks/image.test.js
+++ b/packages/e2e-tests/specs/editor/blocks/image.test.js
@@ -69,7 +69,7 @@ describe( 'Image', () => {
await waitForImage( filename );
const regex = new RegExp(
- `\\s*
\\s*`
+ `\\s*
\\s*`
);
expect( await getEditedPostContent() ).toMatch( regex );
} );
@@ -80,7 +80,7 @@ describe( 'Image', () => {
await waitForImage( filename1 );
const regex1 = new RegExp(
- `\\s*
\\s*`
+ `\\s*
\\s*`
);
expect( await getEditedPostContent() ).toMatch( regex1 );
@@ -88,7 +88,7 @@ describe( 'Image', () => {
await page.click( '[aria-label="Image size presets"] button' );
const regex2 = new RegExp(
- `\\s*
<\\/figure>\\s*`
+ `\\s*
<\\/figure>\\s*`
);
expect( await getEditedPostContent() ).toMatch( regex2 );
@@ -100,7 +100,7 @@ describe( 'Image', () => {
await waitForImage( filename2 );
const regex3 = new RegExp(
- `\\s*
\\s*`
+ `\\s*
\\s*`
);
expect( await getEditedPostContent() ).toMatch( regex3 );
@@ -322,7 +322,7 @@ describe( 'Image', () => {
);
const regexBefore = new RegExp(
- `\\s*
<\\/figure>\\s*`
+ `\\s*
<\\/figure>\\s*`
);
// Check if dimensions are changed.