@wordpress/block-editor
Version:
76 lines (75 loc) • 1.96 kB
JavaScript
// packages/block-editor/src/components/dimensions-tool/aspect-ratio-tool.js
import {
SelectControl,
__experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useSettings } from "../use-settings";
import { jsx } from "react/jsx-runtime";
function AspectRatioTool({
panelId,
value,
onChange = () => {
},
options,
defaultValue = "auto",
hasValue,
isShownByDefault = true
}) {
const displayValue = value ?? "auto";
const [defaultRatios, themeRatios, showDefaultRatios] = useSettings(
"dimensions.aspectRatios.default",
"dimensions.aspectRatios.theme",
"dimensions.defaultAspectRatios"
);
const themeOptions = themeRatios?.map(({ name, ratio }) => ({
label: name,
value: ratio
}));
const defaultOptions = defaultRatios?.map(({ name, ratio }) => ({
label: name,
value: ratio
}));
const aspectRatioOptions = [
{
label: _x(
"Original",
"Aspect ratio option for dimensions control"
),
value: "auto"
},
...showDefaultRatios ? defaultOptions : [],
...themeOptions ? themeOptions : [],
{
label: _x("Custom", "Aspect ratio option for dimensions control"),
value: "custom",
disabled: true,
hidden: true
}
];
return /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: hasValue ? hasValue : () => displayValue !== defaultValue,
label: __("Aspect ratio"),
onDeselect: () => onChange(void 0),
isShownByDefault,
panelId,
children: /* @__PURE__ */ jsx(
SelectControl,
{
label: __("Aspect ratio"),
value: displayValue,
options: options ?? aspectRatioOptions,
onChange,
size: "__unstable-large",
__nextHasNoMarginBottom: true
}
)
}
);
}
export {
AspectRatioTool as default
};
//# sourceMappingURL=aspect-ratio-tool.js.map