diff --git a/core-blocks/image/index.js b/core-blocks/image/index.js
index e689b31d1139a5..a0754a7f82eaae 100644
--- a/core-blocks/image/index.js
+++ b/core-blocks/image/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -165,6 +170,10 @@ export const settings = {
save( { attributes } ) {
const { url, alt, caption, align, href, width, height, id } = attributes;
+ const classes = classnames( align ? `align${ align }` : null, {
+ 'is-resized': !! width || !! height,
+ } );
+
const image = (
+
{ href ? { image } : image }
{ caption && caption.length > 0 && }
@@ -184,6 +193,29 @@ export const settings = {
},
deprecated: [
+ {
+ attributes: blockAttributes,
+ save( { attributes } ) {
+ const { url, alt, caption, align, href, width, height, id } = attributes;
+
+ const image = (
+
+ );
+
+ return (
+
+ { href ? { image } : image }
+ { caption && caption.length > 0 && }
+
+ );
+ },
+ },
{
attributes: blockAttributes,
save( { attributes } ) {
diff --git a/core-blocks/image/style.scss b/core-blocks/image/style.scss
index bd22c450854ce4..af5157ee9464ac 100644
--- a/core-blocks/image/style.scss
+++ b/core-blocks/image/style.scss
@@ -1,5 +1,6 @@
.wp-block-image {
width: fit-content;
+
figcaption {
margin-top: 0.5em;
color: $dark-gray-300;
@@ -13,4 +14,20 @@
margin-right: auto;
text-align: center;
}
+
+ &.is-resized {
+ width: min-content;
+
+ // Emulate min-content for Edge and IE11
+ display: -ms-inline-grid;
+ -ms-grid-columns: min-content;
+
+ figcaption {
+ -ms-grid-row: 2;
+ }
+
+ img {
+ max-width: none;
+ }
+ }
}