Media Editor Modal: Add an Advanced Panel with top/left and width/height controls

packages/media-editor/src/components/media-editor-crop-panel/crop-advanced-panel.tsx

@@ -0,0 +1,245 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	__experimentalNumberControl as NumberControl,
+	Flex,
+	FlexItem,
+	PanelBody,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
+
+/**
+ * Internal dependencies
+ */
+import { useCropper } from '../../image-editor';
+import {
+	getCropPixels,
+	getReachableCropBoundsInPixels,
+	pixelsToCropRect,
+} from '../../utils/crop-pixels';
+
+interface CropAdvancedPanelProps {
+	/** Resolved aspect ratio (width / height). When set, Width and Height inputs are linked. */
+	aspectRatio?: number;
+	onPlacementControlInteraction?: () => void;
+}
+
+const pxSuffix = <InputControlSuffixWrapper>px</InputControlSuffixWrapper>;
+
+interface CropInputProps {
+	label: string;
+	'aria-label'?: string;
+	value: number;
+	min: number;
+	max: number;
+	onCommit: ( value: number ) => void;
+}
+
+// Shows a live draft while the user types, then snaps to the committed
+// (enforced) value on blur or Enter — canvas updates in real-time without
+// the input jumping to a constrained value on each keystroke.
+function CropInput( {
+	label,
+	'aria-label': ariaLabel,
+	value,
+	min,
+	max,
+	onCommit,
+}: CropInputProps ) {
+	const [ focused, setFocused ] = useState( false );
+	const [ draft, setDraft ] = useState( '' );
+
+	const handleFocus = () => {
+		setFocused( true );
+		setDraft( String( value ) );
+	};
+
+	const handleChange = ( v: string | undefined ) => {
+		setDraft( v ?? '' );
+		const parsed = parseInt( v ?? '', 10 );
+		if ( ! isNaN( parsed ) ) {
+			onCommit( Math.max( min, Math.min( parsed, max ) ) );
+		}
+	};
+
+	const commit = () => {
+		const parsed = parseInt( draft, 10 );
+		if ( ! isNaN( parsed ) ) {
+			onCommit( Math.max( min, Math.min( parsed, max ) ) );
+		}
+	};
+
+	const handleBlur = () => {
+		setFocused( false );
+		commit();
+	};
+
+	const handleKeyDown = (
+		event: React.KeyboardEvent< HTMLInputElement >
+	) => {
+		if ( event.key === 'Enter' ) {
+			setFocused( false );
+			commit();
+			event.currentTarget.blur();
+		} else if ( event.key === 'Escape' ) {
+			setFocused( false );
+			event.currentTarget.blur();
+		}
+	};
+
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ label }
+			aria-label={ ariaLabel }
+			value={ focused ? draft : String( value ) }
+			min={ min }
+			max={ max }
+			step={ 1 }
+			onChange={ handleChange }
+			onFocus={ handleFocus }
+			onBlur={ handleBlur }
+			onKeyDown={ handleKeyDown }
+			suffix={ pxSuffix }
+		/>
+	);
+}
+
+export default function CropAdvancedPanel( {
+	aspectRatio,
+	onPlacementControlInteraction,
+}: CropAdvancedPanelProps ) {
+	const { state, setCropRect } = useCropper();
+
+	const pixels = useMemo( () => {
+		if ( ! state.image ) {
+			return null;
+		}
+		const imageSize = {
+			width: state.image.naturalWidth,
+			height: state.image.naturalHeight,
+		};
+		const raw = getCropPixels( state, imageSize );
+		const reach = getReachableCropBoundsInPixels( state, imageSize );
+		return {
+			x: Math.round( raw.x ),
+			y: Math.round( raw.y ),
+			width: Math.round( raw.width ),
+			height: Math.round( raw.height ),
+			minLeft: Math.max( 0, Math.floor( reach.minLeft - 0.5 ) ),
+			minTop: Math.max( 0, Math.floor( reach.minTop - 0.5 ) ),
+			maxRight: Math.floor( reach.maxRight ),
+			maxBottom: Math.floor( reach.maxBottom ),
+		};
+	}, [ state ] );
+
+	if ( ! pixels ) {
+		return null;
+	}
+
+	const { minLeft, minTop, maxRight, maxBottom } = pixels;
+
+	const handleApply =
+		( field: 'x' | 'y' | 'width' | 'height' ) => ( clamped: number ) => {
+			if ( ! state.image ) {
+				return;
+			}
+			const imageSize = {
+				width: state.image.naturalWidth,
+				height: state.image.naturalHeight,
+			};
+
+			// When an aspect ratio is locked, derive the paired dimension so
+			// both stay consistent. enforceContainment will clamp the result
+			// if it falls outside the valid crop bounds.
+			let newWidth = field === 'width' ? clamped : pixels.width;
+			let newHeight = field === 'height' ? clamped : pixels.height;
+			if ( aspectRatio && aspectRatio > 0 ) {
+				if ( field === 'width' ) {
+					newHeight = Math.max(
+						1,
+						Math.round( clamped / aspectRatio )
+					);
+				} else if ( field === 'height' ) {
+					newWidth = Math.max(
+						1,
+						Math.round( clamped * aspectRatio )
+					);
+				}
+			}
+
+			setCropRect(
+				pixelsToCropRect(
+					{
+						x: field === 'x' ? clamped : pixels.x,
+						y: field === 'y' ? clamped : pixels.y,
+						width: newWidth,
+						height: newHeight,
+					},
+					state,
+					imageSize
+				)
+			);
+			onPlacementControlInteraction?.();
+		};
+
+	return (
+		<PanelBody
+			title={ __( 'Advanced' ) }
+			initialOpen={ false }
+			className="media-editor-crop-advanced-panel"
+		>
+			<Stack direction="column" gap="sm">
+				<Flex gap={ 2 } align="flex-start">
+					<FlexItem isBlock>
+						<CropInput
+							label={ __( 'Left' ) }
+							aria-label={ __( 'Crop left position' ) }
+							value={ pixels.x }
+							min={ minLeft }
+							max={ Math.max( minLeft, maxRight - pixels.width ) }
+							onCommit={ handleApply( 'x' ) }
+						/>
+					</FlexItem>
+					<FlexItem isBlock>
+						<CropInput
+							label={ __( 'Top' ) }
+							aria-label={ __( 'Crop top position' ) }
+							value={ pixels.y }
+							min={ minTop }
+							max={ Math.max(
+								minTop,
+								maxBottom - pixels.height
+							) }
+							onCommit={ handleApply( 'y' ) }
+						/>
+					</FlexItem>
+				</Flex>
+				<Flex gap={ 2 } align="flex-start">
+					<FlexItem isBlock>
+						<CropInput
+							label={ __( 'Width' ) }
+							value={ pixels.width }
+							min={ 1 }
+							max={ Math.max( 1, maxRight - pixels.x ) }
+							onCommit={ handleApply( 'width' ) }
+						/>
+					</FlexItem>
+					<FlexItem isBlock>
+						<CropInput
+							label={ __( 'Height' ) }
+							value={ pixels.height }
+							min={ 1 }
+							max={ Math.max( 1, maxBottom - pixels.y ) }
+							onCommit={ handleApply( 'height' ) }
+						/>
+					</FlexItem>
+				</Flex>
+			</Stack>
+		</PanelBody>
+	);
+}

packages/media-editor/src/components/media-editor-crop-panel/index.tsx

@@ -20,6 +20,7 @@ import {
 	ORIGINAL_ASPECT_RATIO,
 } from '../../image-editor/core/constants';
 import type { AspectRatioPreset } from '../../image-editor/core/constants';
+import CropAdvancedPanel from './crop-advanced-panel';
 
 export interface MediaEditorCropPanelProps {
 	/**
@@ -89,6 +90,15 @@ export default function MediaEditorCropPanel( {
 	aspectRatioPresets,
 }: MediaEditorCropPanelProps ) {
 	const { state, setZoom } = useCropper();
+
+	const imageAspectRatio = state.image
+		? state.image.naturalWidth / state.image.naturalHeight
+		: null;
+	const resolvedAspectRatio = resolveAspectRatio(
+		aspectRatioValue,
+		imageAspectRatio
+	);
+
 	const aspectRatioOptions = [
 		...DEFAULT_ASPECT_RATIOS.filter( ( preset ) => preset.value <= 0 ),
 		...( aspectRatioPresets ??
@@ -138,6 +148,10 @@ export default function MediaEditorCropPanel( {
 				checked={ freeformCrop }
 				onChange={ onFreeformChange }
 			/>
+			<CropAdvancedPanel
+				aspectRatio={ resolvedAspectRatio }
+				onPlacementControlInteraction={ onPlacementControlInteraction }
+			/>
 		</Stack>
 	);
 }

packages/media-editor/src/components/media-editor-modal/build-modifiers.ts

@@ -3,6 +3,7 @@
  */
 import type { CropperState, Size } from '../../image-editor';
 import { getRotatedBBox } from '../../image-editor/core/camera';
+import { getCropPixels } from '../../utils/crop-pixels';
 
 /**
  * A single modifier in the Core REST `/edit` payload. Order is
@@ -88,7 +89,7 @@ export function buildModifiers(
 		return modifiers;
 	}
 
-	const { cropRect, pan, zoom, flip } = state;
+	const { flip } = state;
 	const hasFlipH = flip.horizontal;
 	const hasFlipV = flip.vertical;
 
@@ -108,28 +109,24 @@ export function buildModifiers(
 		modifiers.push( { type: 'rotate', args: { angle: signedAngle } } );
 	}
 
-	const snapRotation = Math.round( state.rotation / 90 ) * 90;
-	const { width: snapW, height: snapH } = getRotatedBBox(
-		imageSize.width,
-		imageSize.height,
-		snapRotation
-	);
+	// Stencil rect in snap-AABB pixels. Inverts `createExportCamera`'s
+	// pan/zoom composition to recover the pixel rectangle the stencil
+	// framed in that frame.
+	const {
+		x: snapX,
+		y: snapY,
+		width: widthPx,
+		height: heightPx,
+		snapBBoxWidth: snapW,
+		snapBBoxHeight: snapH,
+	} = getCropPixels( state, imageSize );
+
 	const { width: fullW, height: fullH } = getRotatedBBox(
 		imageSize.width,
 		imageSize.height,
 		state.rotation
 	);
 
-	// Stencil rect in snap-AABB pixels. Inverts `createExportCamera`'s
-	// pan/zoom composition to recover the pixel rectangle the stencil
-	// framed in that frame.
-	const imgLeft = 0.5 + pan.x - zoom / 2;
-	const imgTop = 0.5 + pan.y - zoom / 2;
-	const snapX = ( ( cropRect.x - imgLeft ) / zoom ) * snapW;
-	const snapY = ( ( cropRect.y - imgTop ) / zoom ) * snapH;
-	const widthPx = ( cropRect.width / zoom ) * snapW;
-	const heightPx = ( cropRect.height / zoom ) * snapH;
-
 	// Translate to the full AABB (both centered on source).
 	const offsetX = ( fullW - snapW ) / 2;
 	const offsetY = ( fullH - snapH ) / 2;

packages/media-editor/src/components/media-editor-modal/style.scss

@@ -113,6 +113,28 @@
 	}
 }
 
+// The Advanced panel is a PanelBody nested inside the already-padded
+// `.media-editor-modal__panel`. Pull it flush to the panel edges so the
+// toggle button spans the full width (matching the block inspector's
+// treatment of PanelBody headers), then re-apply horizontal padding inside
+// the content area only.
+.media-editor-crop-advanced-panel.components-panel__body {
+	margin-left: -$grid-unit-20;
+	margin-right: -$grid-unit-20;
+
+	.components-panel__body-title {
+		button.components-panel__body-toggle {
+			padding-left: $grid-unit-20;
+			padding-right: $grid-unit-20;
+		}
+	}
+
+	.components-panel__body-content {
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
+	}
+}
+
 // `<SnackbarNotices>` renders `.components-snackbar-list` with
 // `position: absolute; width: 100%`. Portaled to `<body>` it has no
 // positioned ancestor, so it collapses to a 0-size box at the document