@wordpress/editor
Version:
Enhanced block editor for WordPress posts.
92 lines (91 loc) • 3.25 kB
JavaScript
// packages/editor/src/components/post-format/index.js
import { __, sprintf } from "@wordpress/i18n";
import { Button, RadioControl } from "@wordpress/components";
import { useDispatch, useSelect } from "@wordpress/data";
import { useInstanceId } from "@wordpress/compose";
import { store as coreStore } from "@wordpress/core-data";
import PostFormatCheck from "./check.mjs";
import { store as editorStore } from "../../store/index.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var POST_FORMATS = [
{ id: "aside", caption: __("Aside") },
{ id: "audio", caption: __("Audio") },
{ id: "chat", caption: __("Chat") },
{ id: "gallery", caption: __("Gallery") },
{ id: "image", caption: __("Image") },
{ id: "link", caption: __("Link") },
{ id: "quote", caption: __("Quote") },
{ id: "standard", caption: __("Standard") },
{ id: "status", caption: __("Status") },
{ id: "video", caption: __("Video") }
].sort((a, b) => {
const normalizedA = a.caption.toUpperCase();
const normalizedB = b.caption.toUpperCase();
if (normalizedA < normalizedB) {
return -1;
}
if (normalizedA > normalizedB) {
return 1;
}
return 0;
});
function PostFormat() {
const instanceId = useInstanceId(PostFormat);
const postFormatSelectorId = `post-format-selector-${instanceId}`;
const { postFormat, suggestedFormat, supportedFormats } = useSelect(
(select) => {
const { getEditedPostAttribute, getSuggestedPostFormat } = select(editorStore);
const _postFormat = getEditedPostAttribute("format");
const themeSupports = select(coreStore).getThemeSupports();
return {
postFormat: _postFormat ?? "standard",
suggestedFormat: getSuggestedPostFormat(),
supportedFormats: themeSupports.formats
};
},
[]
);
const formats = POST_FORMATS.filter((format) => {
return supportedFormats?.includes(format.id) || postFormat === format.id;
});
const suggestion = formats.find(
(format) => format.id === suggestedFormat
);
const { editPost } = useDispatch(editorStore);
const onUpdatePostFormat = (format) => editPost({ format });
return /* @__PURE__ */ jsx(PostFormatCheck, { children: /* @__PURE__ */ jsxs("div", { className: "editor-post-format", children: [
/* @__PURE__ */ jsx(
RadioControl,
{
className: "editor-post-format__options",
label: __("Post Format"),
selected: postFormat,
onChange: (format) => onUpdatePostFormat(format),
id: postFormatSelectorId,
options: formats.map((format) => ({
label: format.caption,
value: format.id
})),
hideLabelFromVision: true
}
),
suggestion && suggestion.id !== postFormat && /* @__PURE__ */ jsx("p", { className: "editor-post-format__suggestion", children: /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
variant: "link",
onClick: () => onUpdatePostFormat(suggestion.id),
children: sprintf(
/* translators: %s: post format */
__("Apply suggested format: %s"),
suggestion.caption
)
}
) })
] }) });
}
export {
POST_FORMATS,
PostFormat as default
};
//# sourceMappingURL=index.mjs.map