PoC

WordPress · Jul 16, 2019 · 7d170e2 · 7d170e2
1 parent 7a06a10
commit 7d170e2
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 49 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -285,6 +285,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inspector-controls/README.md>
 
+<a name="MediaFlow" href="#MediaFlow">#</a> **MediaFlow**
+
+Undocumented declaration.
+
 <a name="MediaPlaceholder" href="#MediaPlaceholder">#</a> **MediaPlaceholder**
 
 _Related_

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -19,6 +19,7 @@ export { default as ContrastChecker } from './contrast-checker';
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';
+export { default as MediaFlow } from './media-flow';
 export { default as MediaPlaceholder } from './media-placeholder';
 export { default as MediaUpload } from './media-upload';
 export { default as MediaUploadCheck } from './media-upload/check';

diff --git a/packages/block-editor/src/components/media-flow/index.js b/packages/block-editor/src/components/media-flow/index.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { MediaPlaceholder } from '../media-placeholder';
+import BlockIcon from '../block-icon';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Toolbar,
+	IconButton,
+	Path,
+	Rect,
+	SVG,
+} from '@wordpress/components';
+
+const ALLOWED_MEDIA_TYPES = [ 'audio' ];
+
+const MediaFlow = ( { mediaURL, onSelectMedia, onSelectURL, children } ) => {
+	const [ isEditing, setIsEditing ] = useState( ! mediaURL );
+
+	const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
+
+	const selectMedia = ( media ) => {
+		onSelectMedia( media );
+		setIsEditing( ! isEditing );
+	};
+
+	const selectURL = ( URL ) => {
+		onSelectURL( URL );
+		setIsEditing( ! isEditing );
+	};
+
+	const editMediaButton = (
+		<BlockControls>
+			<Toolbar>
+				<IconButton
+					className={ classnames( 'components-icon-button components-toolbar__control', { 'is-active': isEditing } ) }
+					label={ __( 'Edit audio' ) }
+					onClick={ () => setIsEditing( ! mediaURL ? true : ! isEditing ) }
+					icon={ editImageIcon }
+				/>
+			</Toolbar>
+		</BlockControls>
+	);
+
+	// const editMediaButton2 = ( <h1>Test</h1> );
+
+	const mediaPlaceholder = (
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ 'edit' } /> }
+			onCancel={ mediaURL && setIsEditing }
+			onSelect={ selectMedia }
+			onSelectURL={ selectURL }
+			accept="audio/*"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+		/>
+	);
+
+	return (
+		<Fragment>
+			{ editMediaButton }
+			{ ! isEditing && children }
+			{ isEditing && mediaPlaceholder }
+		</Fragment>
+	);
+};
+
+export default MediaFlow;
diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js
@@ -1,38 +1,30 @@
+
+/**
+ * Internal dependencies
+ */
+import { createUpgradedEmbedBlock } from '../embed/util';
+
 /**
  * WordPress dependencies
  */
 import { getBlobByURL, isBlobURL } from '@wordpress/blob';
 import { compose } from '@wordpress/compose';
 import {
 	Disabled,
-	IconButton,
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	Toolbar,
 	withNotices,
 } from '@wordpress/components';
 import {
-	BlockControls,
-	BlockIcon,
 	InspectorControls,
-	MediaPlaceholder,
 	RichText,
+	MediaFlow,
 } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import icon from './icon';
-
-/**
- * Internal dependencies
- */
-import { createUpgradedEmbedBlock } from '../embed/util';
-
 const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 class AudioEdit extends Component {
@@ -117,53 +109,25 @@ class AudioEdit extends Component {
 
 	render() {
 		const { autoplay, caption, loop, preload, src } = this.props.attributes;
-		const { setAttributes, isSelected, className, noticeUI } = this.props;
-		const { editing } = this.state;
-		const switchToEditing = () => {
-			this.setState( { editing: true } );
-		};
+		const { setAttributes, isSelected, className } = this.props;
 		const onSelectAudio = ( media ) => {
 			if ( ! media || ! media.url ) {
 				// in this case there was an error and we should continue in the editing state
 				// previous attributes should be removed because they may be temporary blob urls
 				setAttributes( { src: undefined, id: undefined } );
-				switchToEditing();
 				return;
 			}
 			// sets the block's attribute and updates the edit component from the
 			// selected media, then switches off the editing UI
 			setAttributes( { src: media.url, id: media.id } );
 			this.setState( { src: media.url, editing: false } );
 		};
-		if ( editing ) {
-			return (
-				<MediaPlaceholder
-					icon={ <BlockIcon icon={ icon } /> }
-					className={ className }
-					onSelect={ onSelectAudio }
-					onSelectURL={ this.onSelectURL }
-					accept="audio/*"
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					value={ this.props.attributes }
-					notices={ noticeUI }
-					onError={ this.onUploadError }
-				/>
-			);
-		}
-
 		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
-			<>
-				<BlockControls>
-					<Toolbar>
-						<IconButton
-							className="components-icon-button components-toolbar__control"
-							label={ __( 'Edit audio' ) }
-							onClick={ switchToEditing }
-							icon="edit"
-						/>
-					</Toolbar>
-				</BlockControls>
+			<MediaFlow
+				onSelectMedia={ onSelectAudio }
+				mediaURL={ src }
+			>
 				<InspectorControls>
 					<PanelBody title={ __( 'Audio Settings' ) }>
 						<ToggleControl
@@ -208,7 +172,7 @@ class AudioEdit extends Component {
 						/>
 					) }
 				</figure>
-			</>
+			</MediaFlow>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 	}