@wordpress/block-editor/build/components/block-variation-transforms/index.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _blocks = require("@wordpress/blocks");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _icons = require("@wordpress/icons");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _store = require("../../store");
var _lockUnlock = require("../../lock-unlock");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function VariationsButtons({
  className,
  onSelectVariation,
  selectedValue,
  variations
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("fieldset", {
    className: className,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
      as: "legend",
      children: (0, _i18n.__)('Transform to variation')
    }), variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
      __next40pxDefaultSize: true,
      size: "compact",
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
        icon: variation.icon,
        showColors: true
      }),
      isPressed: selectedValue === variation.name,
      label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)(/* translators: %s: Block or block variation name. */
      (0, _i18n.__)('Transform to %s'), variation.title),
      onClick: () => onSelectVariation(variation.name),
      "aria-label": variation.title,
      showTooltip: true
    }, variation.name))]
  });
}
function VariationsDropdown({
  className,
  onSelectVariation,
  selectedValue,
  variations
}) {
  const selectOptions = variations.map(({
    name,
    title,
    description
  }) => ({
    value: name,
    label: title,
    info: description
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.DropdownMenu, {
    className: className,
    label: (0, _i18n.__)('Transform to variation'),
    text: (0, _i18n.__)('Transform to variation'),
    popoverProps: {
      position: 'bottom center',
      className: `${className}__popover`
    },
    icon: _icons.chevronDown,
    toggleProps: {
      iconPosition: 'right'
    },
    children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItemsChoice, {
        choices: selectOptions,
        value: selectedValue,
        onSelect: onSelectVariation
      })
    })
  });
}
function VariationsToggleGroupControl({
  className,
  onSelectVariation,
  selectedValue,
  variations
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: className,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControl, {
      label: (0, _i18n.__)('Transform to variation'),
      value: selectedValue,
      hideLabelFromVision: true,
      onChange: onSelectVariation,
      __next40pxDefaultSize: true,
      __nextHasNoMarginBottom: true,
      children: variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOptionIcon, {
        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
          icon: variation.icon,
          showColors: true
        }),
        value: variation.name,
        label: selectedValue === variation.name ? variation.title : (0, _i18n.sprintf)(/* translators: %s: Block or block variation name. */
        (0, _i18n.__)('Transform to %s'), variation.title)
      }, variation.name))
    })
  });
}
function __experimentalBlockVariationTransforms({
  blockClientId
}) {
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const {
    activeBlockVariation,
    variations,
    isContentOnly
  } = (0, _data.useSelect)(select => {
    const {
      getActiveBlockVariation,
      getBlockVariations
    } = select(_blocks.store);
    const {
      getBlockName,
      getBlockAttributes,
      getBlockEditingMode
    } = select(_store.store);
    const name = blockClientId && getBlockName(blockClientId);
    const {
      hasContentRoleAttribute
    } = (0, _lockUnlock.unlock)(select(_blocks.store));
    const isContentBlock = hasContentRoleAttribute(name);
    return {
      activeBlockVariation: getActiveBlockVariation(name, getBlockAttributes(blockClientId)),
      variations: name && getBlockVariations(name, 'transform'),
      isContentOnly: getBlockEditingMode(blockClientId) === 'contentOnly' && !isContentBlock
    };
  }, [blockClientId]);
  const selectedValue = activeBlockVariation?.name;

  // Check if each variation has a unique icon.
  const hasUniqueIcons = (0, _element.useMemo)(() => {
    const variationIcons = new Set();
    if (!variations) {
      return false;
    }
    variations.forEach(variation => {
      if (variation.icon) {
        variationIcons.add(variation.icon?.src || variation.icon);
      }
    });
    return variationIcons.size === variations.length;
  }, [variations]);
  const onSelectVariation = variationName => {
    updateBlockAttributes(blockClientId, {
      ...variations.find(({
        name
      }) => name === variationName).attributes
    });
  };
  if (!variations?.length || isContentOnly) {
    return null;
  }
  const baseClass = 'block-editor-block-variation-transforms';

  // Show buttons if there are more than 5 variations because the ToggleGroupControl does not wrap
  const showButtons = variations.length > 5;
  const ButtonComponent = showButtons ? VariationsButtons : VariationsToggleGroupControl;
  const Component = hasUniqueIcons ? ButtonComponent : VariationsDropdown;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
    className: baseClass,
    onSelectVariation: onSelectVariation,
    selectedValue: selectedValue,
    variations: variations
  });
}
var _default = exports.default = __experimentalBlockVariationTransforms;
//# sourceMappingURL=index.js.map