@wordpress/block-editor
Version:
66 lines (65 loc) • 1.87 kB
JavaScript
// packages/block-editor/src/components/global-styles/image-settings-panel.js
import {
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
ToggleControl
} from "@wordpress/components";
import { __, _x } from "@wordpress/i18n";
import { useToolsPanelDropdownMenuProps } from "./utils";
import { Fragment, jsx } from "react/jsx-runtime";
function useHasImageSettingsPanel(name, value, inheritedValue) {
return name === "core/image" && inheritedValue?.lightbox?.allowEditing || !!value?.lightbox;
}
function ImageSettingsPanel({
onChange,
value,
inheritedValue,
panelId
}) {
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
const resetLightbox = () => {
onChange(void 0);
};
const onChangeLightbox = (newSetting) => {
onChange({
enabled: newSetting
});
};
let lightboxChecked = false;
if (inheritedValue?.lightbox?.enabled) {
lightboxChecked = inheritedValue.lightbox.enabled;
}
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
ToolsPanel,
{
label: _x("Settings", "Image settings"),
resetAll: resetLightbox,
panelId,
dropdownMenuProps,
children: /* @__PURE__ */ jsx(
ToolsPanelItem,
{
hasValue: () => !!value?.lightbox,
label: __("Enlarge on click"),
onDeselect: resetLightbox,
isShownByDefault: true,
panelId,
children: /* @__PURE__ */ jsx(
ToggleControl,
{
__nextHasNoMarginBottom: true,
label: __("Enlarge on click"),
checked: lightboxChecked,
onChange: onChangeLightbox
}
)
}
)
}
) });
}
export {
ImageSettingsPanel as default,
useHasImageSettingsPanel
};
//# sourceMappingURL=image-settings-panel.js.map