Skip to content

Commit 3e08d83

Browse files
youknowriadyouknowriad
committed
Media: Refactor the MediaUploadButton to be agnostic to its rendered UI
1 parent 8e87182 commit 3e08d83

File tree

15 files changed

+213
-102
lines changed

15 files changed

+213
-102
lines changed

‎blocks/image-placeholder/index.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { DropZone, FormFileUpload, Placeholder } from '@wordpress/components';
4+
import { DropZone, FormFileUpload, Placeholder, Button } from '@wordpress/components';
55
import { mediaUpload } from '@wordpress/utils';
66
import { __ } from '@wordpress/i18n';
77

88
/**
99
* Internal dependencies
1010
*/
11-
import MediaUploadButton from '../media-upload-button';
11+
import MediaUpload from '../media-upload';
1212

1313
/**
1414
* 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
3838
>
3939
{ __( 'Upload' ) }
4040
</FormFileUpload>
41-
<MediaUploadButton
42-
buttonProps={ { isLarge: true } }
41+
<MediaUpload
4342
onSelect={ onSelectImage }
4443
type="image"
45-
>
46-
{ __( 'Add from Media Library' ) }
47-
</MediaUploadButton>
44+
render={ ( { open } ) => (
45+
<Button isLarge onClick={ open }>
46+
{ __( 'Add from Media Library' ) }
47+
</Button>
48+
) }
49+
/>
4850
</Placeholder>
4951
);
5052
}

‎blocks/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ export { default as ColorPalette } from './color-palette';
2424
export { default as Editable } from './editable';
2525
export { default as EditableProvider } from './editable/provider';
2626
export { default as InspectorControls } from './inspector-controls';
27-
export { default as MediaUploadButton } from './media-upload-button';
27+
export { default as MediaUpload } from './media-upload';
28+
export { default as MediaUploadButton } from './media-upload/button';
2829
export { default as TermTreeSelect } from './term-tree-select';
2930
export { default as UrlInput } from './url-input';
3031
export { default as UrlInputButton } from './url-input/button';

‎blocks/library/audio/index.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Component } from '@wordpress/element';
1515
import './style.scss';
1616
import './editor.scss';
1717
import { registerBlockType } from '../../api';
18-
import MediaUploadButton from '../../media-upload-button';
18+
import MediaUpload from '../../media-upload';
1919
import Editable from '../../editable';
2020
import BlockControls from '../../block-controls';
2121
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -133,14 +133,16 @@ registerBlockType( 'core/audio', {
133133
{ __( 'Use URL' ) }
134134
</Button>
135135
</form>
136-
<MediaUploadButton
137-
buttonProps={ { isLarge: true } }
136+
<MediaUpload
138137
onSelect={ onSelectAudio }
139138
type="audio"
140139
value={ id }
141-
>
142-
{ __( 'Add from Media Library' ) }
143-
</MediaUploadButton>
140+
render={ ( { open } ) => (
141+
<Button isLarge onClick={ open }>
142+
{ __( 'Add from Media Library' ) }
143+
</Button>
144+
) }
145+
/>
144146
</Placeholder>,
145147
];
146148
}

‎blocks/library/audio/test/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import '../';
55
import { blockEditRender } from 'blocks/test/helpers';
66

7-
jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
7+
jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
88

99
describe( 'core/audio', () => {
1010
test( 'block edit matches snapshot', () => {

‎blocks/library/cover-image/index.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { isEmpty } from 'lodash';
66
/**
77
* WordPress dependencies
88
*/
9-
import { Dashicon, Toolbar } from '@wordpress/components';
9+
import { IconButton, Toolbar } from '@wordpress/components';
1010
import { __ } from '@wordpress/i18n';
1111
import classnames from 'classnames';
1212

@@ -17,7 +17,7 @@ import './editor.scss';
1717
import './style.scss';
1818
import { registerBlockType, createBlock } from '../../api';
1919
import Editable from '../../editable';
20-
import MediaUploadButton from '../../media-upload-button';
20+
import MediaUpload from '../../media-upload';
2121
import ImagePlaceHolder from '../../image-placeholder';
2222
import BlockControls from '../../block-controls';
2323
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -108,7 +108,6 @@ registerBlockType( 'core/cover-image', {
108108
}
109109
);
110110

111-
const editButtonLabel = __( 'Edit image' );
112111
const controls = focus && [
113112
<BlockControls key="controls">
114113
<BlockAlignmentToolbar
@@ -117,18 +116,19 @@ registerBlockType( 'core/cover-image', {
117116
/>
118117

119118
<Toolbar>
120-
<MediaUploadButton
121-
buttonProps={ {
122-
className: 'components-icon-button components-toolbar__control',
123-
'aria-label': editButtonLabel,
124-
} }
119+
<MediaUpload
125120
onSelect={ onSelectImage }
126121
type="image"
127122
value={ id }
128-
tooltip={ editButtonLabel }
129-
>
130-
<Dashicon icon="edit" />
131-
</MediaUploadButton>
123+
render={ ( { open } ) => (
124+
<IconButton
125+
className="components-toolbar__control"
126+
label={ __( 'Edit image' ) }
127+
icon="edit"
128+
onClick={ open }
129+
/>
130+
) }
131+
/>
132132
</Toolbar>
133133
</BlockControls>,
134134
<InspectorControls key="inspector">

‎blocks/library/cover-image/test/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import '../';
55
import { blockEditRender } from 'blocks/test/helpers';
66

7-
jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
7+
jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
88

99
describe( 'core/cover-image', () => {
1010
test( 'block edit matches snapshot', () => {

‎blocks/library/gallery/block.js‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ import { filter } from 'lodash';
99
import { Component } from '@wordpress/element';
1010
import { __ } from '@wordpress/i18n';
1111
import { mediaUpload } from '@wordpress/utils';
12-
import { Dashicon, DropZone, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
12+
import { IconButton, Button, DropZone, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
1313

1414
/**
1515
* Internal dependencies
1616
*/
17-
import MediaUploadButton from '../../media-upload-button';
17+
import MediaUpload from '../../media-upload';
1818
import InspectorControls from '../../inspector-controls';
1919
import RangeControl from '../../inspector-controls/range-control';
2020
import ToggleControl from '../../inspector-controls/toggle-control';
@@ -146,7 +146,6 @@ class GalleryBlock extends Component {
146146
/>
147147
);
148148

149-
const editButtonLabel = __( 'Edit Gallery' );
150149
const controls = (
151150
focus && (
152151
<BlockControls key="controls">
@@ -156,29 +155,28 @@ class GalleryBlock extends Component {
156155
/>
157156
{ !! images.length && (
158157
<Toolbar>
159-
<MediaUploadButton
160-
buttonProps={ {
161-
className: 'components-icon-button components-toolbar__control',
162-
'aria-label': editButtonLabel,
163-
} }
158+
<MediaUpload
164159
onSelect={ this.onSelectImages }
165160
type="image"
166161
multiple
167162
gallery
168163
value={ images.map( ( img ) => img.id ) }
169-
tooltip={ editButtonLabel }
170-
>
171-
<Dashicon icon="edit" />
172-
</MediaUploadButton>
164+
render={ ( { open } ) => (
165+
<IconButton
166+
className="components-toolbar__control"
167+
label={ __( 'Edit Gallery' ) }
168+
icon="edit"
169+
onClick={ open }
170+
/>
171+
) }
172+
/>
173173
</Toolbar>
174174
) }
175175
</BlockControls>
176176
)
177177
);
178178

179179
if ( images.length === 0 ) {
180-
const uploadButtonProps = { isLarge: true };
181-
182180
return [
183181
controls,
184182
<Placeholder
@@ -197,15 +195,17 @@ class GalleryBlock extends Component {
197195
>
198196
{ __( 'Upload' ) }
199197
</FormFileUpload>
200-
<MediaUploadButton
201-
buttonProps={ uploadButtonProps }
198+
<MediaUpload
202199
onSelect={ this.onSelectImages }
203200
type="image"
204201
multiple
205202
gallery
206-
>
207-
{ __( 'Add from Media Library' ) }
208-
</MediaUploadButton>
203+
render={ ( { open } ) => (
204+
<Button isLarge onClick={ open }>
205+
{ __( 'Add from Media Library' ) }
206+
</Button>
207+
) }
208+
/>
209209
</Placeholder>,
210210
];
211211
}

‎blocks/library/gallery/test/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import '../';
55
import { blockEditRender } from 'blocks/test/helpers';
66

7-
jest.mock( 'blocks/media-upload-button', () => () => '*** Mock(Media upload button) ***' );
7+
jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
88

99
describe( 'core/gallery', () => {
1010
test( 'block edit matches snapshot', () => {

‎blocks/library/image/block.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n';
1717
import { Component, compose } from '@wordpress/element';
1818
import { createMediaFromFile, getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
1919
import {
20-
Dashicon,
20+
IconButton,
2121
Toolbar,
2222
withAPIData,
2323
withContext,
@@ -28,7 +28,7 @@ import {
2828
*/
2929
import Editable from '../../editable';
3030
import ImagePlaceHolder from '../../image-placeholder';
31-
import MediaUploadButton from '../../media-upload-button';
31+
import MediaUpload from '../../media-upload';
3232
import InspectorControls from '../../inspector-controls';
3333
import TextControl from '../../inspector-controls/text-control';
3434
import SelectControl from '../../inspector-controls/select-control';
@@ -116,7 +116,6 @@ class ImageBlock extends Component {
116116
const figureStyle = width ? { width } : {};
117117
const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1 && ( ! viewPort.isExtraSmall() );
118118

119-
const editButtonLabel = __( 'Edit image' );
120119
const controls = (
121120
focus && (
122121
<BlockControls key="controls">
@@ -126,18 +125,19 @@ class ImageBlock extends Component {
126125
/>
127126

128127
<Toolbar>
129-
<MediaUploadButton
130-
buttonProps={ {
131-
className: 'components-icon-button components-toolbar__control',
132-
'aria-label': editButtonLabel,
133-
} }
128+
<MediaUpload
134129
onSelect={ this.onSelectImage }
135130
type="image"
136131
value={ id }
137-
tooltip={ editButtonLabel }
138-
>
139-
<Dashicon icon="edit" />
140-
</MediaUploadButton>
132+
render={ ( { open } ) => (
133+
<IconButton
134+
className="components-toolbar__control"
135+
label={ __( 'Edit image' ) }
136+
icon="edit"
137+
onClick={ open }
138+
/>
139+
) }
140+
/>
141141
<UrlInputButton onChange={ this.onSetHref } url={ href } />
142142
</Toolbar>
143143
</BlockControls>

‎blocks/library/video/index.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { Component } from '@wordpress/element';
1515
import './style.scss';
1616
import './editor.scss';
1717
import { registerBlockType } from '../../api';
18-
import MediaUploadButton from '../../media-upload-button';
18+
import MediaUpload from '../../media-upload';
1919
import Editable from '../../editable';
2020
import BlockControls from '../../block-controls';
2121
import BlockAlignmentToolbar from '../../block-alignment-toolbar';
@@ -134,14 +134,16 @@ registerBlockType( 'core/video', {
134134
{ __( 'Use URL' ) }
135135
</Button>
136136
</form>
137-
<MediaUploadButton
138-
buttonProps={ { isLarge: true } }
137+
<MediaUpload
139138
onSelect={ onSelectVideo }
140139
type="video"
141140
id={ id }
142-
>
143-
{ __( 'Add from Media Library' ) }
144-
</MediaUploadButton>
141+
render={ ( { open } ) => (
142+
<Button isLarge onClick={ open } >
143+
{ __( 'Add from Media Library' ) }
144+
</Button>
145+
) }
146+
/>
145147
</Placeholder>,
146148
];
147149
}

0 commit comments

Comments
 (0)