@wordpress/block-editor 7.0.2 → 8.0.1

package/src/components/image-editor/aspect-ratio-dropdown.js

@@ -0,0 +1,129 @@
+/**
+ * WordPress dependencies
+ */
+import { check, aspectRatio as aspectRatioIcon } from '@wordpress/icons';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { POPOVER_PROPS } from './constants';
+import { useImageEditingContext } from './context';
+
+function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
+	return (
+		<MenuGroup label={ label }>
+			{ aspectRatios.map( ( { title, aspect } ) => (
+				<MenuItem
+					key={ aspect }
+					disabled={ isDisabled }
+					onClick={ () => {
+						onClick( aspect );
+					} }
+					role="menuitemradio"
+					isSelected={ aspect === value }
+					icon={ aspect === value ? check : undefined }
+				>
+					{ title }
+				</MenuItem>
+			) ) }
+		</MenuGroup>
+	);
+}
+
+export default function AspectRatioDropdown( { toggleProps } ) {
+	const {
+		isInProgress,
+		aspect,
+		setAspect,
+		defaultAspect,
+	} = useImageEditingContext();
+
+	return (
+		<DropdownMenu
+			icon={ aspectRatioIcon }
+			label={ __( 'Aspect Ratio' ) }
+			popoverProps={ POPOVER_PROPS }
+			toggleProps={ toggleProps }
+			className="wp-block-image__aspect-ratio"
+		>
+			{ ( { onClose } ) => (
+				<>
+					<AspectGroup
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( 'Original' ),
+								aspect: defaultAspect,
+							},
+							{
+								title: __( 'Square' ),
+								aspect: 1,
+							},
+						] }
+					/>
+					<AspectGroup
+						label={ __( 'Landscape' ) }
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( '16:10' ),
+								aspect: 16 / 10,
+							},
+							{
+								title: __( '16:9' ),
+								aspect: 16 / 9,
+							},
+							{
+								title: __( '4:3' ),
+								aspect: 4 / 3,
+							},
+							{
+								title: __( '3:2' ),
+								aspect: 3 / 2,
+							},
+						] }
+					/>
+					<AspectGroup
+						label={ __( 'Portrait' ) }
+						isDisabled={ isInProgress }
+						onClick={ ( newAspect ) => {
+							setAspect( newAspect );
+							onClose();
+						} }
+						value={ aspect }
+						aspectRatios={ [
+							{
+								title: __( '10:16' ),
+								aspect: 10 / 16,
+							},
+							{
+								title: __( '9:16' ),
+								aspect: 9 / 16,
+							},
+							{
+								title: __( '3:4' ),
+								aspect: 3 / 4,
+							},
+							{
+								title: __( '2:3' ),
+								aspect: 2 / 3,
+							},
+						] }
+					/>
+				</>
+			) }
+		</DropdownMenu>
+	);
+}

package/src/components/image-editor/constants.js

@@ -0,0 +1,6 @@
+export const MIN_ZOOM = 100;
+export const MAX_ZOOM = 300;
+export const POPOVER_PROPS = {
+	position: 'bottom right',
+	isAlternate: true,
+};

package/src/components/image-editor/context.js

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useSaveImage from './use-save-image';
+import useTransformImage from './use-transform-image';
+
+const ImageEditingContext = createContext( {} );
+
+export const useImageEditingContext = () => useContext( ImageEditingContext );
+
+export default function ImageEditingProvider( {
+	id,
+	url,
+	naturalWidth,
+	naturalHeight,
+	isEditing,
+	onFinishEditing,
+	onSaveImage,
+	children,
+} ) {
+	const transformImage = useTransformImage(
+		{
+			url,
+			naturalWidth,
+			naturalHeight,
+		},
+		isEditing
+	);
+
+	const saveImage = useSaveImage( {
+		id,
+		url,
+		onSaveImage,
+		onFinishEditing,
+		...transformImage,
+	} );
+
+	const providerValue = useMemo(
+		() => ( {
+			...transformImage,
+			...saveImage,
+		} ),
+		[ transformImage, saveImage ]
+	);
+
+	return (
+		<ImageEditingContext.Provider value={ providerValue }>
+			{ children }
+		</ImageEditingContext.Provider>
+	);
+}

package/src/components/image-editor/cropper.js

@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import Cropper from 'react-easy-crop';
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { MIN_ZOOM, MAX_ZOOM } from './constants';
+
+import { useImageEditingContext } from './context';
+
+export default function ImageCropper( {
+	url,
+	width,
+	height,
+	clientWidth,
+	naturalHeight,
+	naturalWidth,
+} ) {
+	const {
+		isInProgress,
+		editedUrl,
+		position,
+		zoom,
+		aspect,
+		setPosition,
+		setCrop,
+		setZoom,
+		rotation,
+	} = useImageEditingContext();
+
+	let editedHeight = height || ( clientWidth * naturalHeight ) / naturalWidth;
+
+	if ( rotation % 180 === 90 ) {
+		editedHeight = ( clientWidth * naturalWidth ) / naturalHeight;
+	}
+
+	return (
+		<div
+			className={ classnames( 'wp-block-image__crop-area', {
+				'is-applying': isInProgress,
+			} ) }
+			style={ {
+				width: width || clientWidth,
+				height: editedHeight,
+			} }
+		>
+			<Cropper
+				image={ editedUrl || url }
+				disabled={ isInProgress }
+				minZoom={ MIN_ZOOM / 100 }
+				maxZoom={ MAX_ZOOM / 100 }
+				crop={ position }
+				zoom={ zoom / 100 }
+				aspect={ aspect }
+				onCropChange={ setPosition }
+				onCropComplete={ ( newCropPercent ) => {
+					setCrop( newCropPercent );
+				} }
+				onZoomChange={ ( newZoom ) => {
+					setZoom( newZoom * 100 );
+				} }
+			/>
+			{ isInProgress && <Spinner /> }
+		</div>
+	);
+}

package/src/components/image-editor/form-controls.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useImageEditingContext } from './context';
+
+export default function FormControls() {
+	const { isInProgress, apply, cancel } = useImageEditingContext();
+	return (
+		<>
+			<ToolbarButton onClick={ apply } disabled={ isInProgress }>
+				{ __( 'Apply' ) }
+			</ToolbarButton>
+			<ToolbarButton onClick={ cancel }>{ __( 'Cancel' ) }</ToolbarButton>
+		</>
+	);
+}

package/src/components/image-editor/index.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import Cropper from './cropper';
+import ZoomDropdown from './zoom-dropdown';
+import AspectRatioDropdown from './aspect-ratio-dropdown';
+import RotationButton from './rotation-button';
+import FormControls from './form-controls';
+
+export default function ImageEditor( {
+	url,
+	width,
+	height,
+	clientWidth,
+	naturalHeight,
+	naturalWidth,
+} ) {
+	return (
+		<>
+			<Cropper
+				url={ url }
+				width={ width }
+				height={ height }
+				clientWidth={ clientWidth }
+				naturalHeight={ naturalHeight }
+				naturalWidth={ naturalWidth }
+			/>
+			<BlockControls>
+				<ToolbarGroup>
+					<ZoomDropdown />
+					<ToolbarItem>
+						{ ( toggleProps ) => (
+							<AspectRatioDropdown toggleProps={ toggleProps } />
+						) }
+					</ToolbarItem>
+					<RotationButton />
+				</ToolbarGroup>
+				<ToolbarGroup>
+					<FormControls />
+				</ToolbarGroup>
+			</BlockControls>
+		</>
+	);
+}
+
+export { default as ImageEditingProvider } from './context';

package/src/components/image-editor/rotation-button.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+
+import { ToolbarButton } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { rotateRight as rotateRightIcon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { useImageEditingContext } from './context';
+
+export default function RotationButton() {
+	const { isInProgress, rotateClockwise } = useImageEditingContext();
+	return (
+		<ToolbarButton
+			icon={ rotateRightIcon }
+			label={ __( 'Rotate' ) }
+			onClick={ rotateClockwise }
+			disabled={ isInProgress }
+		/>
+	);
+}

package/src/components/image-editor/use-save-image.js

@@ -0,0 +1,97 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useDispatch } from '@wordpress/data';
+import { useCallback, useMemo, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function useSaveImage( {
+	crop,
+	rotation,
+	height,
+	width,
+	aspect,
+	url,
+	id,
+	onSaveImage,
+	onFinishEditing,
+} ) {
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const [ isInProgress, setIsInProgress ] = useState( false );
+
+	const cancel = useCallback( () => {
+		setIsInProgress( false );
+		onFinishEditing();
+	}, [ setIsInProgress, onFinishEditing ] );
+
+	const apply = useCallback( () => {
+		setIsInProgress( true );
+
+		let attrs = {};
+
+		// The crop script may return some very small, sub-pixel values when the image was not cropped.
+		// Crop only when the new size has changed by more than 0.1%.
+		if ( crop.width < 99.9 || crop.height < 99.9 ) {
+			attrs = crop;
+		}
+
+		if ( rotation > 0 ) {
+			attrs.rotation = rotation;
+		}
+
+		attrs.src = url;
+
+		apiFetch( {
+			path: `/wp/v2/media/${ id }/edit`,
+			method: 'POST',
+			data: attrs,
+		} )
+			.then( ( response ) => {
+				onSaveImage( {
+					id: response.id,
+					url: response.source_url,
+					height: height && width ? width / aspect : undefined,
+				} );
+			} )
+			.catch( ( error ) => {
+				createErrorNotice(
+					sprintf(
+						/* translators: 1. Error message */
+						__( 'Could not edit image. %s' ),
+						error.message
+					),
+					{
+						id: 'image-editing-error',
+						type: 'snackbar',
+					}
+				);
+			} )
+			.finally( () => {
+				setIsInProgress( false );
+				onFinishEditing();
+			} );
+	}, [
+		setIsInProgress,
+		crop,
+		rotation,
+		height,
+		width,
+		aspect,
+		url,
+		onSaveImage,
+		createErrorNotice,
+		setIsInProgress,
+		onFinishEditing,
+	] );
+
+	return useMemo(
+		() => ( {
+			isInProgress,
+			apply,
+			cancel,
+		} ),
+		[ isInProgress, apply, cancel ]
+	);
+}

package/src/components/image-editor/use-transform-image.js

@@ -0,0 +1,162 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useEffect, useMemo, useState } from '@wordpress/element';
+import { applyFilters } from '@wordpress/hooks';
+
+function useTransformState( { url, naturalWidth, naturalHeight } ) {
+	const [ editedUrl, setEditedUrl ] = useState();
+	const [ crop, setCrop ] = useState();
+	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
+	const [ zoom, setZoom ] = useState();
+	const [ rotation, setRotation ] = useState();
+	const [ aspect, setAspect ] = useState();
+	const [ defaultAspect, setDefaultAspect ] = useState();
+
+	const initializeTransformValues = useCallback( () => {
+		setPosition( { x: 0, y: 0 } );
+		setZoom( 100 );
+		setRotation( 0 );
+		setAspect( naturalWidth / naturalHeight );
+		setDefaultAspect( naturalWidth / naturalHeight );
+	}, [
+		naturalWidth,
+		naturalHeight,
+		setPosition,
+		setZoom,
+		setRotation,
+		setAspect,
+		setDefaultAspect,
+	] );
+
+	const rotateClockwise = useCallback( () => {
+		const angle = ( rotation + 90 ) % 360;
+
+		let naturalAspectRatio = naturalWidth / naturalHeight;
+
+		if ( rotation % 180 === 90 ) {
+			naturalAspectRatio = naturalHeight / naturalWidth;
+		}
+
+		if ( angle === 0 ) {
+			setEditedUrl();
+			setRotation( angle );
+			setAspect( 1 / aspect );
+			setPosition( {
+				x: -( position.y * naturalAspectRatio ),
+				y: position.x * naturalAspectRatio,
+			} );
+			return;
+		}
+
+		function editImage( event ) {
+			const canvas = document.createElement( 'canvas' );
+
+			let translateX = 0;
+			let translateY = 0;
+
+			if ( angle % 180 ) {
+				canvas.width = event.target.height;
+				canvas.height = event.target.width;
+			} else {
+				canvas.width = event.target.width;
+				canvas.height = event.target.height;
+			}
+
+			if ( angle === 90 || angle === 180 ) {
+				translateX = canvas.width;
+			}
+
+			if ( angle === 270 || angle === 180 ) {
+				translateY = canvas.height;
+			}
+
+			const context = canvas.getContext( '2d' );
+
+			context.translate( translateX, translateY );
+			context.rotate( ( angle * Math.PI ) / 180 );
+			context.drawImage( event.target, 0, 0 );
+
+			canvas.toBlob( ( blob ) => {
+				setEditedUrl( URL.createObjectURL( blob ) );
+				setRotation( angle );
+				setAspect( 1 / aspect );
+				setPosition( {
+					x: -( position.y * naturalAspectRatio ),
+					y: position.x * naturalAspectRatio,
+				} );
+			} );
+		}
+
+		const el = new window.Image();
+		el.src = url;
+		el.onload = editImage;
+
+		const imgCrossOrigin = applyFilters(
+			'media.crossOrigin',
+			undefined,
+			url
+		);
+		if ( typeof imgCrossOrigin === 'string' ) {
+			el.crossOrigin = imgCrossOrigin;
+		}
+	}, [
+		rotation,
+		naturalWidth,
+		naturalHeight,
+		setEditedUrl,
+		setRotation,
+		setAspect,
+		setPosition,
+	] );
+
+	return useMemo(
+		() => ( {
+			editedUrl,
+			setEditedUrl,
+			crop,
+			setCrop,
+			position,
+			setPosition,
+			zoom,
+			setZoom,
+			rotation,
+			setRotation,
+			rotateClockwise,
+			aspect,
+			setAspect,
+			defaultAspect,
+			initializeTransformValues,
+		} ),
+		[
+			editedUrl,
+			setEditedUrl,
+			crop,
+			setCrop,
+			position,
+			setPosition,
+			zoom,
+			setZoom,
+			rotation,
+			setRotation,
+			rotateClockwise,
+			aspect,
+			setAspect,
+			defaultAspect,
+			initializeTransformValues,
+		]
+	);
+}
+
+export default function useTransformImage( imageProperties, isEditing ) {
+	const transformState = useTransformState( imageProperties );
+	const { initializeTransformValues } = transformState;
+
+	useEffect( () => {
+		if ( isEditing ) {
+			initializeTransformValues();
+		}
+	}, [ isEditing, initializeTransformValues ] );
+
+	return transformState;
+}

package/src/components/image-editor/zoom-dropdown.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, RangeControl, Dropdown } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { search } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { MIN_ZOOM, MAX_ZOOM, POPOVER_PROPS } from './constants';
+import { useImageEditingContext } from './context';
+
+export default function ZoomDropdown() {
+	const { isInProgress, zoom, setZoom } = useImageEditingContext();
+	return (
+		<Dropdown
+			contentClassName="wp-block-image__zoom"
+			popoverProps={ POPOVER_PROPS }
+			renderToggle={ ( { isOpen, onToggle } ) => (
+				<ToolbarButton
+					icon={ search }
+					label={ __( 'Zoom' ) }
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+					disabled={ isInProgress }
+				/>
+			) }
+			renderContent={ () => (
+				<RangeControl
+					label={ __( 'Zoom' ) }
+					min={ MIN_ZOOM }
+					max={ MAX_ZOOM }
+					value={ Math.round( zoom ) }
+					onChange={ setZoom }
+				/>
+			) }
+		/>
+	);
+}

package/src/components/image-size-control/use-dimension-handler.js

@@ -3,7 +3,7 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 
-export default function useDimensionHander(
+export default function useDimensionHandler(
 	customHeight,
 	customWidth,
 	defaultHeight,
@@ -29,6 +29,23 @@ export default function useDimensionHander(
 		}
 	}, [ defaultWidth, defaultHeight ] );
 
+	// If custom values change, it means an outsider has resized the image using some other method (eg resize box)
+	// this keeps track of these values too. We need to parse before comparing; custom values can be strings.
+	useEffect( () => {
+		if (
+			customWidth !== undefined &&
+			Number.parseInt( customWidth ) !== Number.parseInt( currentWidth )
+		) {
+			setCurrentWidth( customWidth );
+		}
+		if (
+			customHeight !== undefined &&
+			Number.parseInt( customHeight ) !== Number.parseInt( currentHeight )
+		) {
+			setCurrentHeight( customHeight );
+		}
+	}, [ customWidth, customHeight ] );
+
 	const updateDimension = ( dimension, value ) => {
 		if ( dimension === 'width' ) {
 			setCurrentWidth( value );