@wordpress/block-editor
Version:
75 lines (74 loc) • 2.22 kB
JavaScript
// packages/block-editor/src/components/block-vertical-alignment-control/ui.js
import { _x } from "@wordpress/i18n";
import { ToolbarGroup, ToolbarDropdownMenu } from "@wordpress/components";
import {
justifyTop,
justifyCenterVertical,
justifyBottom,
justifyStretchVertical,
justifySpaceBetweenVertical
} from "@wordpress/icons";
import { jsx } from "react/jsx-runtime";
var BLOCK_ALIGNMENTS_CONTROLS = {
top: {
icon: justifyTop,
title: _x("Align top", "Block vertical alignment setting")
},
center: {
icon: justifyCenterVertical,
title: _x("Align middle", "Block vertical alignment setting")
},
bottom: {
icon: justifyBottom,
title: _x("Align bottom", "Block vertical alignment setting")
},
stretch: {
icon: justifyStretchVertical,
title: _x("Stretch to fill", "Block vertical alignment setting")
},
"space-between": {
icon: justifySpaceBetweenVertical,
title: _x("Space between", "Block vertical alignment setting")
}
};
var DEFAULT_CONTROLS = ["top", "center", "bottom"];
var DEFAULT_CONTROL = "top";
function BlockVerticalAlignmentUI({
value,
onChange,
controls = DEFAULT_CONTROLS,
isCollapsed = true,
isToolbar
}) {
function applyOrUnset(align) {
return () => onChange(value === align ? void 0 : align);
}
const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[value];
const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[DEFAULT_CONTROL];
const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const extraProps = isToolbar ? { isCollapsed } : {};
return /* @__PURE__ */ jsx(
UIComponent,
{
icon: activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon,
label: _x(
"Change vertical alignment",
"Block vertical alignment setting label"
),
controls: controls.map((control) => {
return {
...BLOCK_ALIGNMENTS_CONTROLS[control],
isActive: value === control,
role: isCollapsed ? "menuitemradio" : void 0,
onClick: applyOrUnset(control)
};
}),
...extraProps
}
);
}
var ui_default = BlockVerticalAlignmentUI;
export {
ui_default as default
};
//# sourceMappingURL=ui.js.map