diff options
Diffstat (limited to 'plugins/jetpack/extensions/blocks/simple-payments/featured-media.js')
-rw-r--r-- | plugins/jetpack/extensions/blocks/simple-payments/featured-media.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/plugins/jetpack/extensions/blocks/simple-payments/featured-media.js b/plugins/jetpack/extensions/blocks/simple-payments/featured-media.js new file mode 100644 index 00000000..c0da48a9 --- /dev/null +++ b/plugins/jetpack/extensions/blocks/simple-payments/featured-media.js @@ -0,0 +1,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> + ); +}; |