@wordpress/block-library
Version:
Block library for the WordPress editor.
72 lines (71 loc) • 2.34 kB
JavaScript
// packages/block-library/src/query/edit/inspector-controls/format-controls.js
import { FormTokenField } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { store as coreStore } from "@wordpress/core-data";
import { __ } from "@wordpress/i18n";
import { jsx } from "react/jsx-runtime";
var POST_FORMATS = [
{ value: "aside", label: __("Aside") },
{ value: "audio", label: __("Audio") },
{ value: "chat", label: __("Chat") },
{ value: "gallery", label: __("Gallery") },
{ value: "image", label: __("Image") },
{ value: "link", label: __("Link") },
{ value: "quote", label: __("Quote") },
{ value: "standard", label: __("Standard") },
{ value: "status", label: __("Status") },
{ value: "video", label: __("Video") }
].sort((a, b) => {
const normalizedA = a.label.toUpperCase();
const normalizedB = b.label.toUpperCase();
if (normalizedA < normalizedB) {
return -1;
}
if (normalizedA > normalizedB) {
return 1;
}
return 0;
});
function formatNamesToValues(names, formats) {
return names.map((name) => {
return formats.find(
(item) => item.label.toLocaleLowerCase() === name.toLocaleLowerCase()
)?.value;
}).filter(Boolean);
}
function FormatControls({ onChange, query: { format } }) {
const normalizedFormats = Array.isArray(format) ? format : [format];
const { supportedFormats } = useSelect((select) => {
const themeSupports = select(coreStore).getThemeSupports();
return {
supportedFormats: themeSupports.formats
};
}, []);
const formats = POST_FORMATS.filter(
(item) => supportedFormats.includes(item.value)
);
const values = normalizedFormats.map(
(name) => formats.find((item) => item.value === name)?.label
).filter(Boolean);
const suggestions = formats.filter((item) => !normalizedFormats.includes(item.value)).map((item) => item.label);
return /* @__PURE__ */ jsx(
FormTokenField,
{
label: __("Formats"),
value: values,
suggestions,
onChange: (newValues) => {
onChange({
format: formatNamesToValues(newValues, formats)
});
},
__experimentalShowHowTo: false,
__experimentalExpandOnFocus: true,
__next40pxDefaultSize: true
}
);
}
export {
FormatControls as default
};
//# sourceMappingURL=format-controls.js.map