Image changes sizes upon selection

[richtabor]

Description

When an image is selected within row or stack blocks, its size occasionally changes unpredictably. This issue disrupts the editing experience and makes alignment or sizing adjustments more challenging.

Steps to reproduce

I also included the pattern below for testing.

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

Here's the pattern (just add your own 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 -->

Expected

The image should maintain its size and proportions upon selection, ensuring a stable editing experience.

Visual

CleanShot.2024-12-02.at.16.58.56.mp4

[himanshupathak95]

Hey @richtabor, Thanks for raising this issue

I noticed that max-width and max-height values were being reset when selecting/deselecting the image block, causing the unwanted size changes. I've fixed this by ensuring these values are consistently inherited in the resizable container regardless of the selection state.

Feel free to test the patch using your pattern and let me know if you see any issues.

[tellthemachines]

So the problem occurs with the specific combo of Image inside flow/constrained layout inside flex layout, which happens if we have an Image inside a Column of a Columns block. This is because Image block has a max-width observer that is only rendered when the image is inside a flow or constrained layout and the Image block is selected.

So if we deselect the Image and resize the canvas, the Image won't reflow because its max-width observer has been removed.

I'm thinking we could perhaps not remove the max-width observer when the Image isn't selected, but not sure if that can have other consequences. The PR where it was added doesn't mention why that rule was added. If @kevin940726 is around he can probably speak to that 😄

[ellatrix]

I'm thinking we could perhaps not remove the max-width observer when the Image isn't selected, but not sure if that can have other consequences.

Pretty sure that would have performance implications. Also, this reminds me of #68057. Should there simply be no max-width in certain circumstances?

[stokesman]

From my testing #68666 happens to resolve this. I’d appreciate anyone testing that PR and commenting there whether it resolves this.

I'm thinking we could perhaps not remove the max-width observer when the Image isn't selected, but not sure if that can have other consequences.

The PR I linked didn’t have to touch this. I think the reason it resolves this is because the img is no longer wrapped by ResizableBox whose max-width depends on that observer being active.

[stokesman]

I have learned more about this and have found that a part of the issue is the max-width observer hook is getting it wrong in some cases. So even if the hook were always active and no size changes happen while editing, the editor visuals would not match the frontend.

The PR I linked in my last comment resolves this issue as detailed in the OP and avoids disparity with the frontend but there are still some more obscure problems left due to the wrong max width from the hook. I am looking into a more complete fix.

---

I happened across another way to reproduce this that doesn’t depend on the Image block being wrapped. It is theme and block alignment dependent. Some themes don’t specify a max-width for left/right alignments—e.g. TT5, TT4, TT3, TT2. With any of those themes active you can reproduce this with the following steps:

1. Insert an image whose size is greater than the theme’s content width.
2. Align the image right or left.
3. Save the post.
4. Reload the editor.
5. Note the size of the image.
6. Select the image and note that it resizes to the content width.
7. (Pre)view the post on the frontend and note the image size does not match the size in the editor.

[stokesman]

I changed the title to be more generic since this can be reproduced outside of row/stack blocks. Also linked a sub-issue that details another way to reproduce this.