Image editing: move to image block

WordPress · Jun 11, 2020 · 295f2f4 · 295f2f4
1 parent e0453df
commit 295f2f4
Show file tree

Hide file tree

Showing 10 changed files with 169 additions and 202 deletions.
diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss
@@ -33,7 +33,6 @@
 @import "./post-author/editor.scss";
 @import "./pullquote/editor.scss";
 @import "./quote/editor.scss";
-@import "./rich-image/editor.scss";
 @import "./rss/editor.scss";
 @import "./search/editor.scss";
 @import "./separator/editor.scss";

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -70,3 +70,91 @@ figure.wp-block-image:not(.wp-block) {
 	margin-right: auto;
 	text-align: center;
 }
+
+// Working State.
+.richimage__working {
+	position: relative;
+
+	.richimage__working-spinner {
+		position: absolute;
+		z-index: 1;
+		left: 50%;
+		top: calc(50% - #{ $grid-unit-60 });
+		transform: translate(-50%, -50%);
+	}
+
+	img {
+		opacity: 0.6;
+		transition: all 0.4s ease; // Make flips smooth.
+	}
+
+	&.richimage__working__flipv img {
+		transform: scale(1, -1);
+	}
+
+	&.richimage__working__fliph img {
+		transform: scale(-1, 1);
+	}
+}
+
+// Without this the toolbar buttons gain padding, making them too tall and breaking the toolbar
+// This only happens during the processing state as we change the dropdowns into buttons to disable the dropdowns
+.richimage-toolbar__working {
+	padding: 0 6px;
+}
+
+.richimage-crop {
+	.components-resizable-box__handle {
+		display: block;
+	}
+}
+
+.richimage__crop-area {
+	position: relative;
+	max-width: 100%;
+	width: 100%;
+}
+
+.richimage__crop-icon {
+	padding: 0 8px;
+	min-width: 48px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	svg {
+		fill: currentColor;
+	}
+}
+
+.richimage__zoom-control {
+	border: $border-width solid $dark-gray-primary;
+	border-radius: $radius-block-ui;
+	background-color: $white;
+	margin-top: $grid-unit-15;
+	margin-bottom: $grid-unit-15;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-10;
+	line-height: 1;
+}
+
+// Make the toolbar dropdowns blend in.
+.components-toolbar.richimage-toolbar__dropdown { // Needs specificity.
+	padding: 0;
+	border-left: none;
+	border-right: none;
+
+	.components-icon-button.has-text svg {
+		margin-right: 0;
+	}
+
+	.components-dropdown-menu__indicator {
+		display: none;
+	}
+}
+
+// Make icons 24x24 unscaled.
+.richimage-toolbar__dropdown > .components-button,
+.richimage-toolbar__dropdown,
+.richimage-toolbar__control {
+	padding: 6px;
+}
diff --git a/...ibrary/src/rich-image/rich-image/index.js → ...s/block-library/src/image/image-editor.js b/...ibrary/src/rich-image/rich-image/index.js → ...s/block-library/src/image/image-editor.js
@@ -9,10 +9,7 @@ import Cropper from 'react-easy-crop';
  * WordPress dependencies
  */
 
-import {
-	BlockControls,
-	__experimentalBlock as Block,
-} from '@wordpress/block-editor';
+import { BlockControls } from '@wordpress/block-editor';
 import { useState, useEffect } from '@wordpress/element';
 import {
 	rotateLeft as rotateLeftIcon,
@@ -26,21 +23,15 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	__experimentalToolbarItem as ToolbarItem,
-	Icon,
 	Spinner,
-	withNotices,
 	RangeControl,
 	DropdownMenu,
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import richImageRequest from './api';
+import apiFetch from '@wordpress/api-fetch';
 
 const ROTATE_STEP = 90;
 const DEFAULT_CROP = {
@@ -55,6 +46,17 @@ const MAX_ZOOM = 3;
 const ZOOM_STEP = 0.1;
 const POPOVER_PROPS = { position: 'bottom right' };
 
+function richImageRequest( id, action, attrs ) {
+	return apiFetch( {
+		path: `__experimental/richimage/${ id }/${ action }`,
+		headers: {
+			'Content-type': 'application/json',
+		},
+		method: 'POST',
+		body: JSON.stringify( attrs ),
+	} );
+}
+
 function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
 	return (
 		<MenuGroup label={ label }>
@@ -154,13 +156,13 @@ function AspectMenu( { isDisabled, onClick, toggleProps } ) {
 	);
 }
 
-function RichImage( props ) {
-	const {
-		isSelected,
-		attributes: { id, url },
-		originalBlock: OriginalBlock,
-		setAttributes,
-	} = props;
+export default function ImageEditor( {
+	id,
+	url,
+	setAttributes,
+	isSelected,
+	children,
+} ) {
 	const { createErrorNotice } = useDispatch( 'core/notices' );
 	const [ isCropping, setIsCropping ] = useState( false );
 	const [ inProgress, setIsProgress ] = useState( null );
@@ -172,7 +174,6 @@ function RichImage( props ) {
 	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
 	const [ zoom, setZoom ] = useState( 1 );
 	const [ aspect, setAspect ] = useState( 4 / 3 );
-	const isEditing = ! isCropping && isSelected && url;
 
 	// Cancel cropping on deselect.
 	useEffect( () => {
@@ -234,7 +235,7 @@ function RichImage( props ) {
 					</div>
 				) }
 				{ isCropping ? (
-					<Block.div className="richimage__crop-controls">
+					<div className="richimage__crop-controls">
 						<div
 							className="richimage__crop-area"
 							style={ {
@@ -267,13 +268,13 @@ function RichImage( props ) {
 							value={ zoom }
 							onChange={ setZoom }
 						/>
-					</Block.div>
+					</div>
 				) : (
-					<OriginalBlock { ...props } className={ classes } />
+					children
 				) }
 			</div>
-			{ isEditing && (
-				<BlockControls>
+			<BlockControls>
+				{ ! isCropping && (
 					<ToolbarGroup>
 						<ToolbarItem>
 							{ ( toggleProps ) => (
@@ -349,42 +350,35 @@ function RichImage( props ) {
 							} }
 						/>
 					</ToolbarGroup>
-				</BlockControls>
-			) }
-			{ isCropping && (
-				<BlockControls>
-					<ToolbarGroup>
-						<div className="richimage__crop-icon">
-							<Icon icon={ cropIcon } />
-						</div>
-					</ToolbarGroup>
-					<ToolbarGroup>
-						<ToolbarItem>
-							{ ( toggleProps ) => (
-								<AspectMenu
-									toggleProps={ toggleProps }
-									isDisabled={ inProgress }
-									onClick={ setAspect }
-								/>
-							) }
-						</ToolbarItem>
-					</ToolbarGroup>
-					<ToolbarGroup>
-						<ToolbarButton onClick={ cropImage }>
-							{ __( 'Apply' ) }
-						</ToolbarButton>
-						<ToolbarButton
-							onClick={ () => {
-								setIsCropping( false );
-							} }
-						>
-							{ __( 'Cancel' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
+				) }
+				{ isCropping && (
+					<>
+						<ToolbarGroup>
+							<ToolbarItem>
+								{ ( toggleProps ) => (
+									<AspectMenu
+										toggleProps={ toggleProps }
+										isDisabled={ inProgress }
+										onClick={ setAspect }
+									/>
+								) }
+							</ToolbarItem>
+						</ToolbarGroup>
+						<ToolbarGroup>
+							<ToolbarButton onClick={ cropImage }>
+								{ __( 'Apply' ) }
+							</ToolbarButton>
+							<ToolbarButton
+								onClick={ () => {
+									setIsCropping( false );
+								} }
+							>
+								{ __( 'Cancel' ) }
+							</ToolbarButton>
+						</ToolbarGroup>
+					</>
+				) }
+			</BlockControls>
 		</>
 	);
 }
-
-export default withNotices( RichImage );
diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js
@@ -36,6 +36,7 @@ import { createBlock } from '@wordpress/blocks';
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
 import useClientWidth from './use-client-width';
+import ImageEditor from './image-editor';
 
 /**
  * Module constants
@@ -79,9 +80,19 @@ export default function Image( {
 		},
 		[ id, isSelected ]
 	);
-	const { maxWidth, isRTL, imageSizes } = useSelect( ( select ) => {
+	const {
+		maxWidth,
+		isRTL,
+		imageSizes,
+		__experimentalEnableRichImageEditing,
+	} = useSelect( ( select ) => {
 		const { getSettings } = select( 'core/block-editor' );
-		return pick( getSettings(), [ 'imageSizes', 'isRTL', 'maxWidth' ] );
+		return pick( getSettings(), [
+			'imageSizes',
+			'isRTL',
+			'maxWidth',
+			'__experimentalEnableRichImageEditing',
+		] );
 	} );
 	const { toggleSelection } = useDispatch( 'core/block-editor' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -369,6 +380,19 @@ export default function Image( {
 		);
 	}
 
+	if ( __experimentalEnableRichImageEditing ) {
+		img = (
+			<ImageEditor
+				id={ id }
+				url={ url }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+			>
+				{ img }
+			</ImageEditor>
+		);
+	}
+
 	return (
 		<>
 			{ img }

diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -46,7 +46,6 @@ import * as nextpage from './nextpage';
 import * as preformatted from './preformatted';
 import * as pullquote from './pullquote';
 import * as reusableBlock from './block';
-import * as richImage from './rich-image';
 import * as rss from './rss';
 import * as search from './search';
 import * as group from './group';
@@ -187,7 +186,6 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				const {
 					__experimentalEnableLegacyWidgetBlock,
 					__experimentalEnableFullSiteEditing,
-					__experimentalEnableRichImageEditing,
 				} = settings;
 
 				[
@@ -217,10 +215,5 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 						  ]
 						: [] ),
 				].forEach( registerBlock );
-
-				if ( __experimentalEnableRichImageEditing ) {
-					// Attach rich image tools to the image block.
-					richImage.registerBlock();
-				}
 		  }
 		: undefined;
diff --git a/packages/block-library/src/rich-image/constants.js b/packages/block-library/src/rich-image/constants.js