@wordpress/block-library/build-module/spacer/controls.mjs

Block library for the WordPress editor.

// packages/block-library/src/spacer/controls.js
import { __ } from "@wordpress/i18n";
import {
  InspectorControls,
  useSettings,
  __experimentalSpacingSizesControl as SpacingSizesControl,
  isValueSpacingPreset,
  privateApis as blockEditorPrivateApis
} from "@wordpress/block-editor";
import {
  __experimentalUseCustomUnits as useCustomUnits,
  __experimentalUnitControl as UnitControl,
  __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
  __experimentalToolsPanel as ToolsPanel,
  __experimentalToolsPanelItem as ToolsPanelItem
} from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import { View } from "@wordpress/primitives";
import { unlock } from "../lock-unlock.mjs";
import { MIN_SPACER_SIZE } from "./constants.mjs";
import { useToolsPanelDropdownMenuProps } from "../utils/hooks.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var { useSpacingSizes } = unlock(blockEditorPrivateApis);
function DimensionInput({ label, onChange, isResizing, value = "" }) {
  const inputId = useInstanceId(UnitControl, "block-spacer-height-input");
  const spacingSizes = useSpacingSizes();
  const [spacingUnits] = useSettings("spacing.units");
  const availableUnits = spacingUnits ? spacingUnits.filter((unit) => unit !== "%") : ["px", "em", "rem", "vw", "vh"];
  const units = useCustomUnits({
    availableUnits,
    defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 }
  });
  const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(value);
  const computedValue = isValueSpacingPreset(value) ? value : [parsedQuantity, isResizing ? "px" : parsedUnit].join("");
  return /* @__PURE__ */ jsx(Fragment, { children: spacingSizes?.length < 2 ? /* @__PURE__ */ jsx(
    UnitControl,
    {
      id: inputId,
      isResetValueOnUnitChange: true,
      min: MIN_SPACER_SIZE,
      onChange,
      value: computedValue,
      units,
      label,
      __next40pxDefaultSize: true
    }
  ) : /* @__PURE__ */ jsx(View, { className: "tools-panel-item-spacing", children: /* @__PURE__ */ jsx(
    SpacingSizesControl,
    {
      values: { all: computedValue },
      onChange: ({ all }) => {
        onChange(all);
      },
      label,
      sides: ["all"],
      units,
      allowReset: false,
      splitOnAxis: false,
      showSideInLabel: false
    }
  ) }) });
}
function SpacerControls({
  setAttributes,
  orientation,
  height,
  width,
  isResizing
}) {
  const dropdownMenuProps = useToolsPanelDropdownMenuProps();
  return /* @__PURE__ */ jsx(InspectorControls, { children: /* @__PURE__ */ jsxs(
    ToolsPanel,
    {
      label: __("Settings"),
      resetAll: () => {
        setAttributes({
          width: void 0,
          height: "100px"
        });
      },
      dropdownMenuProps,
      children: [
        orientation === "horizontal" && /* @__PURE__ */ jsx(
          ToolsPanelItem,
          {
            label: __("Width"),
            isShownByDefault: true,
            hasValue: () => width !== void 0,
            onDeselect: () => setAttributes({ width: void 0 }),
            children: /* @__PURE__ */ jsx(
              DimensionInput,
              {
                label: __("Width"),
                value: width,
                onChange: (nextWidth) => setAttributes({ width: nextWidth }),
                isResizing
              }
            )
          }
        ),
        orientation !== "horizontal" && /* @__PURE__ */ jsx(
          ToolsPanelItem,
          {
            label: __("Height"),
            isShownByDefault: true,
            hasValue: () => height !== "100px",
            onDeselect: () => setAttributes({ height: "100px" }),
            children: /* @__PURE__ */ jsx(
              DimensionInput,
              {
                label: __("Height"),
                value: height,
                onChange: (nextHeight) => setAttributes({ height: nextHeight }),
                isResizing
              }
            )
          }
        )
      ]
    }
  ) });
}
export {
  SpacerControls as default
};
//# sourceMappingURL=controls.mjs.map