From c473fbecef572fec971ab534a42e0934a821cbf9 Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 7 Sep 2018 22:36:32 +0100 Subject: [PATCH 1/2] utils: mediaUpload: Pass all available properties in the media object. --- packages/block-library/src/gallery/edit.js | 7 +++++-- packages/block-library/src/gallery/index.js | 8 +++++--- packages/block-library/src/image/edit.js | 5 +++-- packages/editor/src/utils/media-upload/index.js | 5 +++++ packages/editor/src/utils/media-upload/media-upload.js | 4 ++-- 5 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index ae9e54d8be27d..c419579d30928 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -44,6 +44,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 ); @@ -87,7 +89,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 ) ), } ); } @@ -135,8 +137,9 @@ class GalleryEdit extends Component { allowedTypes: ALLOWED_MEDIA_TYPES, 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 index a39fb9bb3fbe8..5fa499901a3d6 100644 --- 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: { @@ -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 ) => pick( image, RELEVANT_MEDIA_FIELDS ) ), + } ), allowedTypes: [ 'image' ], } ); return block; diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index b20d84eed4c7f..124f10210a190 100644 --- 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 index 1b5d104faa38b..bb0a1e0b0dcfb 100644 --- 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 index 6fad25c59b5da..b7158e7d2227f 100644 --- 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: {}, From 5c097742b47afce7260f403f7c4eb47d7d68e601 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 4 Oct 2018 17:14:15 -0400 Subject: [PATCH 2/2] picker refactor --- docs/reference/deprecated.md | 1 + packages/block-library/src/gallery/edit.js | 9 ++++++--- packages/block-library/src/gallery/index.js | 6 +++--- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/reference/deprecated.md b/docs/reference/deprecated.md index 689fd8cbb8b54..dad9290025683 100644 --- 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 index c419579d30928..e70b0489f6475 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -44,7 +44,10 @@ export function defaultColumnsNumber( attributes ) { return Math.min( 3, attributes.images.length ); } -export const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'link', 'url' ]; +const RELEVANT_MEDIA_FIELDS = [ 'alt', 'caption', 'id', 'link', 'url' ]; +export const pickRelevantMediaFiles = ( image ) => { + return pick( image, RELEVANT_MEDIA_FIELDS ); +}; class GalleryEdit extends Component { constructor() { @@ -89,7 +92,7 @@ class GalleryEdit extends Component { onSelectImages( images ) { this.props.setAttributes( { - images: images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) ), + images: images.map( ( image ) => pickRelevantMediaFiles( image ) ), } ); } @@ -137,7 +140,7 @@ class GalleryEdit extends Component { allowedTypes: ALLOWED_MEDIA_TYPES, filesList: files, onFileChange: ( images ) => { - const imagesNormalized = images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) ); + const imagesNormalized = images.map( ( image ) => pickRelevantMediaFiles( image ) ); setAttributes( { images: currentImages.concat( imagesNormalized ), } ); diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index 5fa499901a3d6..c702ea415ef47 100644 --- 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, pick } from 'lodash'; +import { filter, every } from 'lodash'; /** * WordPress dependencies @@ -14,7 +14,7 @@ import { createBlobURL } from '@wordpress/blob'; /** * Internal dependencies */ -import { default as edit, defaultColumnsNumber, RELEVANT_MEDIA_FIELDS } from './edit'; +import { default as edit, defaultColumnsNumber, pickRelevantMediaFiles } from './edit'; const blockAttributes = { images: { @@ -135,7 +135,7 @@ export const settings = { mediaUpload( { filesList: files, onFileChange: ( images ) => onChange( block.clientId, { - images: images.map( ( image ) => pick( image, RELEVANT_MEDIA_FIELDS ) ), + images: images.map( ( image ) => pickRelevantMediaFiles( image ) ), } ), allowedTypes: [ 'image' ], } );