utils: mediaUpload: Pass all available properties in the media object (…

…#9704)
WordPress · Oct 4, 2018 · 638605c · 638605c
1 parent a01b009
commit 638605c
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 8 deletions.
diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md
@@ -22,6 +22,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
 - `getMetaBoxes` selector (`core/edit-post`) has been removed. Use `getActiveMetaBoxLocations` selector (`core/edit-post`) instead.
 - `getMetaBox` selector (`core/edit-post`) has been removed. Use `isMetaBoxLocationActive` selector (`core/edit-post`) instead.
 - Attribute type coercion has been removed. Omit the source to preserve type via serialized comment demarcation.
+- `mediaDetails` in object passed to `onFileChange` callback of `wp.editor.mediaUpload`. Please use `media_details` property instead.
 
 ## 4.1.0
 

diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -44,6 +44,11 @@ export function defaultColumnsNumber( attributes ) {
 	return Math.min( 3, attributes.images.length );
 }
 
+const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'link', 'url' ];
+export const pickRelevantMediaFiles = ( image ) => {
+	return pick( image, RELEVANT_MEDIA_FIELDS );
+};
+
 class GalleryEdit extends Component {
 	constructor() {
 		super( ...arguments );
@@ -87,7 +92,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 ) => pickRelevantMediaFiles( image ) ),
 		} );
 	}
 
@@ -135,8 +140,9 @@ class GalleryEdit extends Component {
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList: files,
 			onFileChange: ( images ) => {
+				const imagesNormalized = images.map( ( image ) => pickRelevantMediaFiles( image ) );
 				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
@@ -14,7 +14,7 @@ import { createBlobURL } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import { default as edit, defaultColumnsNumber } from './edit';
+import { default as edit, defaultColumnsNumber, pickRelevantMediaFiles } from './edit';
 
 const blockAttributes = {
 	images: {
@@ -134,7 +134,9 @@ export const settings = {
 					} );
 					mediaUpload( {
 						filesList: files,
-						onFileChange: ( images ) => onChange( block.clientId, { images } ),
+						onFileChange: ( images ) => onChange( block.clientId, {
+							images: images.map( ( image ) => pickRelevantMediaFiles( image ) ),
+						} ),
 						allowedTypes: [ 'image' ],
 					} );
 					return block;

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -55,6 +55,7 @@ const LINK_DESTINATION_MEDIA = 'media';
 const LINK_DESTINATION_ATTACHMENT = 'attachment';
 const LINK_DESTINATION_CUSTOM = 'custom';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+export const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'url' ];
 
 class ImageEdit extends Component {
 	constructor() {
@@ -87,7 +88,7 @@ class ImageEdit extends Component {
 				mediaUpload( {
 					filesList: [ file ],
 					onFileChange: ( [ image ] ) => {
-						setAttributes( { ...image } );
+						setAttributes( { ...pick( image, RELEVANT_MEDIA_FIELDS ) } );
 					},
 					allowedTypes: ALLOWED_MEDIA_TYPES,
 				} );
@@ -121,7 +122,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
@@ -33,6 +33,11 @@ export default function( {
 	onFileChange,
 	allowedType,
 } ) {
+	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
@@ -10,6 +10,7 @@ import {
 	includes,
 	map,
 	noop,
+	omit,
 	some,
 	startsWith,
 } from 'lodash';
@@ -163,10 +164,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: {},