[Experiment] Add freeform image cropper component

lib/experimental/editor-settings.php

@@ -37,6 +37,9 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-image-cropper', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalImageCropper = true', 'before' );
+	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

lib/experiments-page.php

@@ -187,6 +187,18 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
+	add_settings_field(
+		'gutenberg-image-cropper',
+		__( 'Redesigned image cropper', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable a redesigned version of the image cropper in the block editor.', 'gutenberg' ),
+			'id'    => 'gutenberg-image-cropper',
+		)
+	);
+
 	register_setting(
 		'gutenberg-experiments',
 		'gutenberg-experiments'

packages/block-editor/src/components/image-editor/v2/aspect-ratio-dropdown.js

@@ -0,0 +1,162 @@
+/**
+ * WordPress dependencies
+ */
+import { check, aspectRatio as aspectRatioIcon } from '@wordpress/icons';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useSettings } from '../../use-settings';
+import { useImageCropper } from './context';
+
+function AspectRatioGroup( { aspectRatios, label, onClick, value } ) {
+	return (
+		<MenuGroup label={ label }>
+			{ aspectRatios.map( ( { name, slug, ratio } ) => (
+				<MenuItem
+					key={ slug }
+					onClick={ () => {
+						onClick( ratio );
+					} }
+					role="menuitemradio"
+					isSelected={ ratio.toFixed( 4 ) === value.toFixed( 4 ) }
+					icon={ ratio === value ? check : undefined }
+				>
+					{ name }
+				</MenuItem>
+			) ) }
+		</MenuGroup>
+	);
+}
+
+export function ratioToNumber( str ) {
+	// TODO: support two-value aspect ratio?
+	// https://css-tricks.com/almanac/properties/a/aspect-ratio/#aa-it-can-take-two-values
+	const [ a, b, ...rest ] = str.split( '/' ).map( Number );
+	if (
+		a <= 0 ||
+		b <= 0 ||
+		Number.isNaN( a ) ||
+		Number.isNaN( b ) ||
+		rest.length
+	) {
+		return NaN;
+	}
+	return b ? a / b : a;
+}
+
+function presetRatioAsNumber( { ratio, ...rest } ) {
+	return {
+		ratio: ratioToNumber( ratio ),
+		...rest,
+	};
+}
+
+export default function AspectRatioDropdown( { toggleProps } ) {
+	const {
+		state: { image, cropper, isAspectRatioLocked },
+		dispatch,
+	} = useImageCropper();
+	const defaultAspect = image.width / image.height;
+	const aspectRatio = cropper.width / cropper.height;
+
+	const [ defaultRatios, themeRatios, showDefaultRatios ] = useSettings(
+		'dimensions.aspectRatios.default',
+		'dimensions.aspectRatios.theme',
+		'dimensions.defaultAspectRatios'
+	);
+
+	return (
+		<DropdownMenu
+			icon={ aspectRatioIcon }
+			label={ __( 'Aspect Ratio' ) }
+			popoverProps={ { placement: 'bottom-start' } }
+			toggleProps={ toggleProps }
+		>
+			{ ( { onClose } ) => (
+				<>
+					<AspectRatioGroup
+						onClick={ ( newAspect ) => {
+							if ( newAspect === 0 ) {
+								dispatch( { type: 'UNLOCK_ASPECT_RATIO' } );
+							} else {
+								dispatch( {
+									type: 'LOCK_ASPECT_RATIO',
+									aspectRatio: newAspect,
+								} );
+							}
+							onClose();
+						} }
+						value={ isAspectRatioLocked ? aspectRatio : 0 }
+						aspectRatios={ [
+							// All ratios should be mirrored in AspectRatioTool in @wordpress/block-editor.
+							{
+								slug: 'free',
+								name: __( 'Free' ),
+								ratio: 0,
+							},
+							{
+								slug: 'original',
+								name: __( 'Original' ),
+								ratio: defaultAspect,
+							},
+							...( showDefaultRatios
+								? defaultRatios
+										.map( presetRatioAsNumber )
+										.filter( ( { ratio } ) => ratio === 1 )
+								: [] ),
+						] }
+					/>
+					{ themeRatios?.length > 0 && (
+						<AspectRatioGroup
+							label={ __( 'Theme' ) }
+							onClick={ ( newAspect ) => {
+								dispatch( {
+									type: 'LOCK_ASPECT_RATIO',
+									aspectRatio: newAspect,
+								} );
+								onClose();
+							} }
+							value={ aspectRatio }
+							aspectRatios={ themeRatios }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Landscape' ) }
+							onClick={ ( newAspect ) => {
+								dispatch( {
+									type: 'LOCK_ASPECT_RATIO',
+									aspectRatio: newAspect,
+								} );
+								onClose();
+							} }
+							value={ aspectRatio }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio > 1 ) }
+						/>
+					) }
+					{ showDefaultRatios && (
+						<AspectRatioGroup
+							label={ __( 'Portrait' ) }
+							onClick={ ( newAspect ) => {
+								dispatch( {
+									type: 'LOCK_ASPECT_RATIO',
+									aspectRatio: newAspect,
+								} );
+								onClose();
+							} }
+							value={ aspectRatio }
+							aspectRatios={ defaultRatios
+								.map( presetRatioAsNumber )
+								.filter( ( { ratio } ) => ratio < 1 ) }
+						/>
+					) }
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

packages/block-editor/src/components/image-editor/v2/context.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+
+const { ImageCropperContext } = unlock( componentsPrivateApis );
+
+export const useImageCropper = () => useContext( ImageCropperContext );

packages/block-editor/src/components/image-editor/v2/form-controls.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useImageCropper } from './context';
+
+export default function FormControls( { onCrop, onCancel } ) {
+	const { state, getImageBlob, dispatch } = useImageCropper();
+
+	async function apply() {
+		const blob = await getImageBlob( state );
+		onCrop?.( blob, state );
+	}
+
+	function cancel() {
+		dispatch( { type: 'RESET' } );
+		onCancel?.();
+	}
+
+	return (
+		<>
+			<ToolbarButton onClick={ apply }>{ __( 'Apply' ) }</ToolbarButton>
+			<ToolbarButton onClick={ cancel }>{ __( 'Cancel' ) }</ToolbarButton>
+		</>
+	);
+}

packages/block-editor/src/components/image-editor/v2/index.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ToolbarGroup,
+	ToolbarItem,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AspectRatioDropdown from './aspect-ratio-dropdown';
+import BlockControls from '../../block-controls';
+import RotationButton from './rotation-button';
+import FormControls from './form-controls';
+import { unlock } from '../../../lock-unlock';
+
+const { ImageCropper } = unlock( componentsPrivateApis );
+
+export default function ImageEditor( {
+	src,
+	width,
+	height,
+	onCrop,
+	onCancel,
+} ) {
+	return (
+		<ImageCropper.Provider src={ src } width={ width } height={ height }>
+			<ImageCropper />
+
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<AspectRatioDropdown toggleProps={ toggleProps } />
+						) }
+					</ToolbarItem>
+					<RotationButton />
+				</ToolbarGroup>
+				<ToolbarGroup>
+					<FormControls onCrop={ onCrop } onCancel={ onCancel } />
+				</ToolbarGroup>
+			</BlockControls>
+		</ImageCropper.Provider>
+	);
+}

packages/block-editor/src/components/image-editor/v2/rotation-button.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { rotateRight as rotateRightIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useImageCropper } from './context';
+
+export default function RotationButton() {
+	const { dispatch } = useImageCropper();
+
+	return (
+		<ToolbarButton
+			icon={ rotateRightIcon }
+			label={ __( 'Rotate' ) }
+			onClick={ () => {
+				dispatch( { type: 'ROTATE_90_DEG' } );
+			} }
+		/>
+	);
+}

packages/block-editor/src/private-apis.js

@@ -47,6 +47,7 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
+import ImageEditor from './components/image-editor/v2';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -92,4 +93,5 @@ lock( privateApis, {
 	useBlockDisplayTitle,
 	__unstableBlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
+	ImageEditor,
 } );

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

@@ -54,7 +54,11 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 import { evalAspectRatio } from './utils';
 
-const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
+const {
+	DimensionsTool,
+	ResolutionTool,
+	ImageEditor: ImageEditorV2,
+} = unlock( blockEditorPrivateApis );
 
 const scaleOptions = [
 	{
@@ -870,21 +874,43 @@ export default function Image( {
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageWrapper href={ href }>
-				<ImageEditor
-					id={ id }
-					url={ url }
-					width={ numericWidth }
-					height={ numericHeight }
-					naturalHeight={ naturalHeight }
-					naturalWidth={ naturalWidth }
-					onSaveImage={ ( imageAttributes ) =>
-						setAttributes( imageAttributes )
-					}
-					onFinishEditing={ () => {
-						setIsEditingImage( false );
-					} }
-					borderProps={ isRounded ? undefined : borderProps }
-				/>
+				{ window.__experimentalImageCropper ? (
+					<ImageEditorV2
+						src={ url }
+						width={ numericWidth }
+						height={ numericHeight }
+						onCrop={ ( imageBlob ) => {
+							getSettings().mediaUpload( {
+								filesList: [ imageBlob ],
+								onFileChange: ( [ media ] ) => {
+									onSelectImage( media );
+								},
+								allowedTypes: ALLOWED_MEDIA_TYPES,
+								onError: onUploadError,
+							} );
+							setIsEditingImage( false );
+						} }
+						onCancel={ () => {
+							setIsEditingImage( false );
+						} }
+					/>
+				) : (
+					<ImageEditor
+						id={ id }
+						url={ url }
+						width={ numericWidth }
+						height={ numericHeight }
+						naturalHeight={ naturalHeight }
+						naturalWidth={ naturalWidth }
+						onSaveImage={ ( imageAttributes ) =>
+							setAttributes( imageAttributes )
+						}
+						onFinishEditing={ () => {
+							setIsEditingImage( false );
+						} }
+						borderProps={ isRounded ? undefined : borderProps }
+					/>
+				) }
 			</ImageWrapper>
 		);
 	} else if ( ! isResizable || parentLayoutType === 'grid' ) {