Switch branches/tags
@wordpress/wordcount@2.0.2 @wordpress/wordcount@2.0.1 @wordpress/wordcount@2.0.0 @wordpress/wordcount@1.1.3 @wordpress/wordcount@1.1.2 @wordpress/wordcount@1.1.1 @wordpress/wordcount@1.1.0 @wordpress/viewport@2.0.5 @wordpress/viewport@2.0.4 @wordpress/viewport@2.0.3 @wordpress/viewport@2.0.2 @wordpress/viewport@2.0.1 @wordpress/viewport@2.0.0 @wordpress/viewport@1.0.4 @wordpress/viewport@1.0.3 @wordpress/viewport@1.0.2 @wordpress/viewport@1.0.1 @wordpress/viewport@1.0.0 @wordpress/url@2.1.0 @wordpress/url@2.0.2 @wordpress/url@2.0.1 @wordpress/url@2.0.0 @wordpress/url@1.2.3 @wordpress/url@1.2.2 @wordpress/url@1.2.1 @wordpress/url@1.2.0 @wordpress/token-list@1.0.2 @wordpress/token-list@1.0.1 @wordpress/token-list@1.0.0 @wordpress/shortcode@2.0.2 @wordpress/shortcode@2.0.1 @wordpress/shortcode@2.0.0 @wordpress/shortcode@1.0.3 @wordpress/shortcode@1.0.2 @wordpress/shortcode@1.0.1 @wordpress/shortcode@1.0.0 @wordpress/shortcode@1.0.0-alpha.3 @wordpress/shortcode@1.0.0-alpha.2 @wordpress/scripts@2.4.0 @wordpress/scripts@2.3.1 @wordpress/scripts@2.3.0 @wordpress/scripts@2.2.1 @wordpress/scripts@2.2.0 @wordpress/scripts@2.1.0 @wordpress/scripts@2.0.3 @wordpress/scripts@2.0.2 @wordpress/scripts@2.0.1 @wordpress/scripts@2.0.0 @wordpress/rich-text@1.0.1 @wordpress/rich-text@1.0.0 @wordpress/rich-text@1.0.0-beta.2 @wordpress/rich-text@1.0.0-beta.1 @wordpress/redux-routine@3.0.3 @wordpress/redux-routine@3.0.2 @wordpress/redux-routine@3.0.1 @wordpress/redux-routine@3.0.0 @wordpress/redux-routine@2.0.0 @wordpress/redux-routine@1.0.0 @wordpress/postcss-themes@1.0.4 @wordpress/postcss-themes@1.0.3 @wordpress/postcss-themes@1.0.2 @wordpress/postcss-themes@1.0.1 @wordpress/postcss-themes@1.0.0 @wordpress/postcss-themes@1.0.0-alpha.3 @wordpress/postcss-themes@1.0.0-alpha.2 @wordpress/postcss-themes@1.0.0-alpha.1 @wordpress/postcss-themes@1.0.0-alpha.0 @wordpress/plugins@2.0.5 @wordpress/plugins@2.0.4 @wordpress/plugins@2.0.3 @wordpress/plugins@2.0.2 @wordpress/plugins@2.0.1 @wordpress/plugins@2.0.0 @wordpress/plugins@1.0.4 @wordpress/plugins@1.0.3 @wordpress/plugins@1.0.2 @wordpress/plugins@1.0.1 @wordpress/plugins@1.0.0 @wordpress/plugins@1.0.0-alpha.3 @wordpress/plugins@1.0.0-alpha.2 @wordpress/nux@2.0.5 @wordpress/nux@2.0.4 @wordpress/nux@2.0.3 @wordpress/nux@2.0.2 @wordpress/nux@2.0.1 @wordpress/nux@2.0.0 @wordpress/nux@1.1.1 @wordpress/nux@1.1.0 @wordpress/nux@1.0.2 @wordpress/nux@1.0.1 @wordpress/nux@1.0.0 @wordpress/npm-package-json-lint-config@1.1.5 @wordpress/npm-package-json-lint-config@1.1.4 @wordpress/npm-package-json-lint-config@1.1.3 @wordpress/npm-package-json-lint-config@1.1.2 @wordpress/npm-package-json-lint-config@1.1.1 @wordpress/npm-package-json-lint-config@1.1.0 @wordpress/list-reusable-blocks@1.1.3 @wordpress/list-reusable-blocks@1.1.2 @wordpress/list-reusable-blocks@1.1.1
Nothing to show
Find file History
youknowriad Extract the edit-post module as a reusable package (#10429)
* Extract the edit-post module as a reusable block

* Update manifest generator to use only npm packages

* Docs: Update documentation for the new edit post package

* Removing TinyMCE related styles for table which is no longer used
I confirmed with @iseulde, thanks btw.

* Enforce minor version update as part of public release for list-reusable-block package

* Update the title of the list-reusable-blocks package in README file
Latest commit 3d3c2a4 Oct 9, 2018

README.md

MediaUpload

MediaUpload is a React component used to render a button that opens a the WordPress media modal.

Setup

This is a placeholder component necessary to make it possible to provide an integration with the core blocks that handle media files. By default it renders nothing but it provides a way to have it overridden with the components.MediaUpload filter.

import { addFilter } from '@wordpress/hooks';
import MediaUpload from './media-upload';

const replaceMediaUpload = () => MediaUpload;

addFilter(
	'editor.MediaUpload',
	'core/edit-post/components/media-upload/replace-media-upload',
	replaceMediaUpload
);

You can check how this component is implemented for the edit post page using wp.media module in edit-post.

Usage

import { Button } from '@wordpress/components';
import { MediaUpload } from '@wordpress/editor';

const ALLOWED_MEDIA_TYPES = [ 'audio' ];

function MyMediaUploader() {
	return (
		<MediaUpload
			onSelect={ ( media ) => console.log( 'selected ' + media.length ) }
			allowedTypes={ ALLOWED_MEDIA_TYPES }
			value={ mediaId }
			render={ ( { open } ) => (
				<Button onClick={ open }>
					Open Media Library
				</Button>
			) }
		/>
	);
}

Props

The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.

allowedTypes

Array with the types of the media to upload/select from the media library. Each type is a string that can contain the general mime type e.g: 'image', 'audio', 'text', or the complete mime type e.g: 'audio/mpeg', 'image/gif'. If allowedTypes is unset all mime types should be allowed.

  • Type: Array
  • Required: No

multiple

Whether to allow multiple selections or not.

  • Type: Boolean
  • Required: No
  • Default: false

value

Media ID (or media IDs if multiple is true) to be selected by default when opening the media library.

  • Type: Number|Array
  • Required: No

onSelect

Callback called when the media modal is closed, the selected media are passed as an argument.

  • Type: Function
  • Required: Yes

title

Title displayed in the media modal.

  • Type: String
  • Required: No
  • Default: Select or Upload Media

modalClass

CSS class added to the media modal frame.

  • Type: String
  • Required: No

render

A callback invoked to render the Button opening the media library.

  • Type: Function
  • Required: Yes

The first argument of the callback is an object containing the following properties:

  • open: A function opening the media modal when called