utils: mediaUpload: Pass all available properties in the media object.

WordPress · Sep 28, 2018 · 6ea7a84 · 6ea7a84
1 parent 5c2085a
commit 6ea7a84
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 10 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -43,6 +43,8 @@ export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
 
+export const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'link', 'url' ];
+
 class GalleryEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -86,7 +88,7 @@ class GalleryEdit extends Component {
 
 	onSelectImages( images ) {
 		this.props.setAttributes( {
-			images: images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'link', 'url' ] ) ),
+			images: images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) ),
 		} );
 	}
 
@@ -134,8 +136,9 @@ class GalleryEdit extends Component {
 			allowedType: 'image',
 			filesList: files,
 			onFileChange: ( images ) => {
+				const imagesNormalized = images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) );
 				setAttributes( {
-					images: currentImages.concat( images ),
+					images: currentImages.concat( imagesNormalized ),
 				} );
 			},
 			onError: noticeOperations.createErrorNotice,

diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, every } from 'lodash';
+import { filter, every, pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,7 +14,7 @@ import { createBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { default as edit, defaultColumnsNumber } from './edit';
+import { default as edit, defaultColumnsNumber, RELEVANT_MEDIA_FIELDS } from './edit';
 
 const blockAttributes = {
 	images: {
@@ -135,7 +135,9 @@ export const settings = {
 					} );
 					mediaUpload( {
 						filesList: files,
-						onFileChange: ( images ) => onChange( block.clientId, { images } ),
+						onFileChange: ( images ) => onChange( block.clientId, {
+							images: images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) ),
+						} ),
 						allowedType: 'image',
 					} );
 					return block;

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -54,6 +54,7 @@ const LINK_DESTINATION_NONE = 'none';
 const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const LINK_DESTINATION_CUSTOM = 'custom';
+export const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'url' ];
 
 class ImageEdit extends Component {
 	constructor() {
@@ -86,7 +87,7 @@ class ImageEdit extends Component {
 				mediaUpload( {
 					filesList: [ file ],
 					onFileChange: ( [ image ] ) => {
-						setAttributes( { ...image } );
+						setAttributes( { ...pick( image, RELEVANT_MEDIA_FIELDS ) } );
 					},
 					allowedType: 'image',
 				} );
@@ -120,7 +121,7 @@ class ImageEdit extends Component {
 			return;
 		}
 		this.props.setAttributes( {
-			...pick( media, [ 'alt', 'id', 'caption', 'url' ] ),
+			...pick( media, RELEVANT_MEDIA_FIELDS ),
 			width: undefined,
 			height: undefined,
 		} );

diff --git a/packages/editor/src/utils/media-upload/index.js b/packages/editor/src/utils/media-upload/index.js
@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { select } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -31,6 +32,11 @@ export default function( {
 	onError = noop,
 	onFileChange,
 } ) {
+	deprecated( 'mediaDetails in object passed to onFileChange callback of wp.editor.mediaUpload', {
+		version: '4.2',
+		alternative: 'media_details property containing exactly the property as returned by the rest api',
+	} );
+
 	const {
 		getCurrentPostId,
 		getEditorSettings,

diff --git a/packages/editor/src/utils/media-upload/media-upload.js b/packages/editor/src/utils/media-upload/media-upload.js
@@ -1,7 +1,7 @@
 /**
  * External Dependencies
  */
-import { compact, flatMap, forEach, get, has, includes, map, noop, startsWith } from 'lodash';
+import { compact, flatMap, forEach, get, has, includes, map, noop, omit, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -139,10 +139,9 @@ export function mediaUpload( {
 		return createMediaFromFile( mediaFile, additionalData )
 			.then( ( savedMedia ) => {
 				const mediaObject = {
+					...omit( savedMedia, [ 'alt_text', 'source_url' ] ),
 					alt: savedMedia.alt_text,
 					caption: get( savedMedia, [ 'caption', 'raw' ], '' ),
-					id: savedMedia.id,
-					link: savedMedia.link,
 					title: savedMedia.title.raw,
 					url: savedMedia.source_url,
 					mediaDetails: {},