1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { BlockControls, MediaPlaceholder, MediaUpload } from '@wordpress/editor';
import { Fragment } from '@wordpress/element';
import { get } from 'lodash';
import { IconButton, Toolbar, ToolbarButton } from '@wordpress/components';
const onSelectMedia = setAttributes => media =>
setAttributes( {
featuredMediaId: get( media, 'id', 0 ),
featuredMediaUrl: get( media, 'url', null ),
featuredMediaTitle: get( media, 'title', null ),
} );
export default ( { featuredMediaId, featuredMediaUrl, featuredMediaTitle, setAttributes } ) => {
if ( ! featuredMediaId ) {
return (
<MediaPlaceholder
icon="format-image"
labels={ {
title: __( 'Product Image', 'jetpack' ),
} }
accept="image/*"
allowedTypes={ [ 'image' ] }
onSelect={ onSelectMedia( setAttributes ) }
/>
);
}
return (
<div>
<Fragment>
<BlockControls>
<Toolbar>
<MediaUpload
onSelect={ onSelectMedia( setAttributes ) }
allowedTypes={ [ 'image' ] }
value={ featuredMediaId }
render={ ( { open } ) => (
<IconButton
className="components-toolbar__control"
label={ __( 'Edit Image', 'jetpack' ) }
icon="edit"
onClick={ open }
/>
) }
/>
<ToolbarButton
icon={ 'trash' }
title={ __( 'Remove Image', 'jetpack' ) }
onClick={ () =>
setAttributes( {
featuredMediaId: null,
featuredMediaUrl: null,
featuredMediaTitle: null,
} )
}
/>
</Toolbar>
</BlockControls>
<figure>
<img src={ featuredMediaUrl } alt={ featuredMediaTitle } />
</figure>
</Fragment>
</div>
);
};
|
GitWeb
