@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.default = exports.SPACING_SUPPORT_KEY = void 0;
exports.hasDimensionsSupport = hasDimensionsSupport;
exports.useCustomSides = useCustomSides;
var _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
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 _spacingVisualizer = require("./spacing-visualizer");
var _store = require("../store");
var _lockUnlock = require("../lock-unlock");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const DIMENSIONS_SUPPORT_KEY = exports.DIMENSIONS_SUPPORT_KEY = 'dimensions';
const SPACING_SUPPORT_KEY = exports.SPACING_SUPPORT_KEY = 'spacing';
const ALL_SIDES = exports.ALL_SIDES = ['top', 'right', 'bottom', 'left'];
const AXIAL_SIDES = exports.AXIAL_SIDES = ['vertical', 'horizontal'];
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_inspectorControls.default, {
    group: "dimensions",
    resetAllFilter: attributesResetAllFilter,
    children: children
  });
}
function DimensionsPanel({
  clientId,
  name,
  setAttributes,
  settings
}) {
  const isEnabled = (0, _globalStyles.useHasDimensionsPanel)(settings);
  const value = (0, _data.useSelect)(select => select(_store.store).getBlockAttributes(clientId)?.style, [clientId]);
  const [visualizedProperty, setVisualizedProperty] = useVisualizer();
  const onChange = newStyle => {
    setAttributes({
      style: (0, _utils.cleanEmptyObject)(newStyle)
    });
  };
  if (!isEnabled) {
    return null;
  }
  const defaultDimensionsControls = (0, _blocks.getBlockSupport)(name, [DIMENSIONS_SUPPORT_KEY, '__experimentalDefaultControls']);
  const defaultSpacingControls = (0, _blocks.getBlockSupport)(name, [SPACING_SUPPORT_KEY, '__experimentalDefaultControls']);
  const defaultControls = {
    ...defaultDimensionsControls,
    ...defaultSpacingControls
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_globalStyles.DimensionsPanel, {
      as: DimensionsInspectorControl,
      panelId: clientId,
      settings: settings,
      value: value,
      onChange: onChange,
      defaultControls: defaultControls,
      onVisualize: setVisualizedProperty
    }), !!settings?.spacing?.padding && /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacingVisualizer.PaddingVisualizer, {
      forceShow: visualizedProperty === 'padding',
      clientId: clientId,
      value: value
    }), !!settings?.spacing?.margin && /*#__PURE__*/(0, _jsxRuntime.jsx)(_spacingVisualizer.MarginVisualizer, {
      forceShow: visualizedProperty === 'margin',
      clientId: clientId,
      value: value
    })]
  });
}

/**
 * Determine whether there is block support for dimensions.
 *
 * @param {string} blockName Block name.
 * @param {string} feature   Background image feature to check for.
 *
 * @return {boolean} Whether there is support.
 */
function hasDimensionsSupport(blockName, feature = 'any') {
  if (_element.Platform.OS !== 'web') {
    return false;
  }
  const support = (0, _blocks.getBlockSupport)(blockName, DIMENSIONS_SUPPORT_KEY);
  if (support === true) {
    return true;
  }
  if (feature === 'any') {
    return !!(support?.aspectRatio || !!support?.minHeight);
  }
  return !!support?.[feature];
}
var _default = exports.default = {
  useBlockProps,
  attributeKeys: ['minHeight', 'style'],
  hasSupport(name) {
    return hasDimensionsSupport(name, 'aspectRatio');
  }
};
function useBlockProps({
  name,
  minHeight,
  style
}) {
  if (!hasDimensionsSupport(name, 'aspectRatio') || (0, _utils.shouldSkipSerialization)(name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio')) {
    return {};
  }
  const className = (0, _clsx.default)({
    'has-aspect-ratio': !!style?.dimensions?.aspectRatio
  });

  // Allow dimensions-based inline style overrides to override any global styles rules that
  // might be set for the block, and therefore affect the display of the aspect ratio.
  const inlineStyleOverrides = {};

  // Apply rules to unset incompatible styles.
  // Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
  // This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
  // that is set should be intentional and should override any existing minHeight. The Cover block
  // and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
  // is set.
  if (style?.dimensions?.aspectRatio) {
    // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
    inlineStyleOverrides.minHeight = 'unset';
  } else if (minHeight || style?.dimensions?.minHeight) {
    // To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
    inlineStyleOverrides.aspectRatio = 'unset';
  }
  return {
    className,
    style: inlineStyleOverrides
  };
}

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