@wordpress/block-editor
Version:
87 lines (86 loc) • 2.89 kB
JavaScript
// packages/block-editor/src/components/block-alignment-control/ui.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import {
ToolbarDropdownMenu,
ToolbarGroup,
MenuGroup,
MenuItem
} from "@wordpress/components";
import useAvailableAlignments from "./use-available-alignments.mjs";
import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from "./constants.mjs";
import { Fragment, jsx } from "react/jsx-runtime";
function BlockAlignmentUI({
value,
onChange,
controls,
isToolbar,
isCollapsed = true
}) {
const enabledControls = useAvailableAlignments(controls);
const hasEnabledControls = !!enabledControls.length;
if (!hasEnabledControls) {
return null;
}
function onChangeAlignment(align) {
onChange([value, "none"].includes(align) ? void 0 : align);
}
const activeAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[value];
const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const commonProps = {
icon: activeAlignmentControl ? activeAlignmentControl.icon : defaultAlignmentControl.icon,
label: __("Align")
};
const extraProps = isToolbar ? {
isCollapsed,
controls: enabledControls.map(({ name: controlName }) => {
return {
...BLOCK_ALIGNMENTS_CONTROLS[controlName],
isActive: value === controlName || !value && controlName === "none",
role: isCollapsed ? "menuitemradio" : void 0,
onClick: () => onChangeAlignment(controlName)
};
})
} : {
toggleProps: { description: __("Change alignment") },
children: ({ onClose }) => {
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MenuGroup, { className: "block-editor-block-alignment-control__menu-group", children: enabledControls.map(
({ name: controlName, info }) => {
const { icon, title } = BLOCK_ALIGNMENTS_CONTROLS[controlName];
const isSelected = controlName === value || !value && controlName === "none";
return /* @__PURE__ */ jsx(
MenuItem,
{
icon,
iconPosition: "left",
className: clsx(
"components-dropdown-menu__menu-item",
{
"is-active": isSelected
}
),
isSelected,
onClick: () => {
onChangeAlignment(
controlName
);
onClose();
},
role: "menuitemradio",
info,
children: title
},
controlName
);
}
) }) });
}
};
return /* @__PURE__ */ jsx(UIComponent, { ...commonProps, ...extraProps });
}
var ui_default = BlockAlignmentUI;
export {
ui_default as default
};
//# sourceMappingURL=ui.mjs.map