diff --git a/packages/block-library/src/audio/edit.js b/packages/block-library/src/audio/edit.js index a518f077011e6..164b8c22c9a7b 100644 --- a/packages/block-library/src/audio/edit.js +++ b/packages/block-library/src/audio/edit.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { getBlobByURL, isBlobURL } from '@wordpress/blob'; +import { compose } from '@wordpress/compose'; import { Disabled, IconButton, @@ -18,9 +19,9 @@ import { MediaPlaceholder, RichText, } from '@wordpress/block-editor'; -import { mediaUpload } from '@wordpress/editor'; import { Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { withSelect } from '@wordpress/data'; /** * Internal dependencies @@ -49,7 +50,12 @@ class AudioEdit extends Component { } componentDidMount() { - const { attributes, noticeOperations, setAttributes } = this.props; + const { + attributes, + mediaUpload, + noticeOperations, + setAttributes, + } = this.props; const { id, src = '' } = attributes; if ( ! id && isBlobURL( src ) ) { @@ -207,5 +213,13 @@ class AudioEdit extends Component { /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ } } - -export default withNotices( AudioEdit ); +export default compose( [ + withSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + const { __experimentalMediaUpload } = getSettings(); + return { + mediaUpload: __experimentalMediaUpload, + }; + } ), + withNotices, +] )( AudioEdit ); diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js index f06d2be38c98a..a27d22a326f47 100644 --- a/packages/block-library/src/file/edit.js +++ b/packages/block-library/src/file/edit.js @@ -27,7 +27,6 @@ import { MediaPlaceholder, RichText, } from '@wordpress/block-editor'; -import { mediaUpload } from '@wordpress/editor'; import { Component } from '@wordpress/element'; import { __, _x } from '@wordpress/i18n'; @@ -56,7 +55,12 @@ class FileEdit extends Component { } componentDidMount() { - const { attributes, noticeOperations, setAttributes } = this.props; + const { + attributes, + mediaUpload, + noticeOperations, + setAttributes, + } = this.props; const { downloadButtonText, href } = attributes; // Upload a file drag-and-dropped into the editor @@ -248,9 +252,12 @@ class FileEdit extends Component { export default compose( [ withSelect( ( select, props ) => { const { getMedia } = select( 'core' ); + const { getSettings } = select( 'core/block-editor' ); + const { __experimentalMediaUpload } = getSettings(); const { id } = props.attributes; return { media: id === undefined ? undefined : getMedia( id ), + mediaUpload: __experimentalMediaUpload, }; } ), withNotices, diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index c5aebed551849..f8d1db665208f 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -2,11 +2,12 @@ * External dependencies */ import classnames from 'classnames'; -import { filter, map } from 'lodash'; +import { every, filter, forEach, map } from 'lodash'; /** * WordPress dependencies */ +import { compose } from '@wordpress/compose'; import { IconButton, PanelBody, @@ -25,6 +26,8 @@ import { } from '@wordpress/block-editor'; import { Component } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; +import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob'; +import { withSelect } from '@wordpress/data'; /** * Internal dependencies @@ -174,6 +177,20 @@ class GalleryEdit extends Component { } ); } + componentDidMount() { + const { attributes, mediaUpload } = this.props; + const { images } = attributes; + if ( every( images, ( { url } ) => isBlobURL( url ) ) ) { + const filesList = map( images, ( { url } ) => getBlobByURL( url ) ); + forEach( images, ( { url } ) => revokeBlobURL( url ) ); + mediaUpload( { + filesList, + onFileChange: this.onSelectImages, + allowedTypes: [ 'image' ], + } ); + } + } + componentDidUpdate( prevProps ) { // Deselect images when deselecting the block if ( ! this.props.isSelected && prevProps.isSelected ) { @@ -312,5 +329,16 @@ class GalleryEdit extends Component { ); } } +export default compose( [ + withSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + const { + __experimentalMediaUpload, + } = getSettings(); -export default withNotices( GalleryEdit ); + return { + mediaUpload: __experimentalMediaUpload, + }; + } ), + withNotices, +] )( GalleryEdit ); diff --git a/packages/block-library/src/gallery/transforms.js b/packages/block-library/src/gallery/transforms.js index af8d5d164c10e..ea752fe296bd9 100644 --- a/packages/block-library/src/gallery/transforms.js +++ b/packages/block-library/src/gallery/transforms.js @@ -1,13 +1,12 @@ /** * External dependencies */ -import { filter, every, map } from 'lodash'; +import { filter, every } from 'lodash'; /** * WordPress dependencies */ import { createBlock } from '@wordpress/blocks'; -import { mediaUpload } from '@wordpress/editor'; import { createBlobURL } from '@wordpress/blob'; /** @@ -89,25 +88,12 @@ const transforms = { isMatch( files ) { return files.length !== 1 && every( files, ( file ) => file.type.indexOf( 'image/' ) === 0 ); }, - transform( files, onChange ) { + transform( files ) { const block = createBlock( 'core/gallery', { images: files.map( ( file ) => pickRelevantMediaFiles( { url: createBlobURL( file ), } ) ), } ); - mediaUpload( { - filesList: files, - onFileChange: ( images ) => { - const imagesAttr = images.map( - pickRelevantMediaFiles, - ); - onChange( block.clientId, { - ids: map( imagesAttr, 'id' ), - images: imagesAttr, - } ); - }, - allowedTypes: [ 'image' ], - } ); return block; }, }, diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index ecc498e2988fc..42b271903fe04 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -43,7 +43,6 @@ import { MediaPlaceholder, RichText, } from '@wordpress/block-editor'; -import { mediaUpload } from '@wordpress/editor'; import { Component } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import { getPath } from '@wordpress/url'; @@ -126,7 +125,12 @@ class ImageEdit extends Component { } componentDidMount() { - const { attributes, setAttributes, noticeOperations } = this.props; + const { + attributes, + mediaUpload, + noticeOperations, + setAttributes, + } = this.props; const { id, url = '' } = attributes; if ( isTemporaryImage( id, url ) ) { @@ -721,13 +725,19 @@ export default compose( [ const { getMedia } = select( 'core' ); const { getSettings } = select( 'core/block-editor' ); const { id } = props.attributes; - const { maxWidth, isRTL, imageSizes } = getSettings(); + const { + __experimentalMediaUpload, + imageSizes, + isRTL, + maxWidth, + } = getSettings(); return { image: id ? getMedia( id ) : null, maxWidth, isRTL, imageSizes, + mediaUpload: __experimentalMediaUpload, }; } ), withViewportMatch( { isLargeViewport: 'medium' } ), diff --git a/packages/block-library/src/video/edit.js b/packages/block-library/src/video/edit.js index f8380b7edeafc..9931508d2c6c3 100644 --- a/packages/block-library/src/video/edit.js +++ b/packages/block-library/src/video/edit.js @@ -22,7 +22,6 @@ import { MediaUploadCheck, RichText, } from '@wordpress/block-editor'; -import { mediaUpload } from '@wordpress/editor'; import { Component, createRef } from '@wordpress/element'; import { __, @@ -32,6 +31,9 @@ import { compose, withInstanceId, } from '@wordpress/compose'; +import { + withSelect, +} from '@wordpress/data'; /** * Internal dependencies @@ -61,7 +63,12 @@ class VideoEdit extends Component { } componentDidMount() { - const { attributes, noticeOperations, setAttributes } = this.props; + const { + attributes, + mediaUpload, + noticeOperations, + setAttributes, + } = this.props; const { id, src = '' } = attributes; if ( ! id && isBlobURL( src ) ) { const file = getBlobByURL( src ); @@ -312,6 +319,13 @@ class VideoEdit extends Component { } export default compose( [ + withSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + const { __experimentalMediaUpload } = getSettings(); + return { + mediaUpload: __experimentalMediaUpload, + }; + } ), withNotices, withInstanceId, ] )( VideoEdit );