From 3b1affe4c50e25af265846b219155698b9b7fafc Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Fri, 16 Aug 2024 16:13:15 +0800
Subject: [PATCH] Use ID as a namespace to increase specificity

---
 .../image-editor/v2/aspect-ratio-dropdown.js  |  4 +--
 .../src/image-cropper/component.tsx           | 11 +++++++
 .../components/src/image-cropper/styles.tsx   | 33 +++++++++++--------
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/packages/block-editor/src/components/image-editor/v2/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/v2/aspect-ratio-dropdown.js
index cf8fb2eb14dde..8962e140b454b 100644
--- a/packages/block-editor/src/components/image-editor/v2/aspect-ratio-dropdown.js
+++ b/packages/block-editor/src/components/image-editor/v2/aspect-ratio-dropdown.js
@@ -56,7 +56,7 @@ function presetRatioAsNumber( { ratio, ...rest } ) {
 
 export default function AspectRatioDropdown( { toggleProps } ) {
 	const {
-		state: { image, cropper },
+		state: { image, cropper, isAspectRatioLocked },
 		dispatch,
 	} = useImageCropper();
 	const defaultAspect = image.width / image.height;
@@ -89,7 +89,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 							}
 							onClose();
 						} }
-						value={ aspectRatio }
+						value={ isAspectRatioLocked ? aspectRatio : 0 }
 						aspectRatios={ [
 							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
 							{
diff --git a/packages/components/src/image-cropper/component.tsx b/packages/components/src/image-cropper/component.tsx
index 578c314121353..b92131b2e465b 100644
--- a/packages/components/src/image-cropper/component.tsx
+++ b/packages/components/src/image-cropper/component.tsx
@@ -190,6 +190,9 @@ const Cropper = forwardRef< HTMLDivElement >( ( {}, ref ) => {
 
 	return (
 		<MaxWidthWrapper
+			// Disable reason: We're using this ID as a namespace only to increase CSS specificity for this component.
+			// eslint-disable-next-line no-restricted-syntax
+			id="components-image-cropper"
 			style={ {
 				width: isAxisSwapped
 					? `${ originalHeight }px`
@@ -232,6 +235,10 @@ const Cropper = forwardRef< HTMLDivElement >( ( {}, ref ) => {
 					crossOrigin="anonymous"
 					isResizing={ isResizing }
 					isDragging={ isDragging }
+					style={ {
+						width: `${ image.width }px`,
+						height: `${ image.height }px`,
+					} }
 				/>
 				<CropWindow>
 					<ContainWindow>
@@ -242,6 +249,10 @@ const Cropper = forwardRef< HTMLDivElement >( ( {}, ref ) => {
 							alt=""
 							crossOrigin="anonymous"
 							ref={ imageRef }
+							style={ {
+								width: `${ image.width }px`,
+								height: `${ image.height }px`,
+							} }
 						/>
 					</ContainWindow>
 				</CropWindow>
diff --git a/packages/components/src/image-cropper/styles.tsx b/packages/components/src/image-cropper/styles.tsx
index 0004556a21b63..9f9bf1a5904f5 100644
--- a/packages/components/src/image-cropper/styles.tsx
+++ b/packages/components/src/image-cropper/styles.tsx
@@ -97,7 +97,6 @@ export const Resizable = styled( MotionResizable )`
 export const MaxWidthWrapper = styled.div`
 	position: relative;
 	max-width: 100%;
-
 	min-width: 0;
 `;
 
@@ -115,19 +114,25 @@ export const ContainWindow = styled.div`
 `;
 
 export const Img = styled( motion.img )`
-	position: absolute;
-	pointer-events: none;
-	top: 50%;
-	left: 50%;
-	transform-origin: center center;
-	rotate: var( --wp-cropper-angle );
-	scale: var( --wp-cropper-scale-x ) var( --wp-cropper-scale-y );
-	translate: calc(
-			var( --wp-cropper-image-x ) - var( --wp-cropper-window-x ) - 50%
-		)
-		calc( var( --wp-cropper-image-y ) - var( --wp-cropper-window-y ) - 50% );
-	will-change: rotate, scale, translate;
-	contain: strict;
+	// Using a "namespace" ID to increase CSS specificity for this component.
+	#components-image-cropper & {
+		position: absolute;
+		pointer-events: none;
+		top: 50%;
+		left: 50%;
+		transform-origin: center center;
+		rotate: var( --wp-cropper-angle );
+		scale: var( --wp-cropper-scale-x ) var( --wp-cropper-scale-y );
+		translate: calc(
+				var( --wp-cropper-image-x ) - var( --wp-cropper-window-x ) - 50%
+			)
+			calc(
+				var( --wp-cropper-image-y ) - var( --wp-cropper-window-y ) - 50%
+			);
+		will-change: rotate, scale, translate;
+		contain: strict;
+		max-width: none;
+	}
 `;
 
 export const BackgroundImg = styled( Img, {