diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index ec00cccbd534a..17e264b09fd4a 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import Button from 'components/button'; import Placeholder from 'components/placeholder'; /** @@ -10,6 +9,7 @@ import Placeholder from 'components/placeholder'; import './style.scss'; import { registerBlock, query } from '../../api'; import Editable from '../../editable'; +import MediaUploadButton from '../../media-upload-button'; const { attr, children } = query; @@ -78,15 +78,22 @@ registerBlock( 'core/image', { const { url, alt, caption } = attributes; if ( ! url ) { + const uploadButtonProps = { isLarge: true }; + const setMediaUrl = ( media ) => setAttributes( { url: media.url } ); return ( - + ); } diff --git a/blocks/media-upload-button/index.js b/blocks/media-upload-button/index.js new file mode 100644 index 0000000000000..beb6d4ca63243 --- /dev/null +++ b/blocks/media-upload-button/index.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +import { Component } from 'element'; +import { __ } from 'i18n'; +import Button from 'components/button'; + +class MediaUploadButton extends Component { + constructor( { multiple = false, type } ) { + super( ...arguments ); + this.openModal = this.openModal.bind( this ); + this.onSelect = this.onSelect.bind( this ); + const frameConfig = { + title: __( 'Select or Upload a media' ), + button: { + text: __( 'Select' ), + }, + multiple, + }; + if ( !! type ) { + frameConfig.library = { type }; + } + this.frame = wp.media( frameConfig ); + + // When an image is selected in the media frame... + this.frame.on( 'select', this.onSelect ); + } + + componentDidMount() { + if ( !! this.props[ 'auto-open' ] ) { + this.frame.open(); + } + } + + componentWillUnmount() { + this.frame.remove(); + } + + onSelect() { + const { onSelect, multiple = false } = this.props; + // Get media attachment details from the frame state + const attachment = this.frame.state().get( 'selection' ).toJSON(); + onSelect( multiple ? attachment : attachment[ 0 ] ); + } + + openModal() { + this.frame.open(); + } + + render() { + const { children, buttonProps } = this.props; + + return ( + + ); + } +} + +export default MediaUploadButton; diff --git a/index.php b/index.php index f558c6ac2a6a1..1da7f74b99c7b 100644 --- a/index.php +++ b/index.php @@ -282,6 +282,7 @@ function gutenberg_scripts_and_styles( $hook ) { /** * Scripts */ + wp_enqueue_media(); // The editor code itself. wp_enqueue_script(