Media replace flow

A component that implements a replacement flow for various media objects. It is used to allow various blocks that use media to have a toolbar button for replacing it. I offers several options, such as:

• replace from Media Library
• replace using an URL
• replace by uploading new media

This component should be used as a child of a <BlockControls> component.

Props

mediaURL

The URL of the media.

• Type: string
• Required: Yes

mediaId

The Id of the attachment post type for the current media.

• Type: Int
• Required: No

allowedTypes

A list of media types allowed to replace the current media.

• Type: Array
• Required: Yes

accept

Comma delimited list of MIME types accepted for upload.

• Type: string
• Required: Yes

onFilesUpload

Callback called before to start to upload the files. It receives an array with the files to upload before to the final process.

onSelect

Callback used when media is replaced from the Media Library or when a new media is uploaded. It is called with one argument media which is an object with all the media details.

• Type: func
• Required: Yes

onSelectURL

Callback used when media is replaced with an URL. It is called with one argument newURL which is a string containing the new URL.

• Type: func
• Required: No

onError

Callback called when an upload error happens and receives an error message as an argument.

• Type: func
• Required: No

name

A string value will be used as the label of the replace button. It can also accept Phrasing content elements(ex. span).

• Type: string|Element
• Required: No
• Default: Replace

createNotice

Creates a media replace notice.

• Type: func
• Required: No

removeNotice

Removes a media replace notice.

• Type: func
• Required: No

children

• Type: Element
• Required: No

If passed, children are rendered inside the dropdown.

children

• Type: Element | func
• Required: No

If passed, children are rendered inside the dropdown. If a function is provided for this prop, it will receive an object with the onClose prop as an argument.

renderToggle

• Type: func
• Required: No

If passed, it will be used to render the provided button instead of the default one. It should accept and pass through button props to a button element.