Revert "Prevent the image from being resized larger than its container (#45775)" (#47846)

d-alleyne · web-flow · commit 8342d99ad257 · 2023-02-08T21:43:54.000+08:00
This reverts commit 2e8c7e4.
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -124,30 +124,37 @@ export default function Image( {
 		},
 		[ id, isSelected, clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, mediaUpload } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId, getSettings, canInsertBlockType } =
-				select( blockEditorStore );
-
-			const rootClientId = getBlockRootClientId( clientId );
-			const settings = Object.fromEntries(
-				Object.entries( getSettings() ).filter( ( [ key ] ) =>
-					[ 'imageEditing', 'imageSizes', 'mediaUpload' ].includes(
-						key
+	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					getSettings,
+					canInsertBlockType,
+				} = select( blockEditorStore );
+
+				const rootClientId = getBlockRootClientId( clientId );
+				const settings = Object.fromEntries(
+					Object.entries( getSettings() ).filter( ( [ key ] ) =>
+						[
+							'imageEditing',
+							'imageSizes',
+							'maxWidth',
+							'mediaUpload',
+						].includes( key )
 					)
-				)
-			);
+				);
 
-			return {
-				...settings,
-				canInsertCover: canInsertBlockType(
-					'core/cover',
-					rootClientId
-				),
-			};
-		},
-		[ clientId ]
-	);
+				return {
+					...settings,
+					canInsertCover: canInsertBlockType(
+						'core/cover',
+						rootClientId
+					),
+				};
+			},
+			[ clientId ]
+		);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -548,9 +555,13 @@ export default function Image( {
 		// 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. We'll use the clientWidth here, to prevent the width
-		// of the image growing larger than the width of the block column.
-		const maxWidthBuffer = clientWidth;
+		// 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;
