The MediaPicker
component is a WordPress Gutenberg block editor component designed for handling media selection and configuration. It provides an interface for choosing and configuring images and videos within the block editor.
import { MediaPicker } from '@digitalsilk/block-editor-components';
const YourComponent = (props) => {
const { attributes, setAttributes } = props;
const { mediaData } = attributes;
const handleMediaSelect = (selectedMedia) => {
// Handle the selected media data
setAttributes({ mediaData: selectedMedia });
};
return (
<MediaPicker
onSelect={handleMediaSelect}
media={mediaData}
// other props...
/>
);
};
A function that will be called when a media item is selected. It receives the selected media data.
An object representing the initial media data. It should have the following structure:
{
id: 0,
mediaType: 'image',
lazyLoad: true,
imageSize: 'full',
videoSource: 'internal',
videoUrl: '',
focalPoint: {
x: 0.5,
y: 0.5,
},
videoControls: {
autoplay: false,
isMuted: true,
showControls: true,
posterId: 0,
posterSize: 'full',
},
}
A boolean indicating whether to display the focal point picker. Defaults to true
.
A boolean indicating whether to allow switching between image and video types. Defaults to false
.
A string representing the label for the control panel. Defaults to 'Media Settings'.
A boolean indicating whether to allow selecting multiple media items. Defaults to false
.
A boolean indicating whether the component is used as a control in <InspectorControls/>
. Defaults to true
.
A boolean indicating whether to show block controls. Defaults to true
.
A boolean indicating whether the media is used as a background. Defaults to false
.
<MediaPicker
onSelect={handleMediaSelect}
media={mediaData}
displayFocalPicker={true}
allowMediaTypeSwitch={false}
controlPanelLabel="Custom Settings"
multiple={true}
isControl={false}
showBlockControls={true}
isBackground={false}
/>
"attributes": {
"mediaData": {
"type": "object",
"default": {
"id": 0,
"mediaType": "image",
"lazyLoad": true,
"srcset": true,
"imageSize": "full",
"videoSource": "internal",
"videoUrl": "",
"videoControls": {
"autoplay": false,
"isMuted": true,
"showControls": true,
"posterId": 0,
"posterSize": "full"
},
"focalPoint": {
"x": 0.5,
"y": 0.5
}
}
},
}