diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index 2ec1ad42041c8..c326cfc6aa819 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -8,7 +13,10 @@ import { Disabled, IconButton, PanelBody, + Path, + Rect, SelectControl, + SVG, ToggleControl, Toolbar, withNotices, @@ -148,7 +156,7 @@ class VideoEdit extends Component { } = this.props; const { editing } = this.state; const switchToEditing = () => { - this.setState( { editing: true } ); + this.setState( { editing: ! this.state.editing } ); }; const onSelectVideo = ( media ) => { if ( ! media || ! media.url ) { @@ -164,19 +172,34 @@ class VideoEdit extends Component { this.setState( { src: media.url, editing: false } ); }; + const editImageIcon = ( ); if ( editing ) { return ( - } - className={ className } - onSelect={ onSelectVideo } - onSelectURL={ this.onSelectURL } - accept="video/*" - allowedTypes={ ALLOWED_MEDIA_TYPES } - value={ this.props.attributes } - notices={ noticeUI } - onError={ noticeOperations.createErrorNotice } - /> + <> + + { !! src && ( + + ) } + + } + className={ className } + onSelect={ onSelectVideo } + onSelectURL={ this.onSelectURL } + onCancel={ !! src && switchToEditing } + accept="video/*" + allowedTypes={ ALLOWED_MEDIA_TYPES } + value={ this.props.attributes } + notices={ noticeUI } + onError={ noticeOperations.createErrorNotice } + /> + ); } const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`; @@ -190,7 +213,7 @@ class VideoEdit extends Component { className="components-icon-button components-toolbar__control" label={ __( 'Edit video' ) } onClick={ switchToEditing } - icon="edit" + icon={ editImageIcon } />