@wordpress/block-library 5.0.1 → 6.0.1

package/src/image/image-editing/cropper.js

@@ -1,74 +0,0 @@
-/**
- * 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/image/image-editing/form-controls.js

@@ -1,22 +0,0 @@
-/**
- * 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/image/image-editing/index.js

@@ -1,52 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { BlockControls } from '@wordpress/block-editor';
-import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-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/image/image-editing/rotation-button.js

@@ -1,24 +0,0 @@
-/**
- * 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/image/image-editing/use-save-image.js

@@ -1,97 +0,0 @@
-/**
- * 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/image/image-editing/use-transform-image.js

@@ -1,162 +0,0 @@
-/**
- * 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/image/image-editing/zoom-dropdown.js

@@ -1,40 +0,0 @@
-/**
- * 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/post-content/editor.scss

@@ -1,11 +0,0 @@
-.wp-block-post-content__placeholder {
-	height: 100px;
-	border: 1px dashed;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	span {
-		font-style: italic;
-	}
-}