@wordpress/block-editor
Version:
242 lines (241 loc) • 7.96 kB
JavaScript
// packages/block-editor/src/hooks/block-fields/media/index.js
import {
Button,
Icon,
__experimentalGrid as Grid
} from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { focus } from "@wordpress/dom";
import { useRef } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import {
audio as audioIcon,
image as imageIcon,
media as mediaIcon,
video as videoIcon,
reset as resetIcon
} from "@wordpress/icons";
import MediaReplaceFlow from "../../../components/media-replace-flow/index.mjs";
import MediaUploadCheck from "../../../components/media-upload/check.mjs";
import { useInspectorPopoverPlacement } from "../use-inspector-popover-placement.mjs";
import { getMediaSelectKey } from "../../../store/private-keys.mjs";
import { store as blockEditorStore } from "../../../store/index.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var focusToggleButton = (containerRef) => {
window.requestAnimationFrame(() => {
const [toggleButton] = focus.tabbable.find(containerRef?.current);
if (!toggleButton) {
return;
}
toggleButton.focus();
});
};
function MediaThumbnail({ data, field, attachment, config }) {
const { allowedTypes = [], multiple = false } = config || {};
if (multiple) {
return "todo multiple";
}
if (attachment?.media_type === "image" || attachment?.poster) {
return /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__media-thumbnail", children: /* @__PURE__ */ jsx(
"img",
{
alt: "",
width: 20,
height: 20,
src: attachment.media_type === "image" ? attachment.source_url : attachment.poster
}
) });
}
if (allowedTypes.length === 1) {
const value = field.getValue({ item: data });
const url = value?.url;
if (allowedTypes[0] === "image" && url) {
return /* @__PURE__ */ jsx("div", { className: "block-editor-content-only-controls__media-thumbnail", children: /* @__PURE__ */ jsx("img", { alt: "", width: 20, height: 20, src: url }) });
}
let icon;
if (allowedTypes[0] === "image") {
icon = imageIcon;
} else if (allowedTypes[0] === "video") {
icon = videoIcon;
} else if (allowedTypes[0] === "audio") {
icon = audioIcon;
} else {
icon = mediaIcon;
}
if (icon) {
return /* @__PURE__ */ jsx(Icon, { icon, size: 20 });
}
}
return /* @__PURE__ */ jsx(Icon, { icon: mediaIcon, size: 20 });
}
function Media({ data, field, onChange, config = {} }) {
const { popoverProps } = useInspectorPopoverPlacement({
isControl: true
});
const value = field.getValue({ item: data });
const {
allowedTypes = [],
multiple = false,
useFeaturedImage = false
} = config;
const id = value?.id;
const url = value?.url;
const attachment = useSelect(
(select) => {
if (!id) {
return;
}
const settings = select(blockEditorStore).getSettings();
const getMedia = settings[getMediaSelectKey];
if (!getMedia) {
return;
}
return getMedia(select, id);
},
[id]
);
let chooseItemLabel;
if (allowedTypes.length === 1) {
const allowedType = allowedTypes[0];
if (allowedType === "image") {
chooseItemLabel = __("Image");
} else if (allowedType === "video") {
chooseItemLabel = __("Video");
} else if (allowedType === "application") {
chooseItemLabel = __("File");
} else {
chooseItemLabel = __("Media");
}
} else {
chooseItemLabel = __("Media");
}
const containerRef = useRef();
return /* @__PURE__ */ jsx(MediaUploadCheck, { children: /* @__PURE__ */ jsxs(
"div",
{
ref: containerRef,
className: "block-editor-content-only-controls",
children: [
/* @__PURE__ */ jsx(
MediaReplaceFlow,
{
className: "block-editor-content-only-controls__media-replace-flow",
allowedTypes,
mediaId: id,
mediaURL: url,
multiple,
popoverProps,
onReset: () => {
onChange(
field.setValue({
item: data,
value: {}
})
);
},
...useFeaturedImage && {
useFeaturedImage: !!value?.featuredImage,
onToggleFeaturedImage: () => {
onChange(
field.setValue({
item: data,
value: {
featuredImage: !value?.featuredImage
}
})
);
}
},
onSelect: (selectedMedia) => {
if (selectedMedia.id && selectedMedia.url) {
const newValue = {
...selectedMedia,
mediaType: selectedMedia.media_type
};
if (useFeaturedImage) {
newValue.featuredImage = false;
}
onChange(
field.setValue({
item: data,
value: newValue
})
);
}
},
renderToggle: (buttonProps) => /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
className: "block-editor-content-only-controls__media",
...buttonProps,
children: /* @__PURE__ */ jsxs(
Grid,
{
rowGap: 0,
columnGap: 8,
templateColumns: "20px 1fr",
className: "block-editor-content-only-controls__media-row",
children: [
url && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
MediaThumbnail,
{
attachment,
field,
data,
config
}
),
/* @__PURE__ */ jsx("span", {
className: "block-editor-content-only-controls__media-title",
// TODO - truncate long titles or url smartly (e.g. show filename).
children: attachment?.title?.raw && attachment?.title?.raw !== "" ? attachment?.title?.raw : url
})
] }),
!url && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"span",
{
className: "block-editor-content-only-controls__media-placeholder",
style: {
width: "20px",
height: "20px"
}
}
),
/* @__PURE__ */ jsx("span", { className: "block-editor-content-only-controls__media-title", children: chooseItemLabel })
] })
]
}
)
}
)
}
),
url && /* @__PURE__ */ jsx(
Button,
{
label: __("Reset"),
className: "block-editor-content-only-controls__media-reset",
size: "small",
icon: resetIcon,
onClick: () => {
onChange(
field.setValue({
item: data,
value: {}
})
);
focusToggleButton(containerRef);
}
}
)
]
}
) });
}
export {
Media as default
};
//# sourceMappingURL=index.mjs.map