Manual image size input disregarded after clicking an image

[davewhitley]

Description

When you manually set the width of an image, the size is unexpectedly reset to a minimum size after clicking on the image in the editor. I expected the width of the image to respect the value I entered into the width field.

Additionally, when you resize an image below a certain threshold, the image container does not scale down with the image size, thus displaying incorrectly in the editor.

Step-by-step reproduction instructions

1. Create a Grid with nested Stack blocks, with images in each Stack. (or use provided snippet)
2. Try to resize the 260x40 image to 80px width using the Width input in the sidebar.
3. Notice how the image frame is bigger than the image.
4. Click the image once to select it, then again with the bottom resize handle visible.
5. Notice how the image size is increased, even though I didn't drag the handle to resize the image.

I expected the image to retain the 80px width that I set.

Also notice that when you click on the bottom resize handle of any other image, the size changes from auto to a numeric value. I would expect the size to remain auto.

Screenshots, screen recording, code snippet

CleanShot.2025-01-21.at.11.12.47.mp4

Snippet for testing

<!-- wp:group {"className":"is-style-default","layout":{"type":"grid","columnCount":4,"minimumColumnWidth":null}} -->
<div class="wp-block-group is-style-default"><!-- wp:group {"className":"is-style-section-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","verticalAlignment":"center"}} -->
<div class="wp-block-group is-style-section-2" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:image {"id":6,"scale":"cover","sizeSlug":"full","linkDestination":"none","align":"center","className":"is-style-default"} -->
<figure class="wp-block-image aligncenter size-full is-style-default"><img src="http://localhost:8882/wp-content/uploads/2025/01/24x24text24.gif" alt="" class="wp-image-6" style="object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-style-section-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","verticalAlignment":"center"}} -->
<div class="wp-block-group is-style-section-2" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:image {"id":8,"scale":"cover","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="http://localhost:8882/wp-content/uploads/2025/01/60x60.gif" alt="" class="wp-image-8" style="object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-style-section-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical","verticalAlignment":"center","justifyContent":"center"}} -->
<div class="wp-block-group is-style-section-2" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:image {"id":7,"width":"70px","sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full is-resized"><img src="http://localhost:8882/wp-content/uploads/2025/01/260x40.gif" alt="" class="wp-image-7" style="width:70px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:group {"className":"is-style-section-2","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center","verticalAlignment":"center"}} -->
<div class="wp-block-group is-style-section-2" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:image {"id":9,"sizeSlug":"full","linkDestination":"none","align":"center"} -->
<figure class="wp-block-image aligncenter size-full"><img src="http://localhost:8882/wp-content/uploads/2025/01/150x60.gif" alt="" class="wp-image-9"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

Environment info

• WP 6.7.1, default Gutenberg
• Safari Version 17.6 (19618.3.11.11.5)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[davewhitley]

I suspect that there is a minimum size for the image to display the resize handles, but it creates an issue when you want to resize the image below the minimum size for the handles.

[davewhitley]

Also, in the mobile view, the image does not render correctly. It renders correctly on the front end. Notice how the image is breaking out of its container.