Image Block: Fix inconsistent dimensions during selection

[himanshupathak95]

Fixes: #67506

What?

Fixes inconsistent image dimensions in the Image block when selecting and deselecting the block. The image no longer changes size when interacting with it in the editor.

Why?

Currently, when selecting an image block, the dimensions temporarily change upon selection and deselection, causing an unwanted flickering effect. This creates a poor user experience and makes precise image sizing difficult. The issue occurs because the resizable container's dimensions are not consistently maintained across different interaction states.

Testing Instructions

Add a row or stack block to a page or post
Insert an image block within the row or stack.
Select the image block.
Observe any unexpected size changes when the image is selected.

Here's the pattern ( add an image to it )

<!-- wp:group {"metadata":{"categories":["link-in-bio"],"patternName":"assembler/link-in-bio-4","name":"Profile"},"align":"full","className":"is-style-section-3","style":{"spacing":{"padding":{"right":"var:preset|spacing|40","left":"var:preset|spacing|40","top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"},"blockGap":"0"},"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"dimensions":{"minHeight":"100vh"}},"backgroundColor":"base","textColor":"contrast","layout":{"type":"flex","orientation":"vertical","justifyContent":"center","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group alignfull is-style-section-3 has-contrast-color has-base-background-color has-text-color has-background has-link-color" style="min-height:100vh;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:columns {"verticalAlignment":"center","className":"alignfull","style":{"spacing":{"blockGap":{"top":"48px","left":"var:preset|spacing|50"}},"layout":{"selfStretch":"fit","flexSize":null}}} -->
<div class="wp-block-columns are-vertically-aligned-center alignfull"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"id":29,"aspectRatio":"2/3","scale":"cover","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://themes.test/wp-content/uploads/2024/11/visualelectric-1729024953029-2.jpg" alt="" class="wp-image-29" style="aspect-ratio:2/3;object-fit:cover"/><figcaption class="wp-element-caption">Made with <a href="https://w.link/">w.link</a></figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;flex-basis:50%"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"left","level":1,"fontSize":"x-large"} -->
<h1 class="wp-block-heading has-text-align-left has-x-large-font-size">田中愛子</h1>
<!-- /wp:heading -->

<!-- wp:spacer {"height":"16px","style":{"layout":[]}} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:paragraph -->
<p>幼い頃から自然や文化に触れることが大好きで、カメラを手に旅に出るたびに新しい発見や感動があります。美しい景色だけでなく、その土地の歴史や人々の暮らし、隠れた魅力を探し出すことが私の喜びです。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>私の目を通して見る世界の一端を感じていただければ幸いです。このブログでは、旅行ガイドとしての実用的な情報はもちろん、写真を楽しんでいただけるギャラリーもご用意しています。また、心に響いたエピソードや出会いもエッセイとして綴っています。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>新しい冒険を探求し、皆さんのインスピレーションとなるようなストーリーをお届けすることを目指しています。一緒に世界の美しさを見つけましょう。</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>どうぞごゆっくりお楽しみください！</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"16px","style":{"layout":[]}} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:social-links {"size":"has-normal-icon-size","className":"is-style-logos-only","style":{"spacing":{"blockGap":{"left":"8px"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"left"}} -->
<ul class="wp-block-social-links has-normal-icon-size is-style-logos-only"><!-- wp:social-link {"url":"#","service":"instagram"} /-->

<!-- wp:social-link {"url":"#","service":"x"} /-->

<!-- wp:social-link {"url":"#","service":"tumblr"} /-->

<!-- wp:social-link {"url":"#","service":"twitch"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Screencast

Before:

Screen.Recording.2024-12-03.at.09.10.28.mov

After:

Screen.Recording.2024-12-03.at.09.30.15.mov

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: richtabor <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.