From 7a2a9bad9d5ed6fdba46706d7bc4a44a097fb8e3 Mon Sep 17 00:00:00 2001 From: andrei draganescu Date: Wed, 3 Apr 2019 09:23:37 +0300 Subject: [PATCH] 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 * removes bogus new line * corrects an if to make it more readable * renames mediaPreview to media in the Placeholder component --- packages/block-editor/CHANGELOG.md | 3 + .../src/components/media-placeholder/index.js | 22 +++++ .../components/media-placeholder/style.scss | 5 ++ packages/block-library/CHANGELOG.md | 1 + packages/block-library/src/image/edit.js | 87 ++++++++++--------- packages/components/CHANGELOG.md | 1 + packages/components/src/placeholder/index.js | 7 +- .../components/src/placeholder/style.scss | 5 ++ 8 files changed, 88 insertions(+), 43 deletions(-) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index e8e873c3719d2b..93bfc5a4a9bd36 100644 --- 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 index 7b6837588cd998..096ce44ef9717a 100644 --- 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 } @@ -228,6 +232,22 @@ export class MediaPlaceholder extends Component { ); } + renderCancelLink() { + const { + onCancel, + } = this.props; + return ( onCancel && + + ); + } + renderUrlSelectionUI() { const { onSelectURL, @@ -329,6 +349,7 @@ export class MediaPlaceholder extends Component { { mediaLibraryButton } { this.renderUrlSelectionUI() } + { this.renderCancelLink() } ); return this.renderPlaceholder( content, openFileDialog ); @@ -356,6 +377,7 @@ export class MediaPlaceholder extends Component { { mediaLibraryButton } { this.renderUrlSelectionUI() } + { this.renderCancelLink() } ); 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 index d18b42ce5e57a9..794163e6678a82 100644 --- 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 index 1c06e0d53e9435..b222c778b74560 100644 --- 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 index c6336b03508364..b02a75122fae2d 100644 --- 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,8 +41,6 @@ import { BlockIcon, InspectorControls, MediaPlaceholder, - MediaUpload, - MediaUploadCheck, RichText, } from '@wordpress/block-editor'; import { mediaUpload } from '@wordpress/editor'; @@ -47,6 +48,7 @@ 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 = ( - - - - ); - } else { - toolbarEditButton = ( - - - ( - - ) } - /> - - - ); - } - } - + const editImageIcon = ( ); const controls = ( - { toolbarEditButton } + { url && ( + + + + ) } ); - 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 && { ); + return ( { controls } } 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 } /> ); @@ -594,7 +591,13 @@ class ImageEdit extends Component { // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ - { this.onImageError( url ) } /> + { this.onImageError( url ) } + /> { isBlobURL( url ) && } /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */ diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1be0255a96866f..ee616f4404f151 100644 --- 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 index bbeb256d8a8ea2..e5a5b323f60c7d 100644 --- 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 (
{ notices } + { preview && +
+ { preview } +
+ }
{ isString( icon ) ? : icon } { label } diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss index 9bdc0e93fa26b8..895ea0d4065c80 100644 --- 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%; +}