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.