Make the change image flow clearer (#14142)

* added two modes for edit icon and double click as means to enter and exit the edit mode, also there is only one edit mode flow * added the swap icon and the state toggle * added a cancel link to the media placeholder * added image thumbnail to mediaplaceholder in image block edit mode * wrapped up noisysocks code style review points * a few a11y fixes * applies talldan's requested changes * solves more code review issues * Changelog updates for affected packages * added classname back to MediaPlaceholder * Fixed faulty state check Co-Authored-By: draganescu <me@andreidraganescu.info> * removes bogus new line * corrects an if to make it more readable * renames mediaPreview to media in the Placeholder component
WordPress · Apr 3, 2019 · 7a2a9ba · 7a2a9ba
1 parent 4fc05d3
commit 7a2a9ba
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 43 deletions.
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -6,6 +6,9 @@
 - Added the `addToGallery` property to the `MediaPlaceholder` component. The component passes the property to the `MediaUpload` component used inside the placeholder.
 - Added the `isAppender` property to the `MediaPlaceholder` component. The property changes the look of the placeholder to be adequate to scenarios where new files are added to an already existing set of files, e.g., adding files to a gallery.
 - Added the `dropZoneUIOnly` property to the `MediaPlaceholder` component. The property makes the `MediaPlaceholder` only render a dropzone without any other additional UI.
+- Added a cancel link to the list of buttons in the `MediaPlaceholder` component which appears if an `onCancel` handler exists
+- Added the usage of `mediaPreview` for the `Placeholder` component to the `MediaPlaceholder` component
+- Added a an `onDoubleClick` event handler to the `MediaPlaceholder` component
 
 ### Breaking Changes
 

diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js
@@ -154,6 +154,8 @@ export class MediaPlaceholder extends Component {
 			icon,
 			isAppender,
 			labels = {},
+			onDoubleClick,
+			mediaPreview,
 			notices,
 			onSelectURL,
 			mediaUpload,
@@ -212,6 +214,8 @@ export class MediaPlaceholder extends Component {
 				className={ placeholderClassName }
 				notices={ notices }
 				onClick={ onClick }
+				onDoubleClick={ onDoubleClick }
+				preview={ mediaPreview }
 			>
 				{ content }
 			</Placeholder>
@@ -228,6 +232,22 @@ export class MediaPlaceholder extends Component {
 		);
 	}
 
+	renderCancelLink() {
+		const {
+			onCancel,
+		} = this.props;
+		return ( onCancel &&
+			<Button
+				className="block-editor-media-placeholder__cancel-button"
+				title={ __( 'Cancel' ) }
+				isLink
+				onClick={ onCancel }
+			>
+				{ __( 'Cancel' ) }
+			</Button>
+		);
+	}
+
 	renderUrlSelectionUI() {
 		const {
 			onSelectURL,
@@ -329,6 +349,7 @@ export class MediaPlaceholder extends Component {
 									</IconButton>
 									{ mediaLibraryButton }
 									{ this.renderUrlSelectionUI() }
+									{ this.renderCancelLink() }
 								</Fragment>
 							);
 							return this.renderPlaceholder( content, openFileDialog );
@@ -356,6 +377,7 @@ export class MediaPlaceholder extends Component {
 					</FormFileUpload>
 					{ mediaLibraryButton }
 					{ this.renderUrlSelectionUI() }
+					{ this.renderCancelLink() }
 				</Fragment>
 			);
 			return this.renderPlaceholder( content );

diff --git a/packages/block-editor/src/components/media-placeholder/style.scss b/packages/block-editor/src/components/media-placeholder/style.scss
@@ -42,6 +42,11 @@
 	}
 }
 
+.block-editor-media-placeholder__cancel-button.is-link {
+	margin: 1em;
+	display: block;
+}
+
 .components-form-file-upload .block-editor-media-placeholder__button {
 	margin-right: $grid-size-small;
 }

diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md
@@ -6,6 +6,7 @@
 - Add `wide` and `full` alignments to Categories block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add all alignment options to RSS block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
 - Add all alignment options to Search block ([#14533](https://github.com/WordPress/gutenberg/pull/14533)).
+- Updated the edit flow of the `image` block, updated the edit icon and unified the image editing in only one UI based on `MediaPlaceholder`
 
 ### Bug Fixes
 

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -20,9 +20,12 @@ import {
 	ButtonGroup,
 	IconButton,
 	PanelBody,
+	Path,
+	Rect,
 	ResizableBox,
 	SelectControl,
 	Spinner,
+	SVG,
 	TextareaControl,
 	TextControl,
 	ToggleControl,
@@ -38,15 +41,14 @@ import {
 	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadCheck,
 	RichText,
 } from '@wordpress/block-editor';
 import { mediaUpload } from '@wordpress/editor';
 import { Component, Fragment } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { getPath } from '@wordpress/url';
 import { withViewportMatch } from '@wordpress/viewport';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -329,6 +331,11 @@ class ImageEdit extends Component {
 		this.setState( {
 			isEditing: ! this.state.isEditing,
 		} );
+		if ( this.state.isEditing ) {
+			speak( __( 'You are now viewing the image in the image block.' ) );
+		} else {
+			speak( __( 'You are now editing the image in the image block.' ) );
+		}
 	}
 
 	getImageSizeOptions() {
@@ -373,68 +380,58 @@ class ImageEdit extends Component {
 			linkTarget,
 		} = attributes;
 		const isExternal = isExternalImage( id, url );
-
-		let toolbarEditButton;
-		if ( url ) {
-			if ( isExternal ) {
-				toolbarEditButton = (
-					<Toolbar>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-							label={ __( 'Edit image' ) }
-							onClick={ this.toggleIsEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				);
-			} else {
-				toolbarEditButton = (
-					<MediaUploadCheck>
-						<Toolbar>
-							<MediaUpload
-								onSelect={ this.onSelectImage }
-								allowedTypes={ ALLOWED_MEDIA_TYPES }
-								value={ id }
-								render={ ( { open } ) => (
-									<IconButton
-										className="components-toolbar__control"
-										label={ __( 'Edit image' ) }
-										icon="edit"
-										onClick={ open }
-									/>
-								) }
-							/>
-						</Toolbar>
-					</MediaUploadCheck>
-				);
-			}
-		}
-
+		const editImageIcon = ( <SVG width={ 24 } height={ 24 } viewBox="0 0 24 24"><Rect x={ 14 } y={ 3 } width={ 8 } height={ 6 } rx={ 1 } /><Rect x={ 2 } y={ 15 } width={ 8 } height={ 6 } rx={ 1 } /><Path d="M16,15h1.87c-.63,2.35-3.38,4-5.87,4v2c3.47,0,7.29-2.42,7.91-6H22l-3-3.5Z" /><Path d="M8,9H6.13C6.76,6.65,9.51,5,12,5V3C8.53,3,4.71,5.42,4.09,9H2l3,3.5Z" /></SVG> );
 		const controls = (
 			<BlockControls>
 				<BlockAlignmentToolbar
 					value={ align }
 					onChange={ this.updateAlignment }
 				/>
-				{ toolbarEditButton }
+				{ url && (
+					<Toolbar>
+						<IconButton
+							className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': this.state.isEditing } ) }
+							label={ __( 'Edit image' ) }
+							aria-pressed={ this.state.isEditing }
+							onClick={ this.toggleIsEditing }
+							icon={ editImageIcon }
+						/>
+					</Toolbar>
+				) }
 			</BlockControls>
 		);
-
 		if ( isEditing || ! url ) {
 			const src = isExternal ? url : undefined;
+
+			const labels = {
+				title: ! url ? __( 'Image' ) : __( 'Edit image' ),
+				instructions: __( 'Drag an image to upload, select a file from your library or add one from an URL.' ),
+			};
+
+			const mediaPreview = ( !! url && <img
+				alt={ __( 'Edit image' ) }
+				title={ __( 'Edit image' ) }
+				className={ 'edit-image-preview' }
+				src={ url }
+			/> );
+
 			return (
 				<Fragment>
 					{ controls }
 					<MediaPlaceholder
 						icon={ <BlockIcon icon={ icon } /> }
 						className={ className }
+						labels={ labels }
 						onSelect={ this.onSelectImage }
 						onSelectURL={ this.onSelectURL }
+						onDoubleClick={ this.toggleIsEditing }
+						onCancel={ !! url && this.toggleIsEditing }
 						notices={ noticeUI }
 						onError={ this.onUploadError }
 						accept="image/*"
 						allowedTypes={ ALLOWED_MEDIA_TYPES }
 						value={ { id, src } }
+						mediaPreview={ mediaPreview }
 					/>
 				</Fragment>
 			);
@@ -594,7 +591,13 @@ class ImageEdit extends Component {
 								// should direct focus to block.
 								/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 								<Fragment>
-									<img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } onError={ () => this.onImageError( url ) } />
+									<img
+										src={ url }
+										alt={ defaultedAlt }
+										onDoubleClick={ this.toggleIsEditing }
+										onClick={ this.onImageClick }
+										onError={ () => this.onImageError( url ) }
+									/>
 									{ isBlobURL( url ) && <Spinner /> }
 								</Fragment>
 								/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 - Added a new `render` property to `FormFileUpload` component. Allowing users of the component to custom the UI for their needs.
 - Added a new `BaseControl.VisualLabel` component.
+- Added a new `preview` prop to the `Placeholder` component which allows to display a preview, for example a media preview when the Placeholder is used in media editing contexts.
 
 ### Bug fixes
 

diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
@@ -15,12 +15,17 @@ import Dashicon from '../dashicon';
 * @param  {Object} props The component props.
 * @return {Object}       The rendered placeholder.
 */
-function Placeholder( { icon, children, label, instructions, className, notices, ...additionalProps } ) {
+function Placeholder( { icon, children, label, instructions, className, notices, preview, ...additionalProps } ) {
 	const classes = classnames( 'components-placeholder', className );
 
 	return (
 		<div { ...additionalProps } className={ classes }>
 			{ notices }
+			{ preview &&
+				<div className="components-placeholder__preview">
+					{ preview }
+				</div>
+			}
 			<div className="components-placeholder__label">
 				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
 				{ label }

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -57,3 +57,8 @@
 .components-placeholder__instructions {
 	margin-bottom: 1em;
 }
+
+.components-placeholder__preview img {
+	margin: 3%;
+	width: 50%;
+}