diff --git a/projects/plugins/jetpack/changelog/story-block-add-more-media-options b/projects/plugins/jetpack/changelog/story-block-add-more-media-options new file mode 100644 index 000000000000..3eae07bed566 --- /dev/null +++ b/projects/plugins/jetpack/changelog/story-block-add-more-media-options @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Comment: Story block: Add more media options to choose from in the editor diff --git a/projects/plugins/jetpack/extensions/blocks/story/edit.js b/projects/plugins/jetpack/extensions/blocks/story/edit.js index 3a77f6fc2d42..8a989e43e81c 100644 --- a/projects/plugins/jetpack/extensions/blocks/story/edit.js +++ b/projects/plugins/jetpack/extensions/blocks/story/edit.js @@ -24,7 +24,7 @@ import './editor.scss'; const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ]; -export const pickRelevantMediaFiles = ( media, sizeSlug = 'large' ) => { +export const pickRelevantMediaFiles = media => { const mediaProps = pick( media, [ 'alt', 'title', @@ -37,8 +37,8 @@ export const pickRelevantMediaFiles = ( media, sizeSlug = 'large' ) => { 'height', ] ); mediaProps.url = - get( media, [ 'sizes', sizeSlug, 'url' ] ) || - get( media, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) || + get( media, [ 'sizes', 'large', 'url' ] ) || + get( media, [ 'media_details', 'sizes', 'large', 'source_url' ] ) || get( media, [ 'media_details', 'videopress', 'original' ] ) || get( media, [ 'media_details', 'original', 'url' ] ) || media.url; @@ -63,7 +63,16 @@ export default withNotices( function StoryEdit( { const lockName = 'storyBlockLock'; const onSelectMedia = newMediaFiles => { - const allMedia = newMediaFiles.map( file => pickRelevantMediaFiles( file ) ); + const allMedia = newMediaFiles + .map( newMedia => { + // MediaPlaceholder passes only the media ids as value to MediaUpload, so we're only getting those back + if ( ! isNaN( newMedia ) ) { + const existingMedia = mediaFiles.find( mediaFile => mediaFile.id === newMedia ); + return existingMedia || { id: newMedia }; + } + return newMedia; + } ) + .map( pickRelevantMediaFiles ); const uploadedMedias = allMedia.filter( media => ! isBlobURL( media.url ) ); // prevent saving blob urls in mediaFiles block attribute if ( allMedia.length !== uploadedMedias.length ) { diff --git a/projects/plugins/jetpack/extensions/shared/external-media/index.js b/projects/plugins/jetpack/extensions/shared/external-media/index.js index 7d5fac3fdb10..090cd306d115 100644 --- a/projects/plugins/jetpack/extensions/shared/external-media/index.js +++ b/projects/plugins/jetpack/extensions/shared/external-media/index.js @@ -36,6 +36,7 @@ if ( isCurrentUserConnected() && 'function' === typeof useBlockEditContext ) { 'core/media-text', 'jetpack/image-compare', 'jetpack/slideshow', + 'jetpack/story', 'jetpack/tiled-gallery', ];