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; + } + } }