@wordpress/block-editor/build/components/block-switcher/block-variation-transformations.js

Generic block editor.

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.useBlockVariationTransforms = useBlockVariationTransforms;

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

var _components = require("@wordpress/components");

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

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

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

var _blockIcon = _interopRequireDefault(require("../block-icon"));

var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const EMPTY_OBJECT = {};

function useBlockVariationTransforms({
  clientIds,
  blocks
}) {
  const {
    activeBlockVariation,
    blockVariationTransformations
  } = (0, _data.useSelect)(select => {
    const {
      getBlockRootClientId,
      getBlockAttributes,
      canRemoveBlocks
    } = select(_store.store);
    const {
      getActiveBlockVariation,
      getBlockVariations
    } = select(_blocks.store);
    const rootClientId = getBlockRootClientId(Array.isArray(clientIds) ? clientIds[0] : clientIds);
    const canRemove = canRemoveBlocks(clientIds, rootClientId); // Only handle single selected blocks for now.

    if (blocks.length !== 1 || !canRemove) {
      return EMPTY_OBJECT;
    }

    const [firstBlock] = blocks;
    return {
      blockVariationTransformations: getBlockVariations(firstBlock.name, 'transform'),
      activeBlockVariation: getActiveBlockVariation(firstBlock.name, getBlockAttributes(firstBlock.clientId))
    };
  }, [clientIds, blocks]);
  const transformations = (0, _element.useMemo)(() => {
    return blockVariationTransformations?.filter(({
      name
    }) => name !== activeBlockVariation?.name);
  }, [blockVariationTransformations, activeBlockVariation]);
  return transformations;
}

const BlockVariationTransformations = ({
  transformations,
  onSelect,
  blocks
}) => {
  const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
  return (0, _element.createElement)(_element.Fragment, null, hoveredTransformItemName && (0, _element.createElement)(_previewBlockPopover.default, {
    blocks: (0, _blocks.cloneBlock)(blocks[0], transformations.find(({
      name
    }) => name === hoveredTransformItemName).attributes)
  }), transformations?.map(item => (0, _element.createElement)(BlockVariationTranformationItem, {
    key: item.name,
    item: item,
    onSelect: onSelect,
    setHoveredTransformItemName: setHoveredTransformItemName
  })));
};

function BlockVariationTranformationItem({
  item,
  onSelect,
  setHoveredTransformItemName
}) {
  const {
    name,
    icon,
    title
  } = item;
  return (0, _element.createElement)(_components.MenuItem, {
    className: (0, _blocks.getBlockMenuDefaultClassName)(name),
    onClick: event => {
      event.preventDefault();
      onSelect(name);
    },
    onMouseLeave: () => setHoveredTransformItemName(null),
    onMouseEnter: () => setHoveredTransformItemName(name)
  }, (0, _element.createElement)(_blockIcon.default, {
    icon: icon,
    showColors: true
  }), title);
}

var _default = BlockVariationTransformations;
exports.default = _default;
//# sourceMappingURL=block-variation-transformations.js.map