Only observe the max width for simple layouts

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

@@ -112,6 +112,12 @@ export function ImageEdit( {
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 
 	const containerRef = useRef();
+	// Only observe the max width from the parent container when the parent layout is default or constrained.
+	// This won't work for flex or grid layouts because the container width changes with image.
+	// TODO: Find a way to observe the container width for flex and grid layouts.
+	const isMaxWidthContainerWidth =
+		parentLayout?.type === 'default' ||
+		parentLayout?.type === 'constrained';
 	const [ maxWidthObserver, maxContentWidth ] = useMaxWidthObserver();
 
 	const altRef = useRef();
@@ -457,7 +463,7 @@ export function ImageEdit( {
 			{
 				// The listener cannot be placed as the first element as it will break the in-between inserter.
 				// See https://github.com/WordPress/gutenberg/blob/71134165868298fc15e22896d0c28b41b3755ff7/packages/block-editor/src/components/block-list/use-in-between-inserter.js#L120
-				isSingleSelected && maxWidthObserver
+				isSingleSelected && isMaxWidthContainerWidth && maxWidthObserver
 			}
 		</>
 	);

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

@@ -146,7 +146,7 @@ export default function Image( {
 		[ id, isSingleSelected ]
 	);
 
-	const { canInsertCover, imageEditing, imageSizes } = useSelect(
+	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
 		( select ) => {
 			const { getBlockRootClientId, canInsertBlockType } =
 				select( blockEditorStore );
@@ -157,6 +157,7 @@ export default function Image( {
 			return {
 				imageEditing: settings.imageEditing,
 				imageSizes: settings.imageSizes,
+				maxWidth: settings.maxWidth,
 				canInsertCover: canInsertBlockType(
 					'core/cover',
 					rootClientId
@@ -923,6 +924,18 @@ export default function Image( {
 		const minHeight =
 			naturalHeight < naturalWidth ? 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;
+		const maxResizeWidth = maxContentWidth || maxWidthBuffer;
+
 		let showRightHandle = false;
 		let showLeftHandle = false;
 
@@ -967,11 +980,9 @@ export default function Image( {
 				} }
 				showHandle={ isSingleSelected }
 				minWidth={ minWidth }
-				maxWidth={ maxContentWidth }
+				maxWidth={ maxResizeWidth }
 				minHeight={ minHeight }
-				maxHeight={
-					maxContentWidth ? maxContentWidth / ratio : undefined
-				}
+				maxHeight={ maxResizeWidth / ratio }
 				lockAspectRatio={ ratio }
 				enable={ {
 					top: false,
@@ -985,6 +996,7 @@ export default function Image( {
 
 					// Clear hardcoded width if the resized width is close to the max-content width.
 					if (
+						maxContentWidth &&
 						// Only do this if the image is bigger than the container to prevent it from being squished.
 						// TODO: Remove this check if the image support setting 100% width.
 						naturalWidth >= maxContentWidth &&