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



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


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;


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


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

const ALLOWED_MEDIA_TYPES = [ 'audio' ];

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


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


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


Whether to allow multiple selections or not.

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


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

  • Type: Number|Array
  • Required: No


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

  • Type: Function
  • Required: Yes


Title displayed in the media modal.

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


CSS class added to the media modal frame.

  • Type: String
  • Required: No


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