Media: Refactor the MediaUploadButton to be agnostic to its rendered UI

WordPress · Jan 16, 2018 · 3e08d83 · 3e08d83
1 parent 8e87182
commit 3e08d83
Show file tree

Hide file tree

Showing 15 changed files with 213 additions and 102 deletions.
diff --git a/blocks/image-placeholder/index.js b/blocks/image-placeholder/index.js
@@ -1,14 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { DropZone, FormFileUpload, Placeholder } from '@wordpress/components';
+import { DropZone, FormFileUpload, Placeholder, Button } from '@wordpress/components';
 import { mediaUpload } from '@wordpress/utils';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import MediaUploadButton from '../media-upload-button';
+import MediaUpload from '../media-upload';
 
 /**
  *  ImagePlaceHolder is a react component used by blocks containing user configurable images e.g: image and cover image.
@@ -38,13 +38,15 @@ export default function ImagePlaceHolder( { className, icon, label, onSelectImag
 			>
 				{ __( 'Upload' ) }
 			</FormFileUpload>
-			<MediaUploadButton
-				buttonProps={ { isLarge: true } }
+			<MediaUpload
 				onSelect={ onSelectImage }
 				type="image"
-			>
-				{ __( 'Add from Media Library' ) }
-			</MediaUploadButton>
+				render={ ( { open } ) => (
+					<Button isLarge onClick={ open }>
+						{ __( 'Add from Media Library' ) }
+					</Button>
+				) }
+			/>
 		</Placeholder>
 	);
 }
diff --git a/blocks/index.js b/blocks/index.js
@@ -24,7 +24,8 @@ export { default as ColorPalette } from './color-palette';
 export { default as Editable } from './editable';
 export { default as EditableProvider } from './editable/provider';
 export { default as InspectorControls } from './inspector-controls';
-export { default as MediaUploadButton } from './media-upload-button';
+export { default as MediaUpload } from './media-upload';
+export { default as MediaUploadButton } from './media-upload/button';
 export { default as TermTreeSelect } from './term-tree-select';
 export { default as UrlInput } from './url-input';
 export { default as UrlInputButton } from './url-input/button';

diff --git a/blocks/library/audio/index.js b/blocks/library/audio/index.js
@@ -15,7 +15,7 @@ import { Component } from '@wordpress/element';
 import './style.scss';
 import './editor.scss';
 import { registerBlockType } from '../../api';
-import MediaUploadButton from '../../media-upload-button';
+import MediaUpload from '../../media-upload';
 import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -133,14 +133,16 @@ registerBlockType( 'core/audio', {
 								{ __( 'Use URL' ) }
 							</Button>
 						</form>
-						<MediaUploadButton
-							buttonProps={ { isLarge: true } }
+						<MediaUpload
 							onSelect={ onSelectAudio }
 							type="audio"
 							value={ id }
-						>
-							{ __( 'Add from Media Library' ) }
-						</MediaUploadButton>
+							render={ ( { open } ) => (
+								<Button isLarge onClick={ open }>
+									{ __( 'Add from Media Library' ) }
+								</Button>
+							) }
+						/>
 					</Placeholder>,
 				];
 			}

diff --git a/blocks/library/audio/test/index.js b/blocks/library/audio/test/index.js
@@ -4,7 +4,7 @@
 import '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
-jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
+jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/audio', () => {
 	test( 'block edit matches snapshot', () => {

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -6,7 +6,7 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Dashicon, Toolbar } from '@wordpress/components';
+import { IconButton, Toolbar } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -17,7 +17,7 @@ import './editor.scss';
 import './style.scss';
 import { registerBlockType, createBlock } from '../../api';
 import Editable from '../../editable';
-import MediaUploadButton from '../../media-upload-button';
+import MediaUpload from '../../media-upload';
 import ImagePlaceHolder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -108,7 +108,6 @@ registerBlockType( 'core/cover-image', {
 			}
 		);
 
-		const editButtonLabel = __( 'Edit image' );
 		const controls = focus && [
 			<BlockControls key="controls">
 				<BlockAlignmentToolbar
@@ -117,18 +116,19 @@ registerBlockType( 'core/cover-image', {
 				/>
 
 				<Toolbar>
-					<MediaUploadButton
-						buttonProps={ {
-							className: 'components-icon-button components-toolbar__control',
-							'aria-label': editButtonLabel,
-						} }
+					<MediaUpload
 						onSelect={ onSelectImage }
 						type="image"
 						value={ id }
-						tooltip={ editButtonLabel }
-					>
-						<Dashicon icon="edit" />
-					</MediaUploadButton>
+						render={ ( { open } ) => (
+							<IconButton
+								className="components-toolbar__control"
+								label={ __( 'Edit image' ) }
+								icon="edit"
+								onClick={ open }
+							/>
+						) }
+					/>
 				</Toolbar>
 			</BlockControls>,
 			<InspectorControls key="inspector">

diff --git a/blocks/library/cover-image/test/index.js b/blocks/library/cover-image/test/index.js
@@ -4,7 +4,7 @@
 import '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
-jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
+jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/cover-image', () => {
 	test( 'block edit matches snapshot', () => {

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -9,12 +9,12 @@ import { filter } from 'lodash';
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { mediaUpload } from '@wordpress/utils';
-import { Dashicon, DropZone, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
+import { IconButton, Button, DropZone, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import MediaUploadButton from '../../media-upload-button';
+import MediaUpload from '../../media-upload';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
 import ToggleControl from '../../inspector-controls/toggle-control';
@@ -146,7 +146,6 @@ class GalleryBlock extends Component {
 			/>
 		);
 
-		const editButtonLabel = __( 'Edit Gallery' );
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -156,29 +155,28 @@ class GalleryBlock extends Component {
 					/>
 					{ !! images.length && (
 						<Toolbar>
-							<MediaUploadButton
-								buttonProps={ {
-									className: 'components-icon-button components-toolbar__control',
-									'aria-label': editButtonLabel,
-								} }
+							<MediaUpload
 								onSelect={ this.onSelectImages }
 								type="image"
 								multiple
 								gallery
 								value={ images.map( ( img ) => img.id ) }
-								tooltip={ editButtonLabel }
-							>
-								<Dashicon icon="edit" />
-							</MediaUploadButton>
+								render={ ( { open } ) => (
+									<IconButton
+										className="components-toolbar__control"
+										label={ __( 'Edit Gallery' ) }
+										icon="edit"
+										onClick={ open }
+									/>
+								) }
+							/>
 						</Toolbar>
 					) }
 				</BlockControls>
 			)
 		);
 
 		if ( images.length === 0 ) {
-			const uploadButtonProps = { isLarge: true };
-
 			return [
 				controls,
 				<Placeholder
@@ -197,15 +195,17 @@ class GalleryBlock extends Component {
 					>
 						{ __( 'Upload' ) }
 					</FormFileUpload>
-					<MediaUploadButton
-						buttonProps={ uploadButtonProps }
+					<MediaUpload
 						onSelect={ this.onSelectImages }
 						type="image"
 						multiple
 						gallery
-					>
-						{ __( 'Add from Media Library' ) }
-					</MediaUploadButton>
+						render={ ( { open } ) => (
+							<Button isLarge onClick={ open }>
+								{ __( 'Add from Media Library' ) }
+							</Button>
+						) }
+					/>
 				</Placeholder>,
 			];
 		}

diff --git a/blocks/library/gallery/test/index.js b/blocks/library/gallery/test/index.js
@@ -4,7 +4,7 @@
 import '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
-jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
+jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/gallery', () => {
 	test( 'block edit matches snapshot', () => {

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n';
 import { Component, compose } from '@wordpress/element';
 import { createMediaFromFile, getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
-	Dashicon,
+	IconButton,
 	Toolbar,
 	withAPIData,
 	withContext,
@@ -28,7 +28,7 @@ import {
  */
 import Editable from '../../editable';
 import ImagePlaceHolder from '../../image-placeholder';
-import MediaUploadButton from '../../media-upload-button';
+import MediaUpload from '../../media-upload';
 import InspectorControls from '../../inspector-controls';
 import TextControl from '../../inspector-controls/text-control';
 import SelectControl from '../../inspector-controls/select-control';
@@ -116,7 +116,6 @@ class ImageBlock extends Component {
 		const figureStyle = width ? { width } : {};
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );
 
-		const editButtonLabel = __( 'Edit image' );
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -126,18 +125,19 @@ class ImageBlock extends Component {
 					/>
 
 					<Toolbar>
-						<MediaUploadButton
-							buttonProps={ {
-								className: 'components-icon-button components-toolbar__control',
-								'aria-label': editButtonLabel,
-							} }
+						<MediaUpload
 							onSelect={ this.onSelectImage }
 							type="image"
 							value={ id }
-							tooltip={ editButtonLabel }
-						>
-							<Dashicon icon="edit" />
-						</MediaUploadButton>
+							render={ ( { open } ) => (
+								<IconButton
+									className="components-toolbar__control"
+									label={ __( 'Edit image' ) }
+									icon="edit"
+									onClick={ open }
+								/>
+							) }
+						/>
 						<UrlInputButton onChange={ this.onSetHref } url={ href } />
 					</Toolbar>
 				</BlockControls>

diff --git a/blocks/library/video/index.js b/blocks/library/video/index.js
@@ -15,7 +15,7 @@ import { Component } from '@wordpress/element';
 import './style.scss';
 import './editor.scss';
 import { registerBlockType } from '../../api';
-import MediaUploadButton from '../../media-upload-button';
+import MediaUpload from '../../media-upload';
 import Editable from '../../editable';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -134,14 +134,16 @@ registerBlockType( 'core/video', {
 								{ __( 'Use URL' ) }
 							</Button>
 						</form>
-						<MediaUploadButton
-							buttonProps={ { isLarge: true } }
+						<MediaUpload
 							onSelect={ onSelectVideo }
 							type="video"
 							id={ id }
-						>
-							{ __( 'Add from Media Library' ) }
-						</MediaUploadButton>
+							render={ ( { open } ) => (
+								<Button isLarge onClick={ open } >
+									{ __( 'Add from Media Library' ) }
+								</Button>
+							) }
+						/>
 					</Placeholder>,
 				];
 			}

diff --git a/blocks/library/video/test/index.js b/blocks/library/video/test/index.js
@@ -4,7 +4,7 @@
 import '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
-jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
+jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
 
 describe( 'core/video', () => {
 	test( 'block edit matches snapshot', () => {