@wordpress/block-library
Version:
Block library for the WordPress editor.
74 lines (73 loc) • 2.47 kB
JavaScript
/**
* WordPress dependencies
*/
import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button, BaseControl, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { useRef } from '@wordpress/element';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function PosterImage({
poster,
setAttributes,
instanceId
}) {
const posterImageButton = useRef();
const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = ['image'];
const videoPosterDescription = `video-block__poster-image-description-${instanceId}`;
function onSelectPoster(image) {
setAttributes({
poster: image.url
});
}
function onRemovePoster() {
setAttributes({
poster: undefined
});
// Move focus back to the Media Upload button.
posterImageButton.current.focus();
}
return /*#__PURE__*/_jsx(ToolsPanelItem, {
label: __('Poster image'),
isShownByDefault: true,
hasValue: () => !!poster,
onDeselect: () => {
setAttributes({
poster: ''
});
},
children: /*#__PURE__*/_jsx(MediaUploadCheck, {
children: /*#__PURE__*/_jsxs("div", {
className: "editor-video-poster-control",
children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
children: __('Poster image')
}), /*#__PURE__*/_jsx(MediaUpload, {
title: __('Select poster image'),
onSelect: onSelectPoster,
allowedTypes: VIDEO_POSTER_ALLOWED_MEDIA_TYPES,
render: ({
open
}) => /*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
variant: "primary",
onClick: open,
ref: posterImageButton,
"aria-describedby": videoPosterDescription,
children: !poster ? __('Select') : __('Replace')
})
}), /*#__PURE__*/_jsx("p", {
id: videoPosterDescription,
hidden: true,
children: poster ? sprintf(/* translators: %s: poster image URL. */
__('The current poster image url is %s'), poster) : __('There is no poster image currently selected')
}), !!poster && /*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
onClick: onRemovePoster,
variant: "tertiary",
children: __('Remove')
})]
})
})
});
}
export default PosterImage;
//# sourceMappingURL=poster-image.js.map