@wordpress/block-library
Version:
Block library for the WordPress editor.
133 lines (131 loc) • 4.88 kB
JavaScript
/**
* External dependencies
*/
import clsx from 'clsx';
/**
* WordPress dependencies
*/
import { MediaUpload, MediaUploadCheck, store as blockEditorStore } from '@wordpress/block-editor';
import { store as noticesStore } from '@wordpress/notices';
import { Button, BaseControl, DropZone, Spinner, __experimentalHStack as HStack, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
import { isBlobURL } from '@wordpress/blob';
import { __, sprintf } from '@wordpress/i18n';
import { useRef, useState } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import { useSelect, useDispatch } from '@wordpress/data';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = ['image'];
function PosterImage({
poster,
onChange
}) {
const posterButtonRef = useRef();
const [isLoading, setIsLoading] = useState(false);
const descriptionId = useInstanceId(PosterImage, 'block-library-poster-image-description');
const {
getSettings
} = useSelect(blockEditorStore);
const {
createErrorNotice
} = useDispatch(noticesStore);
const onDropFiles = filesList => {
getSettings().mediaUpload({
allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
filesList,
onFileChange: ([image]) => {
if (isBlobURL(image?.url)) {
setIsLoading(true);
return;
}
if (image) {
onChange(image);
}
setIsLoading(false);
},
onError: message => {
createErrorNotice(message, {
id: 'poster-image-upload-notice',
type: 'snackbar'
});
setIsLoading(false);
},
multiple: false
});
};
const getPosterButtonContent = () => {
if (!poster && isLoading) {
return /*#__PURE__*/_jsx(Spinner, {});
}
return !poster ? __('Set poster image') : __('Replace');
};
return /*#__PURE__*/_jsx(MediaUploadCheck, {
children: /*#__PURE__*/_jsxs(ToolsPanelItem, {
label: __('Poster image'),
isShownByDefault: true,
hasValue: () => !!poster,
onDeselect: () => onChange(undefined),
children: [/*#__PURE__*/_jsx(BaseControl.VisualLabel, {
children: __('Poster image')
}), /*#__PURE__*/_jsx(MediaUpload, {
title: __('Select poster image'),
onSelect: onChange,
allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
render: ({
open
}) => /*#__PURE__*/_jsxs("div", {
className: "block-library-poster-image__container",
children: [poster && /*#__PURE__*/_jsxs(Button, {
__next40pxDefaultSize: true,
onClick: open,
"aria-haspopup": "dialog",
"aria-label": __('Edit or replace the poster image.'),
className: "block-library-poster-image__preview",
disabled: isLoading,
accessibleWhenDisabled: true,
children: [/*#__PURE__*/_jsx("img", {
src: poster,
alt: __('Poster image preview'),
className: "block-library-poster-image__preview-image"
}), isLoading && /*#__PURE__*/_jsx(Spinner, {})]
}), /*#__PURE__*/_jsxs(HStack, {
className: clsx('block-library-poster-image__actions', {
'block-library-poster-image__actions-select': !poster
}),
children: [/*#__PURE__*/_jsx(Button, {
__next40pxDefaultSize: true,
onClick: open,
ref: posterButtonRef,
className: "block-library-poster-image__action",
"aria-describedby": descriptionId,
"aria-haspopup": "dialog",
variant: !poster ? 'secondary' : undefined,
disabled: isLoading,
accessibleWhenDisabled: true,
children: getPosterButtonContent()
}), /*#__PURE__*/_jsx("p", {
id: descriptionId,
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: () => {
onChange(undefined);
// Move focus back to the Media Upload button.
posterButtonRef.current.focus();
},
className: "block-library-poster-image__action",
disabled: isLoading,
accessibleWhenDisabled: true,
children: __('Remove')
})]
}), /*#__PURE__*/_jsx(DropZone, {
onFilesDrop: onDropFiles
})]
})
})]
})
});
}
export default PosterImage;
//# sourceMappingURL=poster-image.js.map