@wordpress/block-editor
Version:
87 lines (86 loc) • 2 kB
JavaScript
// packages/block-editor/src/components/text-alignment-control/index.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
alignLeft,
alignCenter,
alignRight,
alignJustify
} from "@wordpress/icons";
import { useMemo } from "@wordpress/element";
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon
} from "@wordpress/components";
import { jsx } from "react/jsx-runtime";
var TEXT_ALIGNMENT_OPTIONS = [
{
label: __("Align text left"),
value: "left",
icon: alignLeft
},
{
label: __("Align text center"),
value: "center",
icon: alignCenter
},
{
label: __("Align text right"),
value: "right",
icon: alignRight
},
{
label: __("Justify text"),
value: "justify",
icon: alignJustify
}
];
var DEFAULT_OPTIONS = ["left", "center", "right"];
function TextAlignmentControl({
className,
value,
onChange,
options = DEFAULT_OPTIONS
}) {
const validOptions = useMemo(
() => TEXT_ALIGNMENT_OPTIONS.filter(
(option) => options.includes(option.value)
),
[options]
);
if (!validOptions.length) {
return null;
}
return /* @__PURE__ */ jsx(
ToggleGroupControl,
{
isDeselectable: true,
__nextHasNoMarginBottom: true,
__next40pxDefaultSize: true,
label: __("Text alignment"),
className: clsx(
"block-editor-text-alignment-control",
className
),
value,
onChange: (newValue) => {
onChange(newValue === value ? void 0 : newValue);
},
children: validOptions.map((option) => {
return /* @__PURE__ */ jsx(
ToggleGroupControlOptionIcon,
{
value: option.value,
icon: option.icon,
label: option.label
},
option.value
);
})
}
);
}
export {
TextAlignmentControl as default
};
//# sourceMappingURL=index.js.map