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]

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: stokesman <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ellatrix <[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.

[stokesman]

Thanks for the PR!

I wanted to note that #68666 also fixes the issue from my testing. While that PR is a lot bigger it also fixes other issues so I think we can wait to see what happens with that before deciding on what to do here.

[stokesman]

This seems a very smart fix 👏. With some quick testing it seems to work without causing other issues. The only thing I see wrong with it is that the ruleset should go in the editor.scss instead of style.scss because this is an editor specific ruleset (.components-resizable-box__container is non-existant on the frontend). There’s already the selector for this too:

gutenberg/packages/block-library/src/image/editor.scss

Line 52 in 3ad4141

.wp-block-image .components-resizable-box__container {

[himanshupathak95]

Thanks @stokesman for the suggestion.

You are correct that changing this ruleset is better suited to the editor styles. I have moved the styles in editor.scss