@wordpress/block-editor/build/components/block-list/use-block-props/index.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useBlockProps = useBlockProps;

var _classnames = _interopRequireDefault(require("classnames"));

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

var _i18n = require("@wordpress/i18n");

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

var _compose = require("@wordpress/compose");

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

var _warning = _interopRequireDefault(require("@wordpress/warning"));

var _useMovingAnimation = _interopRequireDefault(require("../../use-moving-animation"));

var _blockListBlockContext = require("../block-list-block-context");

var _useFocusFirstElement = require("./use-focus-first-element");

var _useIsHovered = require("./use-is-hovered");

var _context = require("../../block-edit/context");

var _useBlockClassNames = require("./use-block-class-names");

var _useBlockDefaultClassName = require("./use-block-default-class-name");

var _useBlockCustomClassName = require("./use-block-custom-class-name");

var _useBlockMovingModeClassNames = require("./use-block-moving-mode-class-names");

var _useFocusHandler = require("./use-focus-handler");

var _useSelectedBlockEventHandlers = require("./use-selected-block-event-handlers");

var _useNavModeExit = require("./use-nav-mode-exit");

var _useBlockRefs = require("./use-block-refs");

var _useIntersectionObserver = require("./use-intersection-observer");

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

var _blockContentOverlay = _interopRequireDefault(require("../../block-content-overlay"));

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

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * If the block count exceeds the threshold, we disable the reordering animation
 * to avoid laginess.
 */
const BLOCK_ANIMATION_THRESHOLD = 200;
/**
 * This hook is used to lightly mark an element as a block element. The element
 * should be the outermost element of a block. Call this hook and pass the
 * returned props to the element to mark as a block. If you define a ref for the
 * element, it is important to pass the ref to this hook, which the hook in turn
 * will pass to the component through the props it returns. Optionally, you can
 * also pass any other props through this hook, and they will be merged and
 * returned.
 *
 * @param {Object}  props                    Optional. Props to pass to the element. Must contain
 *                                           the ref if one is defined.
 * @param {Object}  options                  Options for internal use only.
 * @param {boolean} options.__unstableIsHtml
 *
 * @return {Object} Props to pass to the element to mark as a block.
 */

function useBlockProps(props = {}, {
  __unstableIsHtml
} = {}) {
  const {
    clientId,
    className,
    wrapperProps = {},
    isAligned
  } = (0, _element.useContext)(_blockListBlockContext.BlockListBlockContext);
  const {
    index,
    mode,
    name,
    blockApiVersion,
    blockTitle,
    isPartOfSelection,
    adjustScrolling,
    enableAnimation,
    isSubtreeDisabled
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes,
      getBlockIndex,
      getBlockMode,
      getBlockName,
      isTyping,
      getGlobalBlockCount,
      isBlockSelected,
      isBlockMultiSelected,
      isAncestorMultiSelected,
      isFirstMultiSelectedBlock,
      isBlockSubtreeDisabled
    } = (0, _lockUnlock.unlock)(select(_store.store));
    const {
      getActiveBlockVariation
    } = select(_blocks.store);
    const isSelected = isBlockSelected(clientId);
    const isPartOfMultiSelection = isBlockMultiSelected(clientId) || isAncestorMultiSelected(clientId);
    const blockName = getBlockName(clientId);
    const blockType = (0, _blocks.getBlockType)(blockName);
    const attributes = getBlockAttributes(clientId);
    const match = getActiveBlockVariation(blockName, attributes);
    return {
      index: getBlockIndex(clientId),
      mode: getBlockMode(clientId),
      name: blockName,
      blockApiVersion: blockType?.apiVersion || 1,
      blockTitle: match?.title || blockType?.title,
      isPartOfSelection: isSelected || isPartOfMultiSelection,
      adjustScrolling: isSelected || isFirstMultiSelectedBlock(clientId),
      enableAnimation: !isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
      isSubtreeDisabled: isBlockSubtreeDisabled(clientId)
    };
  }, [clientId]);
  const hasOverlay = (0, _blockContentOverlay.default)(clientId); // translators: %s: Type of block (i.e. Text, Image etc)

  const blockLabel = (0, _i18n.sprintf)((0, _i18n.__)('Block: %s'), blockTitle);
  const htmlSuffix = mode === 'html' && !__unstableIsHtml ? '-visual' : '';
  const mergedRefs = (0, _compose.useMergeRefs)([props.ref, (0, _useFocusFirstElement.useFocusFirstElement)(clientId), (0, _useBlockRefs.useBlockRefProvider)(clientId), (0, _useFocusHandler.useFocusHandler)(clientId), (0, _useSelectedBlockEventHandlers.useEventHandlers)(clientId), (0, _useNavModeExit.useNavModeExit)(clientId), (0, _useIsHovered.useIsHovered)(), (0, _useIntersectionObserver.useIntersectionObserver)(), (0, _useMovingAnimation.default)({
    isSelected: isPartOfSelection,
    adjustScrolling,
    enableAnimation,
    triggerAnimationOnChange: index
  }), (0, _compose.useDisabled)({
    isDisabled: !hasOverlay
  })]);
  const blockEditContext = (0, _context.useBlockEditContext)(); // Ensures it warns only inside the `edit` implementation for the block.

  if (blockApiVersion < 2 && clientId === blockEditContext.clientId) {
    typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" ? (0, _warning.default)(`Block type "${name}" must support API version 2 or higher to work correctly with "useBlockProps" method.`) : void 0;
  }

  return {
    tabIndex: 0,
    ...wrapperProps,
    ...props,
    ref: mergedRefs,
    id: `block-${clientId}${htmlSuffix}`,
    role: 'document',
    'aria-label': blockLabel,
    'data-block': clientId,
    'data-type': name,
    'data-title': blockTitle,
    inert: isSubtreeDisabled ? 'true' : undefined,
    className: (0, _classnames.default)( // The wp-block className is important for editor styles.
    (0, _classnames.default)('block-editor-block-list__block', {
      'wp-block': !isAligned,
      'has-block-overlay': hasOverlay
    }), className, props.className, wrapperProps.className, (0, _useBlockClassNames.useBlockClassNames)(clientId), (0, _useBlockDefaultClassName.useBlockDefaultClassName)(clientId), (0, _useBlockCustomClassName.useBlockCustomClassName)(clientId), (0, _useBlockMovingModeClassNames.useBlockMovingModeClassNames)(clientId)),
    style: { ...wrapperProps.style,
      ...props.style
    }
  };
}
/**
 * Call within a save function to get the props for the block wrapper.
 *
 * @param {Object} props Optional. Props to pass to the element.
 */


useBlockProps.save = _blocks.__unstableGetBlockProps;
//# sourceMappingURL=index.js.map