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(