@wordpress/block-library/build/spacer/controls.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SpacerControls;
var _i18n = require("@wordpress/i18n");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _primitives = require("@wordpress/primitives");
var _lockUnlock = require("../lock-unlock");
var _constants = require("./constants");
var _hooks = require("../utils/hooks");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const {
  useSpacingSizes
} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
function DimensionInput({
  label,
  onChange,
  isResizing,
  value = ''
}) {
  const inputId = (0, _compose.useInstanceId)(_components.__experimentalUnitControl, 'block-spacer-height-input');
  const spacingSizes = useSpacingSizes();
  const [spacingUnits] = (0, _blockEditor.useSettings)('spacing.units');
  // In most contexts the spacer size cannot meaningfully be set to a
  // percentage, since this is relative to the parent container. This
  // unit is disabled from the UI.
  const availableUnits = spacingUnits ? spacingUnits.filter(unit => unit !== '%') : ['px', 'em', 'rem', 'vw', 'vh'];
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits,
    defaultValues: {
      px: 100,
      em: 10,
      rem: 10,
      vw: 10,
      vh: 25
    }
  });

  // Force the unit to update to `px` when the Spacer is being resized.
  const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
  const computedValue = (0, _blockEditor.isValueSpacingPreset)(value) ? value : [parsedQuantity, isResizing ? 'px' : parsedUnit].join('');
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
    children: spacingSizes?.length < 2 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
      id: inputId,
      isResetValueOnUnitChange: true,
      min: _constants.MIN_SPACER_SIZE,
      onChange: onChange,
      value: computedValue,
      units: units,
      label: label,
      __next40pxDefaultSize: true
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.View, {
      className: "tools-panel-item-spacing",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalSpacingSizesControl, {
        values: {
          all: computedValue
        },
        onChange: ({
          all
        }) => {
          onChange(all);
        },
        label: label,
        sides: ['all'],
        units: units,
        allowReset: false,
        splitOnAxis: false,
        showSideInLabel: false
      })
    })
  });
}
function SpacerControls({
  setAttributes,
  orientation,
  height,
  width,
  isResizing
}) {
  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
      label: (0, _i18n.__)('Settings'),
      resetAll: () => {
        setAttributes({
          width: undefined,
          height: '100px'
        });
      },
      dropdownMenuProps: dropdownMenuProps,
      children: [orientation === 'horizontal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('Width'),
        isShownByDefault: true,
        hasValue: () => width !== undefined,
        onDeselect: () => setAttributes({
          width: undefined
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionInput, {
          label: (0, _i18n.__)('Width'),
          value: width,
          onChange: nextWidth => setAttributes({
            width: nextWidth
          }),
          isResizing: isResizing
        })
      }), orientation !== 'horizontal' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
        label: (0, _i18n.__)('Height'),
        isShownByDefault: true,
        hasValue: () => height !== '100px',
        onDeselect: () => setAttributes({
          height: '100px'
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DimensionInput, {
          label: (0, _i18n.__)('Height'),
          value: height,
          onChange: nextHeight => setAttributes({
            height: nextHeight
          }),
          isResizing: isResizing
        })
      })]
    })
  });
}
//# sourceMappingURL=controls.js.map