Fix issues with image initial size (#11846)

* Fix issues with image initial size

This PR aims to fix an issue where if an editor style provides a wider main column width than the default, images are still constrained by the default editor width (580px).

For example, the editor main column width in TwentyNineteen is wider than that of the vanilla editor style. So any image you insert there is constrained, but only in the editor.

This PR simply removes our max-width variable and defaults it to 100%. I can't tell if there are any downsides or risks to this, please give me your thoughts on it.

* Create proof of concept instead.

This commit uses a horrendous hack to calculate the width that the image should have as its max-width. It needs to be refactored, better, don't merge.

However it works.

* Use buffered max-width.

With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
It would be good to revisit this once a content-width variable becomes available.

packages/block-library/src/image/edit.js

@@ -537,6 +537,13 @@ class ImageEdit extends Component {
 							const minWidth = imageWidth < imageHeight ? MIN_SIZE : MIN_SIZE * ratio;
 							const minHeight = imageHeight < imageWidth ? MIN_SIZE : MIN_SIZE / ratio;
 
+							// With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
+							// In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
+							// The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
+							// This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
+							// @todo It would be good to revisit this once a content-width variable becomes available.
+							const maxWidthBuffer = maxWidth * 2.5;
+
 							let showRightHandle = false;
 							let showLeftHandle = false;
 
@@ -577,9 +584,9 @@ class ImageEdit extends Component {
 											} : undefined
 										}
 										minWidth={ minWidth }
-										maxWidth={ maxWidth }
+										maxWidth={ maxWidthBuffer }
 										minHeight={ minHeight }
-										maxHeight={ maxWidth / ratio }
+										maxHeight={ maxWidthBuffer / ratio }
 										lockAspectRatio
 										enable={ {
 											top: false,