diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index d54638785f3e7..b8c9cd66e92b3 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -4,6 +4,7 @@ import classnames from 'classnames'; import ResizableBox from 're-resizable'; import { + find, get, isEmpty, map, @@ -64,7 +65,7 @@ class ImageEdit extends Component { this.onFocusCaption = this.onFocusCaption.bind( this ); this.onImageClick = this.onImageClick.bind( this ); this.onSelectImage = this.onSelectImage.bind( this ); - this.updateImageURL = this.updateImageURL.bind( this ); + this.updateSizesAndURL = this.updateSizesAndURL.bind( this ); this.updateWidth = this.updateWidth.bind( this ); this.updateHeight = this.updateHeight.bind( this ); this.updateDimensions = this.updateDimensions.bind( this ); @@ -121,9 +122,7 @@ class ImageEdit extends Component { return; } this.props.setAttributes( { - ...pick( media, [ 'alt', 'id', 'caption', 'url' ] ), - width: undefined, - height: undefined, + ...pick( media, [ 'alt', 'id', 'caption', 'url', 'width', 'height' ] ), } ); } @@ -177,21 +176,32 @@ class ImageEdit extends Component { this.props.setAttributes( { ...extraUpdatedAttributes, align: nextAlign } ); } - updateImageURL( url ) { - this.props.setAttributes( { url, width: undefined, height: undefined } ); + updateSizesAndURL( url ) { + const newAttributes = { url, isResized: false }; + const availableSizes = this.getAvailableSizes(); + + const newSize = find( availableSizes, ( size ) => { + return url === size.source_url; + } ); + + if ( undefined !== newSize && undefined !== newSize.width && undefined !== newSize.height ) { + newAttributes.width = newSize.width; + newAttributes.height = newSize.height; + } + this.props.setAttributes( newAttributes ); } updateWidth( width ) { - this.props.setAttributes( { width: parseInt( width, 10 ) } ); + this.props.setAttributes( { width: parseInt( width, 10 ), isResized: true } ); } updateHeight( height ) { - this.props.setAttributes( { height: parseInt( height, 10 ) } ); + this.props.setAttributes( { height: parseInt( height, 10 ), isResized: true } ); } updateDimensions( width = undefined, height = undefined ) { return () => { - this.props.setAttributes( { width, height } ); + this.props.setAttributes( { width, height, isResized: !! ( width && height ) } ); }; } @@ -210,7 +220,7 @@ class ImageEdit extends Component { render() { const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection, isRTL } = this.props; - const { url, alt, caption, align, id, href, linkDestination, width, height } = attributes; + const { url, alt, caption, align, id, href, linkDestination, width, height, isResized } = attributes; const controls = ( @@ -260,7 +270,7 @@ class ImageEdit extends Component { const classes = classnames( className, { 'is-transient': 0 === url.indexOf( 'blob:' ), - 'is-resized': !! width || !! height, + 'is-resized': isResized, 'is-focused': isSelected, } ); @@ -285,7 +295,7 @@ class ImageEdit extends Component { value: size.source_url, label: startCase( name ), } ) ) } - onChange={ this.updateImageURL } + onChange={ this.updateSizesAndURL } /> ) } { isResizable && ( @@ -299,7 +309,6 @@ class ImageEdit extends Component { className="block-library-image__dimensions__width" label={ __( 'Width' ) } value={ width !== undefined ? width : '' } - placeholder={ imageWidth } min={ 1 } onChange={ this.updateWidth } /> @@ -308,7 +317,6 @@ class ImageEdit extends Component { className="block-library-image__dimensions__height" label={ __( 'Height' ) } value={ height !== undefined ? height : '' } - placeholder={ imageHeight } min={ 1 } onChange={ this.updateHeight } /> diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 22b21a3a27fc9..cf8d5dc70bbd3 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -56,9 +56,18 @@ const blockAttributes = { }, width: { type: 'number', + source: 'attribute', + selector: 'img', + attribute: 'width', }, height: { type: 'number', + source: 'attribute', + selector: 'img', + attribute: 'height', + }, + isResized: { + type: 'boolean', }, linkDestination: { type: 'string', @@ -68,7 +77,7 @@ const blockAttributes = { const imageSchema = { img: { - attributes: [ 'src', 'alt' ], + attributes: [ 'src', 'alt', 'width', 'height' ], classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ], }, }; @@ -199,11 +208,11 @@ export const settings = { edit, save( { attributes } ) { - const { url, alt, caption, align, href, width, height, id } = attributes; + const { url, alt, caption, align, href, width, height, id, isResized } = attributes; const classes = classnames( { [ `align${ align }` ]: align, - 'is-resized': width || height, + 'is-resized': isResized, } ); const image = ( diff --git a/test/integration/fixtures/google-docs-out.html b/test/integration/fixtures/google-docs-out.html index a8d31000403d6..bb7e6b5897376 100644 --- a/test/integration/fixtures/google-docs-out.html +++ b/test/integration/fixtures/google-docs-out.html @@ -31,6 +31,6 @@

This is a heading

-
+
diff --git a/test/integration/fixtures/ms-word-out.html b/test/integration/fixtures/ms-word-out.html index edf7209a4f8f3..3dc523d487359 100644 --- a/test/integration/fixtures/ms-word-out.html +++ b/test/integration/fixtures/ms-word-out.html @@ -35,5 +35,5 @@

This is a heading level 2

-
+
diff --git a/test/integration/fixtures/one-image-out.html b/test/integration/fixtures/one-image-out.html index defa0138370fa..4f80de8db75eb 100644 --- a/test/integration/fixtures/one-image-out.html +++ b/test/integration/fixtures/one-image-out.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/fixtures/two-images-out.html b/test/integration/fixtures/two-images-out.html index 4b96a052a52b7..2c6c4e3e4b458 100644 --- a/test/integration/fixtures/two-images-out.html +++ b/test/integration/fixtures/two-images-out.html @@ -1,7 +1,7 @@ -
+
-
+
diff --git a/test/integration/full-content/fixtures/core__image.html b/test/integration/full-content/fixtures/core__image.html index eda663561a38b..584d3c6a52472 100644 --- a/test/integration/full-content/fixtures/core__image.html +++ b/test/integration/full-content/fixtures/core__image.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image.json b/test/integration/full-content/fixtures/core__image.json index dd89c78069c8e..d24c20d62ec1e 100644 --- a/test/integration/full-content/fixtures/core__image.json +++ b/test/integration/full-content/fixtures/core__image.json @@ -5,6 +5,8 @@ "isValid": true, "attributes": { "url": "https://cldup.com/uuUqE_dXzy.jpg", + "width": 769, + "height": 511, "alt": "", "caption": { "formats": [], @@ -13,6 +15,6 @@ "linkDestination": "none" }, "innerBlocks": [], - "originalContent": "
\"\"
" + "originalContent": "
\"\"
" } ] diff --git a/test/integration/full-content/fixtures/core__image.parsed.json b/test/integration/full-content/fixtures/core__image.parsed.json index eba958b3ec9a3..b4ca411360530 100644 --- a/test/integration/full-content/fixtures/core__image.parsed.json +++ b/test/integration/full-content/fixtures/core__image.parsed.json @@ -3,7 +3,7 @@ "blockName": "core/image", "attrs": null, "innerBlocks": [], - "innerHTML": "\n
\"\"
\n" + "innerHTML": "\n
\"\"
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__image.serialized.html b/test/integration/full-content/fixtures/core__image.serialized.html index 5dfb0bac3e5b7..cf768750d0f49 100644 --- a/test/integration/full-content/fixtures/core__image.serialized.html +++ b/test/integration/full-content/fixtures/core__image.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__attachment-link.html b/test/integration/full-content/fixtures/core__image__attachment-link.html index 908250d8ca249..853ee42aa1aea 100644 --- a/test/integration/full-content/fixtures/core__image__attachment-link.html +++ b/test/integration/full-content/fixtures/core__image__attachment-link.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__attachment-link.json b/test/integration/full-content/fixtures/core__image__attachment-link.json index 3aaa94408659a..cc3897a9013b3 100644 --- a/test/integration/full-content/fixtures/core__image__attachment-link.json +++ b/test/integration/full-content/fixtures/core__image__attachment-link.json @@ -6,6 +6,9 @@ "attributes": { "url": "https://cldup.com/uuUqE_dXzy.jpg", "alt": "", + "width": 769, + "height": 511, + "caption": [], "caption": { "formats": [], "text": "" @@ -14,6 +17,6 @@ "linkDestination": "attachment" }, "innerBlocks": [], - "originalContent": "
\"\"
" + "originalContent": "
\"\"
" } ] diff --git a/test/integration/full-content/fixtures/core__image__attachment-link.parsed.json b/test/integration/full-content/fixtures/core__image__attachment-link.parsed.json index ddf8f9ba6a264..eba8b1aa9ee52 100644 --- a/test/integration/full-content/fixtures/core__image__attachment-link.parsed.json +++ b/test/integration/full-content/fixtures/core__image__attachment-link.parsed.json @@ -5,7 +5,7 @@ "linkDestination": "attachment" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
\n" + "innerHTML": "\n
\"\"
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__image__attachment-link.serialized.html b/test/integration/full-content/fixtures/core__image__attachment-link.serialized.html index f5ebb9af4182c..87cc73420c137 100644 --- a/test/integration/full-content/fixtures/core__image__attachment-link.serialized.html +++ b/test/integration/full-content/fixtures/core__image__attachment-link.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.html b/test/integration/full-content/fixtures/core__image__center-caption.html index bfe40d190fa66..0b6882c2753c3 100644 --- a/test/integration/full-content/fixtures/core__image__center-caption.html +++ b/test/integration/full-content/fixtures/core__image__center-caption.html @@ -1,3 +1,3 @@ -
Give it a try. Press the "really wide" button on the image toolbar.
+
Give it a try. Press the "really wide" button on the image toolbar.
diff --git a/test/integration/full-content/fixtures/core__image__center-caption.json b/test/integration/full-content/fixtures/core__image__center-caption.json index 571e6ad5a676f..305e5d4ba8eac 100644 --- a/test/integration/full-content/fixtures/core__image__center-caption.json +++ b/test/integration/full-content/fixtures/core__image__center-caption.json @@ -5,7 +5,11 @@ "isValid": true, "attributes": { "url": "https://cldup.com/YLYhpou2oq.jpg", + "width": 1322, "alt": "", + "caption": [ + "Give it a try. Press the \"really wide\" button on the image toolbar." + ], "caption": { "formats": [ null, @@ -78,10 +82,11 @@ ], "text": "Give it a try. Press the \"really wide\" button on the image toolbar." }, + "height": 511, "align": "center", "linkDestination": "none" }, "innerBlocks": [], - "originalContent": "
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
" + "originalContent": "
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
" } ] diff --git a/test/integration/full-content/fixtures/core__image__center-caption.parsed.json b/test/integration/full-content/fixtures/core__image__center-caption.parsed.json index e3a0f7abeb76a..3a2422352eb1c 100644 --- a/test/integration/full-content/fixtures/core__image__center-caption.parsed.json +++ b/test/integration/full-content/fixtures/core__image__center-caption.parsed.json @@ -5,7 +5,7 @@ "align": "center" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n" + "innerHTML": "\n
\"\"
Give it a try. Press the "really wide" button on the image toolbar.
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__image__center-caption.serialized.html b/test/integration/full-content/fixtures/core__image__center-caption.serialized.html index 3410b04fdf121..c11f3ec1f0f16 100644 --- a/test/integration/full-content/fixtures/core__image__center-caption.serialized.html +++ b/test/integration/full-content/fixtures/core__image__center-caption.serialized.html @@ -1,3 +1,3 @@ -
Give it a try. Press the "really wide" button on the image toolbar.
+
Give it a try. Press the "really wide" button on the image toolbar.
diff --git a/test/integration/full-content/fixtures/core__image__custom-link.html b/test/integration/full-content/fixtures/core__image__custom-link.html index 353dc5376b7a4..8c06c007e0ae0 100644 --- a/test/integration/full-content/fixtures/core__image__custom-link.html +++ b/test/integration/full-content/fixtures/core__image__custom-link.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__custom-link.json b/test/integration/full-content/fixtures/core__image__custom-link.json index 136ae7357e680..efac05f1f6c48 100644 --- a/test/integration/full-content/fixtures/core__image__custom-link.json +++ b/test/integration/full-content/fixtures/core__image__custom-link.json @@ -5,15 +5,17 @@ "isValid": true, "attributes": { "url": "https://cldup.com/uuUqE_dXzy.jpg", + "width": 579, "alt": "", "caption": { "formats": [], "text": "" }, + "height": 385, "href": "https://wordpress.org/", "linkDestination": "custom" }, "innerBlocks": [], - "originalContent": "
\"\"
" + "originalContent": "
\"\"
" } ] diff --git a/test/integration/full-content/fixtures/core__image__custom-link.parsed.json b/test/integration/full-content/fixtures/core__image__custom-link.parsed.json index fc004f13447ea..2430ceed15d25 100644 --- a/test/integration/full-content/fixtures/core__image__custom-link.parsed.json +++ b/test/integration/full-content/fixtures/core__image__custom-link.parsed.json @@ -5,7 +5,7 @@ "linkDestination": "custom" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
\n" + "innerHTML": "\n
\"\"
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__image__custom-link.serialized.html b/test/integration/full-content/fixtures/core__image__custom-link.serialized.html index 47357bea6b9d4..4dac5182408b3 100644 --- a/test/integration/full-content/fixtures/core__image__custom-link.serialized.html +++ b/test/integration/full-content/fixtures/core__image__custom-link.serialized.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__media-link.html b/test/integration/full-content/fixtures/core__image__media-link.html index 90b3d227117b0..343f7f10dcc6f 100644 --- a/test/integration/full-content/fixtures/core__image__media-link.html +++ b/test/integration/full-content/fixtures/core__image__media-link.html @@ -1,3 +1,3 @@ -
+
diff --git a/test/integration/full-content/fixtures/core__image__media-link.json b/test/integration/full-content/fixtures/core__image__media-link.json index 6b329e94a4837..edd45088e752a 100644 --- a/test/integration/full-content/fixtures/core__image__media-link.json +++ b/test/integration/full-content/fixtures/core__image__media-link.json @@ -10,10 +10,12 @@ "formats": [], "text": "" }, + "height": 385, + "width": 579, "href": "https://cldup.com/uuUqE_dXzy.jpg", "linkDestination": "media" }, "innerBlocks": [], - "originalContent": "
\"\"
" + "originalContent": "
\"\"
" } ] diff --git a/test/integration/full-content/fixtures/core__image__media-link.parsed.json b/test/integration/full-content/fixtures/core__image__media-link.parsed.json index a7101b0afa410..8aa26e0863b4d 100644 --- a/test/integration/full-content/fixtures/core__image__media-link.parsed.json +++ b/test/integration/full-content/fixtures/core__image__media-link.parsed.json @@ -5,7 +5,7 @@ "linkDestination": "media" }, "innerBlocks": [], - "innerHTML": "\n
\"\"
\n" + "innerHTML": "\n
\"\"
\n" }, { "attrs": {}, diff --git a/test/integration/full-content/fixtures/core__image__media-link.serialized.html b/test/integration/full-content/fixtures/core__image__media-link.serialized.html index 721abac903ff3..3456b74605525 100644 --- a/test/integration/full-content/fixtures/core__image__media-link.serialized.html +++ b/test/integration/full-content/fixtures/core__image__media-link.serialized.html @@ -1,3 +1,3 @@ -
+