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 }
/>