diff --git a/packages/block-library/src/image/deprecated.js b/packages/block-library/src/image/deprecated.js index 34b4573c1002cb..bdfdca6ee3c4d6 100644 --- a/packages/block-library/src/image/deprecated.js +++ b/packages/block-library/src/image/deprecated.js @@ -6,7 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { RichText, useBlockProps } from '@wordpress/block-editor'; +import { + RichText, + useBlockProps, + __experimentalGetElementClassName as getBorderClassesAndStyles, +} from '@wordpress/block-editor'; /** * Deprecation for adding the `wp-image-${id}` class to the image block for @@ -539,4 +543,95 @@ const v5 = { }, }; -export default [ v5, v4, v3, v2, v1 ]; +/** + * Deprecation for adding width and height as style rules on the inner img. + * It also updates the widht and height attributes to be strings instead of numbers. + * + * @see https://github.com/WordPress/gutenberg/pull/31366 + */ +const v6 = { + save( { attributes } ) { + const { + url, + alt, + caption, + align, + href, + rel, + linkClass, + width, + height, + aspectRatio, + scale, + id, + linkTarget, + sizeSlug, + title, + } = attributes; + + const newRel = ! rel ? undefined : rel; + const borderProps = getBorderClassesAndStyles( attributes ); + + const classes = classnames( { + [ `align${ align }` ]: align, + [ `size-${ sizeSlug }` ]: sizeSlug, + 'is-resized': width || height, + 'has-custom-border': + !! borderProps.className || + ( borderProps.style && + Object.keys( borderProps.style ).length > 0 ), + } ); + + const imageClasses = classnames( borderProps.className, { + [ `wp-image-${ id }` ]: !! id, + } ); + + const image = ( + { + ); + + const figure = ( + <> + { href ? ( + + { image } + + ) : ( + image + ) } + { ! RichText.isEmpty( caption ) && ( + + ) } + + ); + + return ( +
+ { figure } +
+ ); + }, +}; + +export default [ v6, v5, v4, v3, v2, v1 ]; diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index 95e8803dd67858..6fa8c6b2342f32 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -58,6 +58,8 @@ export default function save( { attributes } ) { ...borderProps.style, aspectRatio, objectFit: scale, + width, + height, } } width={ width } height={ height } diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json index 24be125d856abf..6b2f1a80f52c6d 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json +++ b/test/integration/fixtures/blocks/core__image__deprecated-v1-add-responsive-class.json @@ -3,10 +3,10 @@ "name": "core/image", "isValid": true, "attributes": { - "align": "left", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", - "caption": [] + "caption": [], + "align": "left" }, "innerBlocks": [] } diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json index 8d1d58f3e6fd3e..a0ad3b755587b8 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json +++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.json @@ -3,10 +3,10 @@ "name": "core/image", "isValid": true, "attributes": { - "align": "left", "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==", "alt": "", "caption": [], + "align": "left", "width": 100, "height": 100 }, diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html index eb06f249748638..7ce56e11fa75e9 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-v2-add-is-resized-class.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html index eb06f249748638..7ce56e11fa75e9 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-v3-add-align-wrapper.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html index 5ba1eb754e83f6..cfdc52e3cbb6ea 100644 --- a/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html +++ b/test/integration/fixtures/blocks/core__image__deprecated-v4-remove-align-wrapper.serialized.html @@ -1,3 +1,3 @@ -
+