@wordpress/block-editor/build/hooks/dimensions.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DIMENSIONS_SUPPORT_KEY = exports.AXIAL_SIDES = exports.ALL_SIDES = void 0;
exports.DimensionsPanel = DimensionsPanel;
exports.SPACING_SUPPORT_KEY = void 0;
exports.useCustomSides = useCustomSides;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _data = require("@wordpress/data");

var _blocks = require("@wordpress/blocks");

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));

var _globalStyles = require("../components/global-styles");

var _margin = require("./margin");

var _padding = require("./padding");

var _store = require("../store");

var _lockUnlock = require("../lock-unlock");

var _utils = require("./utils");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const DIMENSIONS_SUPPORT_KEY = 'dimensions';
exports.DIMENSIONS_SUPPORT_KEY = DIMENSIONS_SUPPORT_KEY;
const SPACING_SUPPORT_KEY = 'spacing';
exports.SPACING_SUPPORT_KEY = SPACING_SUPPORT_KEY;
const ALL_SIDES = ['top', 'right', 'bottom', 'left'];
exports.ALL_SIDES = ALL_SIDES;
const AXIAL_SIDES = ['vertical', 'horizontal'];
exports.AXIAL_SIDES = AXIAL_SIDES;

function useVisualizer() {
  const [property, setProperty] = (0, _element.useState)(false);
  const {
    hideBlockInterface,
    showBlockInterface
  } = (0, _lockUnlock.unlock)((0, _data.useDispatch)(_store.store));
  (0, _element.useEffect)(() => {
    if (!property) {
      showBlockInterface();
    } else {
      hideBlockInterface();
    }
  }, [property, showBlockInterface, hideBlockInterface]);
  return [property, setProperty];
}

function DimensionsInspectorControl({
  children,
  resetAllFilter
}) {
  const attributesResetAllFilter = (0, _element.useCallback)(attributes => {
    const existingStyle = attributes.style;
    const updatedStyle = resetAllFilter(existingStyle);
    return { ...attributes,
      style: updatedStyle
    };
  }, [resetAllFilter]);
  return (0, _element.createElement)(_inspectorControls.default, {
    group: "dimensions",
    resetAllFilter: attributesResetAllFilter
  }, children);
}

function DimensionsPanel(props) {
  const {
    clientId,
    name,
    attributes,
    setAttributes,
    __unstableParentLayout
  } = props;
  const settings = (0, _utils.useBlockSettings)(name, __unstableParentLayout);
  const isEnabled = (0, _globalStyles.useHasDimensionsPanel)(settings);
  const value = attributes.style;
  const [visualizedProperty, setVisualizedProperty] = useVisualizer();

  const onChange = newStyle => {
    setAttributes({
      style: (0, _utils.cleanEmptyObject)(newStyle)
    });
  };

  if (!isEnabled) {
    return null;
  }

  const defaultDimensionsControls = (0, _blocks.getBlockSupport)(props.name, [DIMENSIONS_SUPPORT_KEY, '__experimentalDefaultControls']);
  const defaultSpacingControls = (0, _blocks.getBlockSupport)(props.name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);
  const defaultControls = { ...defaultDimensionsControls,
    ...defaultSpacingControls
  };
  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_globalStyles.DimensionsPanel, {
    as: DimensionsInspectorControl,
    panelId: clientId,
    settings: settings,
    value: value,
    onChange: onChange,
    defaultControls: defaultControls,
    onVisualize: setVisualizedProperty
  }), !!settings?.spacing?.padding && (0, _element.createElement)(_padding.PaddingVisualizer, (0, _extends2.default)({
    forceShow: visualizedProperty === 'padding'
  }, props)), !!settings?.spacing?.margin && (0, _element.createElement)(_margin.MarginVisualizer, (0, _extends2.default)({
    forceShow: visualizedProperty === 'margin'
  }, props)));
}
/**
 * @deprecated
 */


function useCustomSides() {
  (0, _deprecated.default)('wp.blockEditor.__experimentalUseCustomSides', {
    since: '6.3',
    version: '6.4'
  });
}
//# sourceMappingURL=dimensions.js.map