@wordpress/block-library/build/post-featured-image/dimension-controls.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

const SCALE_OPTIONS = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
    value: "cover",
    label: (0, _i18n._x)('Cover', 'Scale option for Image dimension control')
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
    value: "contain",
    label: (0, _i18n._x)('Contain', 'Scale option for Image dimension control')
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
    value: "fill",
    label: (0, _i18n._x)('Fill', 'Scale option for Image dimension control')
  })]
});
const DEFAULT_SCALE = 'cover';
const scaleHelp = {
  cover: (0, _i18n.__)('Image is scaled and cropped to fill the entire space without being distorted.'),
  contain: (0, _i18n.__)('Image is scaled to fill the space without clipping nor distorting.'),
  fill: (0, _i18n.__)('Image will be stretched and distorted to completely fill the space.')
};
const DimensionControls = ({
  clientId,
  attributes: {
    aspectRatio,
    width,
    height,
    scale
  },
  setAttributes
}) => {
  const [availableUnits, defaultRatios, themeRatios, showDefaultRatios] = (0, _blockEditor.useSettings)('spacing.units', 'dimensions.aspectRatios.default', 'dimensions.aspectRatios.theme', 'dimensions.defaultAspectRatios');
  const units = (0, _components.__experimentalUseCustomUnits)({
    availableUnits: availableUnits || ['px', '%', 'vw', 'em', 'rem']
  });
  const onDimensionChange = (dimension, nextValue) => {
    const parsedValue = parseFloat(nextValue);
    /**
     * If we have no value set and we change the unit,
     * we don't want to set the attribute, as it would
     * end up having the unit as value without any number.
     */
    if (isNaN(parsedValue) && nextValue) {
      return;
    }
    setAttributes({
      [dimension]: parsedValue < 0 ? '0' : nextValue
    });
  };
  const scaleLabel = (0, _i18n._x)('Scale', 'Image scaling options');
  const showScaleControl = height || aspectRatio && aspectRatio !== 'auto';
  const themeOptions = themeRatios?.map(({
    name,
    ratio
  }) => ({
    label: name,
    value: ratio
  }));
  const defaultOptions = defaultRatios?.map(({
    name,
    ratio
  }) => ({
    label: name,
    value: ratio
  }));
  const aspectRatioOptions = [{
    label: (0, _i18n._x)('Original', 'Aspect ratio option for dimensions control'),
    value: 'auto'
  }, ...(showDefaultRatios ? defaultOptions : []), ...(themeOptions ? themeOptions : [])];
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      hasValue: () => !!aspectRatio,
      label: (0, _i18n.__)('Aspect ratio'),
      onDeselect: () => setAttributes({
        aspectRatio: undefined
      }),
      resetAllFilter: () => ({
        aspectRatio: undefined
      }),
      isShownByDefault: true,
      panelId: clientId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SelectControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: (0, _i18n.__)('Aspect ratio'),
        value: aspectRatio,
        options: aspectRatioOptions,
        onChange: nextAspectRatio => setAttributes({
          aspectRatio: nextAspectRatio
        })
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      className: "single-column",
      hasValue: () => !!height,
      label: (0, _i18n.__)('Height'),
      onDeselect: () => setAttributes({
        height: undefined
      }),
      resetAllFilter: () => ({
        height: undefined
      }),
      isShownByDefault: true,
      panelId: clientId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
        __next40pxDefaultSize: true,
        label: (0, _i18n.__)('Height'),
        labelPosition: "top",
        value: height || '',
        min: 0,
        onChange: nextHeight => onDimensionChange('height', nextHeight),
        units: units
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      className: "single-column",
      hasValue: () => !!width,
      label: (0, _i18n.__)('Width'),
      onDeselect: () => setAttributes({
        width: undefined
      }),
      resetAllFilter: () => ({
        width: undefined
      }),
      isShownByDefault: true,
      panelId: clientId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
        __next40pxDefaultSize: true,
        label: (0, _i18n.__)('Width'),
        labelPosition: "top",
        value: width || '',
        min: 0,
        onChange: nextWidth => onDimensionChange('width', nextWidth),
        units: units
      })
    }), showScaleControl && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
      hasValue: () => !!scale && scale !== DEFAULT_SCALE,
      label: scaleLabel,
      onDeselect: () => setAttributes({
        scale: DEFAULT_SCALE
      }),
      resetAllFilter: () => ({
        scale: DEFAULT_SCALE
      }),
      isShownByDefault: true,
      panelId: clientId,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
        __next40pxDefaultSize: true,
        __nextHasNoMarginBottom: true,
        label: scaleLabel,
        value: scale,
        help: scaleHelp[scale],
        onChange: value => setAttributes({
          scale: value
        }),
        isBlock: true,
        children: SCALE_OPTIONS
      })
    })]
  });
};
var _default = exports.default = DimensionControls;
//# sourceMappingURL=dimension-controls.js.map