@wordpress/block-editor
Version:
108 lines (62 loc) • 2.43 kB
Markdown
# 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.