Prevent the image from being resized larger than its container

[d-alleyne]

What?

On drag to increase the size of the image, it goes outside of the viewport. This PR fixes the issue by preventing the image from being larger than its container.

Why?

It resolves #26715 . Prevent dragged images from being larger than their container.

How?

The clientWidth variable contains the width of the container, and it is used as the max-width for the image.

Testing Instructions

1. Create a post
2. Add image block
3. drag the image block from side and bottom.
4. notice that the image never grows wider than the container

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @d-alleyne! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[kevin940726]

Thanks for the PR! I haven't tested the branch yet but left some initial recommendations and questions.

[kevin940726]

Should we compare with maxWidth here and choose the minimum?

Suggested change

	const maxWidthBuffer = clientWidth;
	const maxWidthBuffer = Math.min( clientWidth, maxWidth * 2.5 );

[d-alleyne]

@kevin940726 I believe the goal of this commit is to prevent the image from being larger than its container (clientWidth). Is there an instance where maxWidth * 2.5 is smaller than the container?

[kevin940726]

I'm not sure! It's a question and I'm not very familiar with the maxWidth settings. I think it's fine to keep just the clientWidth though.

[kevin940726]

LGTM 👍

I'm not familiar with the constraints of the image block but this tests good to me. Unless there are objections, I'd say let's merge this. We can always revert if we're missing something 🙂 .

[kevin940726]

I'd be nice if we could add some e2e tests for this, but it might be too complicated 🤔 .

[kevin940726]

Oh, we might want to also add a changelog entry for this?

[d-alleyne]

@kevin940726 Is anything else required of this?

[kevin940726]

Thanks for your patience! Due to a recent CI change, could you help rebase it again to get them green again? I'm not sure a changelog entry is required here, maybe not! I think once the CI is green we can merge this 👍