@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

package/src/image/image-editing/aspect-ratio-dropdown.js

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

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

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

@@ -1,56 +0,0 @@
-/**
- * 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/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/navigation/block-navigation-list.js

@@ -1,29 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-export default function BlockNavigationList( {
-	clientId,
-	__experimentalFeatures,
-} ) {
-	const blocks = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__unstableGetClientIdsTree( clientId ),
-		[ clientId ]
-	);
-
-	return (
-		<ListView
-			blocks={ blocks }
-			showAppender
-			showBlockMovers
-			showNestedBlocks
-			__experimentalFeatures={ __experimentalFeatures }
-		/>
-	);
-}