@wordpress/block-editor 7.0.1 → 8.0.0

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 );

package/src/components/index.js

@@ -45,15 +45,20 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
+export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
+export {
+	default as __experimentalImageEditor,
+	ImageEditingProvider as __experimentalImageEditingProvider,
+} from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
-export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
-export { default as InspectorControls } from './inspector-controls';
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from './inspector-controls';
 export {
 	JustifyToolbar,
 	JustifyContentControl,
@@ -64,8 +69,6 @@ export { default as __experimentalLinkControlSearchResults } from './link-contro
 export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
 export { default as LineHeightControl } from './line-height-control';
 export { default as __experimentalListView } from './list-view';
-export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
-export { default as __experimentalListViewEditor } from './list-view/editor';
 export { default as MediaReplaceFlow } from './media-replace-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
@@ -144,5 +147,4 @@ export { default as __experimentalUseNoRecursiveRenders } from './use-no-recursi
  */
 
 export { default as BlockEditorProvider } from './provider';
-export { default as __experimentalUseSimulatedMediaQuery } from './use-simulated-media-query';
 export { default as useSetting } from './use-setting';

package/src/components/index.native.js

@@ -18,9 +18,11 @@ export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
-export { default as InnerBlocks } from './inner-blocks';
-export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
-export { default as InspectorControls } from './inspector-controls';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
+export {
+	default as InspectorControls,
+	InspectorAdvancedControls,
+} from './inspector-controls';
 export {
 	JustifyToolbar,
 	JustifyContentControl,

package/src/components/inner-blocks/button-block-appender.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -9,9 +14,13 @@ export const ButtonBlockAppender = ( {
 	showSeparator,
 	isFloating,
 	onAddBlock,
+	isToggle,
 } ) => {
 	return (
 		<BaseButtonBlockAppender
+			className={ classnames( {
+				'block-list-appender__toggle': isToggle,
+			} ) }
 			rootClientId={ clientId }
 			showSeparator={ showSeparator }
 			isFloating={ isFloating }