Skip to content

Commit

Permalink
Use the editor settings to pass a mediaUpload handler (#14115)
Browse files Browse the repository at this point in the history
* Use the editor settings to pass a mediaUpload handler

* Update media block snapshots
  • Loading branch information
youknowriad authored Feb 27, 2019
1 parent 1ed9995 commit 05570ff
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 149 deletions.
32 changes: 0 additions & 32 deletions packages/block-library/src/audio/test/__snapshots__/index.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -38,38 +38,6 @@ exports[`core/audio block edit matches snapshot 1`] = `
<div
class="components-placeholder__fieldset"
>
<div
class="components-drop-zone"
/>
<div
class="components-form-file-upload"
>
<button
class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-upload"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
/>
</svg>
Upload
</button>
<input
accept="audio/*"
style="display:none"
type="file"
/>
</div>
<div
class="editor-media-placeholder__url-input-container"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,39 +37,6 @@ exports[`core/cover block edit matches snapshot 1`] = `
</div>
<div
class="components-placeholder__fieldset"
>
<div
class="components-drop-zone"
/>
<div
class="components-form-file-upload"
>
<button
class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-upload"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
/>
</svg>
Upload
</button>
<input
accept="image/*,video/*"
style="display:none"
type="file"
/>
</div>
</div>
/>
</div>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -39,40 +39,6 @@ exports[`core/gallery block edit matches snapshot 1`] = `
</div>
<div
class="components-placeholder__fieldset"
>
<div
class="components-drop-zone"
/>
<div
class="components-form-file-upload"
>
<button
class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-upload"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
/>
</svg>
Upload
</button>
<input
accept="image/*"
multiple=""
style="display:none"
type="file"
/>
</div>
</div>
/>
</div>
`;
32 changes: 0 additions & 32 deletions packages/block-library/src/video/test/__snapshots__/index.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -38,38 +38,6 @@ exports[`core/video block edit matches snapshot 1`] = `
<div
class="components-placeholder__fieldset"
>
<div
class="components-drop-zone"
/>
<div
class="components-form-file-upload"
>
<button
class="components-button components-icon-button editor-media-placeholder__button has-text is-button is-default is-large"
type="button"
>
<svg
aria-hidden="true"
class="dashicon dashicons-upload"
focusable="false"
height="20"
role="img"
viewBox="0 0 20 20"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 14V8H5l5-6 5 6h-3v6H8zm-2 2v-6H4v8h12.01v-8H14v6H6z"
/>
</svg>
Upload
</button>
<input
accept="video/*"
style="display:none"
type="file"
/>
</div>
<div
class="editor-media-placeholder__url-input-container"
>
Expand Down
38 changes: 22 additions & 16 deletions packages/editor/src/components/media-placeholder/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
withFilters,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { Component, Fragment } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';

Expand All @@ -26,7 +26,6 @@ import { withSelect } from '@wordpress/data';
import MediaUpload from '../media-upload';
import MediaUploadCheck from '../media-upload/check';
import URLPopover from '../url-popover';
import { mediaUpload } from '../../utils/';

const InsertFromURLPopover = ( { src, onChange, onSubmit, onClose } ) => (
<URLPopover onClose={ onClose }>
Expand Down Expand Up @@ -104,7 +103,7 @@ export class MediaPlaceholder extends Component {
}

onFilesUpload( files ) {
const { onSelect, multiple, onError, allowedTypes } = this.props;
const { onSelect, multiple, onError, allowedTypes, mediaUpload } = this.props;
const setMedia = multiple ? onSelect : ( [ media ] ) => onSelect( media );
mediaUpload( {
allowedTypes,
Expand Down Expand Up @@ -136,6 +135,7 @@ export class MediaPlaceholder extends Component {
notices,
allowedTypes = [],
hasUploadPermissions,
mediaUpload,
} = this.props;

const {
Expand Down Expand Up @@ -202,19 +202,23 @@ export class MediaPlaceholder extends Component {
notices={ notices }
>
<MediaUploadCheck>
<DropZone
onFilesDrop={ this.onFilesUpload }
onHTMLDrop={ onHTMLDrop }
/>
<FormFileUpload
isLarge
className="editor-media-placeholder__button"
onChange={ this.onUpload }
accept={ accept }
multiple={ multiple }
>
{ __( 'Upload' ) }
</FormFileUpload>
{ !! mediaUpload && (
<Fragment>
<DropZone
onFilesDrop={ this.onFilesUpload }
onHTMLDrop={ onHTMLDrop }
/>
<FormFileUpload
isLarge
className="editor-media-placeholder__button"
onChange={ this.onUpload }
accept={ accept }
multiple={ multiple }
>
{ __( 'Upload' ) }
</FormFileUpload>
</Fragment>
) }
<MediaUpload
gallery={ multiple && this.onlyAllowsImages() }
multiple={ multiple }
Expand Down Expand Up @@ -259,9 +263,11 @@ export class MediaPlaceholder extends Component {

const applyWithSelect = withSelect( ( select ) => {
const { canUser } = select( 'core' );
const { getEditorSettings } = select( 'core/block-editor' );

return {
hasUploadPermissions: defaultTo( canUser( 'create', 'media' ), true ),
mediaUpload: getEditorSettings().__experimentalMediaUpload,
};
} );

Expand Down
3 changes: 3 additions & 0 deletions packages/editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { BlockEditorProvider } from '@wordpress/block-editor';
* Internal dependencies
*/
import transformStyles from '../../editor-styles';
import { mediaUpload } from '../../utils';

class EditorProvider extends Component {
constructor( props ) {
super( ...arguments );
Expand Down Expand Up @@ -57,6 +59,7 @@ class EditorProvider extends Component {
onChange: onMetaChange,
},
__experimentalReusableBlocks: reusableBlocks,
__experimentalMediaUpload: mediaUpload,
};
}

Expand Down

0 comments on commit 05570ff

Please sign in to comment.