diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index d159009b17373..ba33de10dfe4e 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -310,6 +310,13 @@ const v4 = { supports: { anchor: true, }, + migrate( { width, height, ...attributes } ) { + return { + ...attributes, + width: `${ width }px`, + height: `${ height }px`, + }; + }, save( { attributes } ) { const { url, @@ -480,6 +487,13 @@ const v5 = { }, }, }, + migrate( { width, height, ...attributes } ) { + return { + ...attributes, + width: `${ width }px`, + height: `${ height }px`, + }; + }, save( { attributes } ) { const { url, @@ -654,6 +668,13 @@ const v6 = { }, }, }, + migrate( { width, height, ...attributes } ) { + return { + ...attributes, + width: `${ width }px`, + height: `${ height }px`, + }; + }, save( { attributes } ) { const { url, diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index 81565af09abab..c00683a8f0bb0 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -49,6 +49,22 @@ export default function save( { attributes } ) { [ `wp-image-${ id }` ]: !! id, } ); + const imgStyle = { aspectRatio, objectFit: scale }; + + // Branch by whether width and height both have size. + // If the image block is very old and has not been migrated to a string type, the size will be int. + // Note that only width may be "auto". + if ( ! aspectRatio && height && width && 'auto' !== width ) { + const w = parseInt( width ); + const h = parseInt( height ); + if ( ! isNaN( w ) && ! isNaN( h ) ) { + imgStyle.aspectRatio = `${ w }/${ h }`; + } + } else { + if ( 'string' === typeof width ) imgStyle.width = width; + if ( 'string' === typeof height ) imgStyle.height = height; + } + const image = (