@wordpress/block-editor/build/components/block-variation-picker/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 _clsx = _interopRequireDefault(require("clsx"));
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

function BlockVariationPicker({
  icon = _icons.layout,
  label = (0, _i18n.__)('Choose variation'),
  instructions = (0, _i18n.__)('Select a variation to start with:'),
  variations,
  onSelect,
  allowSkip
}) {
  const classes = (0, _clsx.default)('block-editor-block-variation-picker', {
    'has-many-variations': variations.length > 4
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Placeholder, {
    icon: icon,
    label: label,
    instructions: instructions,
    className: classes,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      className: "block-editor-block-variation-picker__variations",
      role: "list",
      "aria-label": (0, _i18n.__)('Block variations'),
      children: variations.map(variation => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          variant: "tertiary",
          icon: variation.icon && variation.icon.src ? variation.icon.src : variation.icon,
          iconSize: 48,
          onClick: () => onSelect(variation),
          className: "block-editor-block-variation-picker__variation",
          label: variation.description || variation.title
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
          className: "block-editor-block-variation-picker__variation-label",
          children: variation.title
        })]
      }, variation.name))
    }), allowSkip && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor-block-variation-picker__skip",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
        __next40pxDefaultSize: true,
        variant: "link",
        onClick: () => onSelect(),
        children: (0, _i18n.__)('Skip')
      })
    })]
  });
}
var _default = exports.default = BlockVariationPicker;
//# sourceMappingURL=index.js.map