Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

utils: mediaUpload: Pass all available properties in the media object #9704

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/reference/deprecated.md
Expand Up @@ -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

Expand Down
10 changes: 8 additions & 2 deletions packages/block-library/src/gallery/edit.js
Expand Up @@ -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 );
Expand Down Expand Up @@ -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 ) ),
} );
}

Expand Down Expand Up @@ -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,
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/gallery/index.js
Expand Up @@ -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: {
Expand Down Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions packages/block-library/src/image/edit.js
Expand Up @@ -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() {
Expand Down Expand Up @@ -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,
} );
Expand Down Expand Up @@ -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,
} );
Expand Down
5 changes: 5 additions & 0 deletions packages/editor/src/utils/media-upload/index.js
Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions packages/editor/src/utils/media-upload/media-upload.js
Expand Up @@ -10,6 +10,7 @@ import {
includes,
map,
noop,
omit,
some,
startsWith,
} from 'lodash';
Expand Down Expand Up @@ -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: {},
Expand Down