Add media upload button to Galleries

blocks/library/gallery/gallery-image.js

@@ -10,7 +10,7 @@ export default function GalleryImage( props ) {
 			break;
 	}
 
-	const image = <img src={ props.img.url } alt={ props.img.alt } />;
+	const image = <img src={ props.img.url } alt={ props.img.alt } data-id={ props.img.id } />;
 
 	return (
 		<figure className="blocks-gallery-image">

blocks/library/gallery/index.js

@@ -2,14 +2,15 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Toolbar, Placeholder } from '@wordpress/components';
+import { mediaUpload } from '@wordpress/utils';
+import { Dashicon, Toolbar, Placeholder, FormFileUpload } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import './style.scss';
-import { registerBlockType } from '../../api';
+import { registerBlockType, source } from '../../api';
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
 import RangeControl from '../../inspector-controls/range-control';
@@ -20,44 +21,15 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import GalleryImage from './gallery-image';
 import BlockDescription from '../../block-description';
 
+const { query, attr } = source;
+const isGallery = true;
 const MAX_COLUMNS = 8;
 const linkOptions = [
 	{ value: 'attachment', label: __( 'Attachment Page' ) },
 	{ value: 'media', label: __( 'Media File' ) },
 	{ value: 'none', label: __( 'None' ) },
 ];
 
-const editMediaLibrary = ( attributes, setAttributes ) => {
-	const frameConfig = {
-		frame: 'post',
-		title: __( 'Update Gallery media' ),
-		button: {
-			text: __( 'Select' ),
-		},
-		multiple: true,
-		state: 'gallery-edit',
-		selection: new wp.media.model.Selection( attributes.images, { multiple: true } ),
-	};
-
-	const editFrame = wp.media( frameConfig );
-
-	// the frameConfig settings dont carry to other state modals
-	// so requires setting this attribute directory to not show settings
-	editFrame.state( 'gallery-edit' ).attributes.displaySettings = false;
-
-	function updateFn() {
-		setAttributes( {
-			images: this.frame.state().attributes.library.models.map( ( a ) => {
-				return a.attributes;
-			} ),
-		} );
-	}
-
-	editFrame.on( 'insert', updateFn );
-	editFrame.state( 'gallery-edit' ).on( 'update', updateFn );
-	editFrame.open( 'gutenberg-gallery' );
-};
-
 function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
@@ -76,6 +48,11 @@ registerBlockType( 'core/gallery', {
 		images: {
 			type: 'array',
 			default: [],
+			source: query( 'div.wp-block-gallery figure.blocks-gallery-image img', {
+				url: attr( 'src' ),
+				alt: attr( 'alt' ),
+				id: attr( 'data-id' ),
+			} ),
 		},
 		columns: {
 			type: 'number',
@@ -104,6 +81,12 @@ registerBlockType( 'core/gallery', {
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const toggleImageCrop = () => setAttributes( { imageCrop: ! imageCrop } );
 
+		const onSelectImages = ( imgs ) => setAttributes( { images: imgs } );
+
+		const uploadFromFiles = ( event ) => {
+			mediaUpload( event.target.files, setAttributes, isGallery );
+		};
+
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -112,18 +95,29 @@ registerBlockType( 'core/gallery', {
 						onChange={ updateAlignment }
 					/>
 					{ !! images.length && (
-						<Toolbar controls={ [ {
-							icon: 'edit',
-							title: __( 'Edit Gallery' ),
-							onClick: () => editMediaLibrary( attributes, setAttributes ),
-						} ] } />
+						<Toolbar>
+							<li>
+								<MediaUploadButton
+									buttonProps={ {
+										className: 'components-icon-button components-toolbar__control',
+										'aria-label': __( 'Edit Gallery' ),
+									} }
+									onSelect={ onSelectImages }
+									type="image"
+									multiple
+									gallery
+									value={ images.map( ( img ) => img.id ) }
+								>
+									<Dashicon icon="edit" />
+								</MediaUploadButton>
+							</li>
+						</Toolbar>
 					) }
 				</BlockControls>
 			)
 		);
 
 		if ( images.length === 0 ) {
-			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			const uploadButtonProps = { isLarge: true };
 
 			return [
@@ -134,12 +128,21 @@ registerBlockType( 'core/gallery', {
 					icon="format-gallery"
 					label={ __( 'Gallery' ) }
 					className={ className }>
+					<FormFileUpload
+						isLarge
+						className="wp-block-image__upload-button"
+						onChange={ uploadFromFiles }
+						accept="image/*"
+						multiple="true"
+					>
+						{ __( 'Upload' ) }
+					</FormFileUpload>
 					<MediaUploadButton
 						buttonProps={ uploadButtonProps }
-						onSelect={ setMediaUrl }
+						onSelect={ onSelectImages }
 						type="image"
-						multiple="true"
-						gallery="true"
+						multiple
+						gallery
 					>
 						{ __( 'Insert from Media Library' ) }
 					</MediaUploadButton>

blocks/library/image/index.js

@@ -8,6 +8,7 @@ import ResizableBox from 'react-resizable-box';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { mediaUpload } from '@wordpress/utils';
 import { Placeholder, Dashicon, Toolbar, DropZone, FormFileUpload } from '@wordpress/components';
 
 /**
@@ -108,37 +109,7 @@ registerBlockType( 'core/image', {
 		const isResizable = [ 'wide', 'full' ].indexOf( align ) === -1;
 		const uploadButtonProps = { isLarge: true };
 		const onSetHref = ( value ) => setAttributes( { href: value } );
-		const uploadFromFiles = ( files ) => {
-			const media = files[ 0 ];
-
-			// Only allow image uploads
-			if ( ! /^image\//.test( media.type ) ) {
-				return;
-			}
-
-			// Use File API to assign temporary URL from upload
-			setAttributes( {
-				url: window.URL.createObjectURL( media ),
-			} );
-
-			// Create upload payload
-			const data = new window.FormData();
-			data.append( 'file', media );
-
-			new wp.api.models.Media().save( null, {
-				data: data,
-				contentType: false,
-			} ).done( ( savedMedia ) => {
-				setAttributes( {
-					id: savedMedia.id,
-					url: savedMedia.source_url,
-				} );
-			} ).fail( () => {
-				// Reset to empty on failure.
-				// TODO: Better failure messaging
-				setAttributes( { url: null } );
-			} );
-		};
+		const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAttributes );
 
 		const controls = (
 			focus && (
@@ -183,7 +154,7 @@ registerBlockType( 'core/image', {
 					<FormFileUpload
 						isLarge
 						className="wp-block-image__upload-button"
-						onChange={ ( event ) => uploadFromFiles( event.target.files ) }
+						onChange={ uploadFromFiles }
 						accept="image/*"
 					>
 						{ __( 'Upload' ) }

blocks/test/fixtures/core__gallery.html

@@ -1,4 +1,4 @@
-<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
+<!-- wp:core/gallery -->
 <div class="wp-block-gallery">
 	<figure class="blocks-gallery-image">
 		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />

blocks/test/fixtures/core__gallery.json

@@ -7,34 +7,10 @@
             "align": "none",
             "images": [
                 {
-                    "sizes": {
-                        "full": {
-                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                            "height": 1080,
-                            "width": 810,
-                            "orientation": "portrait"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 1,
                     "url": "https://cldup.com/uuUqE_dXzy.jpg",
                     "alt": "title"
                 },
                 {
-                    "sizes": {
-                        "full": {
-                            "url": "http://google.com/hi.png",
-                            "height": 1080,
-                            "width": 1440,
-                            "orientation": "landscape"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 2,
                     "url": "http://google.com/hi.png",
                     "alt": "title"
                 }

blocks/test/fixtures/core__gallery.parsed.json

@@ -1,42 +1,7 @@
 [
     {
         "blockName": "core/gallery",
-        "attrs": {
-            "images": [
-                {
-                    "sizes": {
-                        "full": {
-                            "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                            "height": 1080,
-                            "width": 810,
-                            "orientation": "portrait"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 1,
-                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
-                    "alt": "title"
-                },
-                {
-                    "sizes": {
-                        "full": {
-                            "url": "http://google.com/hi.png",
-                            "height": 1080,
-                            "width": 1440,
-                            "orientation": "landscape"
-                        }
-                    },
-                    "mime": "image/jpeg",
-                    "type": "image",
-                    "subtype": "jpeg",
-                    "id": 2,
-                    "url": "http://google.com/hi.png",
-                    "alt": "title"
-                }
-            ]
-        },
+        "attrs": null,
         "rawContent": "\n<div class=\"wp-block-gallery\">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
     },
     {

blocks/test/fixtures/core__gallery.serialized.html

@@ -1,4 +1,4 @@
-<!-- wp:core/gallery {"images":[{"sizes":{"full":{"url":"https://cldup.com/uuUqE_dXzy.jpg","height":1080,"width":810,"orientation":"portrait"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":1,"url":"https://cldup.com/uuUqE_dXzy.jpg","alt":"title"},{"sizes":{"full":{"url":"http://google.com/hi.png","height":1080,"width":1440,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":2,"url":"http://google.com/hi.png","alt":"title"}]} -->
+<!-- wp:core/gallery -->
 <div class="wp-block-gallery">
     <figure class="blocks-gallery-image">
         <img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />

blocks/test/fixtures/core__gallery__columns.html

@@ -0,0 +1,10 @@
+<!-- wp:core/gallery {"columns":"1"} -->
+<div class="wp-block-gallery columns-1 ">
+	<figure class="blocks-gallery-image">
+		<img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
+	</figure>
+	<figure class="blocks-gallery-image">
+		<img src="http://google.com/hi.png" alt="title" />
+	</figure>
+</div>
+<!-- /wp:core/gallery -->

blocks/test/fixtures/core__gallery__columns.json

@@ -0,0 +1,24 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/gallery",
+        "isValid": false,
+        "attributes": {
+            "align": "none",
+            "images": [
+                {
+                    "url": "https://cldup.com/uuUqE_dXzy.jpg",
+                    "alt": "title"
+                },
+                {
+                    "url": "http://google.com/hi.png",
+                    "alt": "title"
+                }
+            ],
+            "columns": 1,
+            "imageCrop": true,
+            "linkTo": "none"
+        },
+        "originalContent": "<div class=\"wp-block-gallery columns-1 \">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>"
+    }
+]

blocks/test/fixtures/core__gallery__columns.parsed.json

@@ -0,0 +1,13 @@
+[
+    {
+        "blockName": "core/gallery",
+        "attrs": {
+            "columns": "1"
+        },
+        "rawContent": "\n<div class=\"wp-block-gallery columns-1 \">\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"title\" />\n\t</figure>\n\t<figure class=\"blocks-gallery-image\">\n\t\t<img src=\"http://google.com/hi.png\" alt=\"title\" />\n\t</figure>\n</div>\n"
+    },
+    {
+        "attrs": {},
+        "rawContent": "\n"
+    }
+]

blocks/test/fixtures/core__gallery__columns.serialized.html

@@ -0,0 +1,10 @@
+<!-- wp:core/gallery {"columns":1} -->
+<div class="wp-block-gallery columns-1 ">
+    <figure class="blocks-gallery-image">
+        <img src="https://cldup.com/uuUqE_dXzy.jpg" alt="title" />
+    </figure>
+    <figure class="blocks-gallery-image">
+        <img src="http://google.com/hi.png" alt="title" />
+    </figure>
+</div>
+<!-- /wp:core/gallery -->

utils/index.js

@@ -3,3 +3,5 @@ import * as nodetypes from './nodetypes';
 
 export { keycodes };
 export { nodetypes };
+
+export * from './mediaupload';