@wordpress/block-editor 7.0.1-next.5df0cd52b7.0 → 7.0.4

package/src/components/font-sizes/index.native.js

@@ -1 +1,7 @@
-export { getFontSize, getFontSizeClass } from './utils';
+export {
+	getFontSize,
+	getFontSizeClass,
+	getFontSizeObjectByValue,
+} from './utils';
+export { default as FontSizePicker } from './font-size-picker';
+export { default as withFontSizes } from './with-font-sizes';

package/src/components/iframe/index.js

@@ -1,17 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	useState,
 	createPortal,
-	useCallback,
 	forwardRef,
 	useEffect,
 	useMemo,
 	useReducer,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 
 /**
@@ -130,39 +134,13 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'keydown', 'keypress', 'dragover' ];
+	const eventTypes = [ 'dragover' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );
 	}
 }
 
-/**
- * Sets the document direction.
- *
- * Sets the `editor-styles-wrapper` class name on the body.
- *
- * Copies the `admin-color-*` class name to the body so that the admin color
- * scheme applies to components in the iframe.
- *
- * @param {Document} doc Document to add class name to.
- */
-function setBodyClassName( doc ) {
-	doc.dir = document.dir;
-	doc.body.className = BODY_CLASS_NAME;
-
-	for ( const name of document.body.classList ) {
-		if ( name.startsWith( 'admin-color-' ) ) {
-			doc.body.classList.add( name );
-		} else if ( name === 'wp-embed-responsive' ) {
-			// Ideally ALL classes that are added through get_body_class should
-			// be added in the editor too, which we'll somehow have to get from
-			// the server in the future (which will run the PHP filters).
-			doc.body.classList.add( 'wp-embed-responsive' );
-		}
-	}
-}
-
 function useParsedAssets( html ) {
 	return useMemo( () => {
 		const doc = document.implementation.createHTMLDocument( '' );
@@ -171,9 +149,9 @@ function useParsedAssets( html ) {
 	}, [ html ] );
 }
 
-async function loadScript( doc, { id, src } ) {
+async function loadScript( head, { id, src } ) {
 	return new Promise( ( resolve, reject ) => {
-		const script = doc.createElement( 'script' );
+		const script = head.ownerDocument.createElement( 'script' );
 		script.id = id;
 		if ( src ) {
 			script.src = src;
@@ -182,57 +160,45 @@ async function loadScript( doc, { id, src } ) {
 		} else {
 			resolve();
 		}
-		doc.head.appendChild( script );
+		head.appendChild( script );
 	} );
 }
 
-function Iframe( { contentRef, children, head, ...props }, ref ) {
+function Iframe( { contentRef, children, head, tabIndex = 0, ...props }, ref ) {
 	const [ , forceRender ] = useReducer( () => ( {} ) );
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const styles = useParsedAssets( window.__editorAssets.styles );
-	const scripts = useParsedAssets( window.__editorAssets.scripts );
+	const [ bodyClasses, setBodyClasses ] = useState( [] );
+	const styles = useParsedAssets( window.__editorAssets?.styles );
+	const scripts = useParsedAssets( window.__editorAssets?.scripts );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
-	const setRef = useCallback( ( node ) => {
-		if ( ! node ) {
-			return;
-		}
-
+	const setRef = useRefEffect( ( node ) => {
 		function setDocumentIfReady() {
-			const { contentDocument } = node;
-			const { readyState, body, documentElement } = contentDocument;
+			const { contentDocument, ownerDocument } = node;
+			const { readyState, documentElement } = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
 			}
 
-			if ( typeof contentRef === 'function' ) {
-				contentRef( body );
-			} else if ( contentRef ) {
-				contentRef.current = body;
-			}
-
-			setBodyClassName( contentDocument );
 			bubbleEvents( contentDocument );
-			setBodyClassName( contentDocument );
 			setIframeDocument( contentDocument );
 			clearerRef( documentElement );
-			clearerRef( body );
-			writingFlowRef( body );
-
-			scripts
-				.reduce(
-					( promise, script ) =>
-						promise.then( () =>
-							loadScript( contentDocument, script )
-						),
-					Promise.resolve()
+
+			// Ideally ALL classes that are added through get_body_class should
+			// be added in the editor too, which we'll somehow have to get from
+			// the server in the future (which will run the PHP filters).
+			setBodyClasses(
+				Array.from( ownerDocument.body.classList ).filter(
+					( name ) =>
+						name.startsWith( 'admin-color-' ) ||
+						name === 'wp-embed-responsive'
 				)
-				.finally( () => {
-					// When script are loaded, re-render blocks to allow them
-					// to initialise.
-					forceRender();
-				} );
+			);
+
+			contentDocument.dir = ownerDocument.dir;
+			documentElement.removeChild( contentDocument.head );
+			documentElement.removeChild( contentDocument.body );
 
 			return true;
 		}
@@ -246,6 +212,20 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 			setDocumentIfReady();
 		} );
 	}, [] );
+	const headRef = useRefEffect( ( element ) => {
+		scripts
+			.reduce(
+				( promise, script ) =>
+					promise.then( () => loadScript( element, script ) ),
+				Promise.resolve()
+			)
+			.finally( () => {
+				// When script are loaded, re-render blocks to allow them
+				// to initialise.
+				forceRender();
+			} );
+	}, [] );
+	const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );
 
 	useEffect( () => {
 		if ( iframeDocument ) {
@@ -279,24 +259,33 @@ function Iframe( { contentRef, children, head, ...props }, ref ) {
 
 	return (
 		<>
-			{ before }
+			{ tabIndex >= 0 && before }
 			<iframe
 				{ ...props }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
-				tabIndex="0"
+				tabIndex={ tabIndex }
 				title={ __( 'Editor canvas' ) }
-				name="editor-canvas"
 			>
 				{ iframeDocument &&
 					createPortal(
-						<StyleProvider document={ iframeDocument }>
-							{ children }
-						</StyleProvider>,
-						iframeDocument.body
+						<>
+							<head ref={ headRef }>{ head }</head>
+							<body
+								ref={ bodyRef }
+								className={ classnames(
+									BODY_CLASS_NAME,
+									...bodyClasses
+								) }
+							>
+								<StyleProvider document={ iframeDocument }>
+									{ children }
+								</StyleProvider>
+							</body>
+						</>,
+						iframeDocument.documentElement
 					) }
-				{ iframeDocument && createPortal( head, iframeDocument.head ) }
 			</iframe>
-			{ after }
+			{ tabIndex >= 0 && after }
 		</>
 	);
 }

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 ]
+	);
+}