Image block doesn't retain a chosen image size after using the Edit button to add alt text etc

[abrightclearweb]

Describe the bug
If you upload an image to a block, change the size of it in Image Settings to e.g. Medium and then go to edit the image, after your edits the image reappears at Full size.

To Reproduce
Steps to reproduce the behavior:

1. Create an image block
2. Upload an image to the block. The image is inserted full size.
3. When the block is selected, in the sidebar Image Settings change the image size from Full to Medium.
4. Use the Edit image button to open the Select or Upload Media modal.
5. Add a caption and alt text to the image.
6. Press the Select button to update the image.
7. The image information has updated, but it has reverted to Full size.

Expected behavior
I expected that the caption and alt text would be added to the image but the image size would stay the same.

This happens also with images already in the Media Library, but it's more relevant with new uploads to Gutenberg posts because you cannot add the caption, alt text or description when you upload the image because the options aren't there.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 64-bit
• Browser: Firefox Quantum
• Version: 61.0.2
• Gutenberg 3.7.0

[designsimply]

Nice find! Tested and confirmed using WordPress 4.9.8 and Gutenberg 3.8.0-rc.1 via Firefox 62.0 on macOS 10.13.6.

[cristian-raiber]

I think the issue is with the onSelectImage function from packages\block-library\src\image\edit.js.

	onSelectImage( media ) {
		if ( ! media || ! media.url ) {
			...
		}
		this.props.setAttributes( {
			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
			width: undefined,
			height: undefined,
		} );
	}

The url attribute will receive the full url of the selected image when you click the Select button, that's why the image size gets reverted to full.
One fix would be to check to see if the user didn't select another image from the library, than the one that was already selected, by comparing the media id. In that case only update the caption and alt text (no need to update the id and url).

	onSelectImage( media ) {
		if ( ! media || ! media.url ) {
			...
			return;
		}
		if( media.id === this.props.attributes.id ){
			this.props.setAttributes( {
				...pick( media, [ 'alt', 'caption' ] ),
			} );
			return;
		}
		this.props.setAttributes( {
			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
			width: undefined,
			height: undefined,
		} );
	}

[Sentiersduphoenix]

There will be a fix in a next update ? I don't to put more code in something where the problem comes from the initial development ! Thank you

[Sentiersduphoenix]

Always the same problem with 3.9. Can we hope Gutenberg team to fix it ?