Fix/image block reset sizes on external url change (#26879)

* fix: ImageBlock reset size on external url change * add bug fix to CHANGELOG.md * E2E Test: Image Block should reset dimensions on URL change
WordPress · Mar 22, 2021 · 2cc9a1b · 2cc9a1b
1 parent 692b8b7
commit 2cc9a1b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -30,6 +30,11 @@
 - Fix a regression where the Cover would not show opacity controls for the default overlay color ([#26625](https://github.com/WordPress/gutenberg/pull/26625)).
 - Fix a regression ([#26545](https://github.com/WordPress/gutenberg/pull/26545)) where the Cover block lost its default background overlay color
   ([#26569](https://github.com/WordPress/gutenberg/pull/26569)).
+- Fix Image Block, reset image dimensions when replace URL. bug mentioned in ([#26333](https://github.com/WordPress/gutenberg/issues/26333)).
+
+### Enhancement
+
+- File Block: Copy url button is moved to Block toolbar.
 
 ## 2.23.0 (2020-09-03)
 

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -207,6 +207,8 @@ export function ImageEdit( {
 			setAttributes( {
 				url: newURL,
 				id: undefined,
+				width: undefined,
+				height: undefined,
 				sizeSlug: DEFAULT_SIZE_SLUG,
 			} );
 		}

diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js
@@ -288,4 +288,49 @@ describe( 'Image', () => {
 		expect( initialImageDataURL ).not.toEqual( updatedImageDataURL );
 		expect( updatedImageDataURL ).toMatchSnapshot();
 	} );
+
+	it( 'Should reset dimensions on change URL', async () => {
+		const imageUrl = '/wp-includes/images/w-logo-blue.png';
+
+		await insertBlock( 'Image' );
+
+		// Upload an initial image.
+		const filename = await upload( '.wp-block-image input[type="file"]' );
+
+		// Resize the Uploaded Image.
+		await openDocumentSettingsSidebar();
+		await page.click(
+			'[aria-label="Image size presets"] button:first-child'
+		);
+
+		const regexBefore = new RegExp(
+			`<!-- wp:image {"id":\\d+,"width":3,"height":3,"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large is-resized"><img src="[^"]+\\/${ filename }\\.png" alt="" class="wp-image-\\d+" width="3" height="3"\\/><\\/figure>\\s*<!-- /wp:image -->`
+		);
+
+		// Check if dimensions are changed.
+		expect( await getEditedPostContent() ).toMatch( regexBefore );
+
+		// Replace uploaded image with an URL.
+		await clickButton( 'Replace' );
+		await clickButton( 'Edit' );
+
+		await page.waitForSelector( '.block-editor-url-input__input' );
+		await page.evaluate(
+			() =>
+				( document.querySelector(
+					'.block-editor-url-input__input'
+				).value = '' )
+		);
+
+		await page.focus( '.block-editor-url-input__input' );
+		await page.keyboard.type( imageUrl );
+		await page.click( '.block-editor-link-control__search-submit' );
+
+		const regexAfter = new RegExp(
+			`<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-large"><img src="${ imageUrl }" alt=""/></figure>\\s*<!-- /wp:image -->`
+		);
+
+		// Check if dimensions are reset.
+		expect( await getEditedPostContent() ).toMatch( regexAfter );
+	} );
 } );