@wordpress/block-editor/build/components/block-styles/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 _element = require("@wordpress/element");

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

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

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

var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));

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

var _previewPanel = _interopRequireDefault(require("./preview-panel"));

var _useStylesForBlock = _interopRequireDefault(require("./use-styles-for-block"));

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
const noop = () => {}; // Block Styles component for the Settings Sidebar.


function BlockStyles({
  clientId,
  onSwitch = noop,
  onHoverClassName = noop
}) {
  const {
    onSelect,
    stylesToRender,
    activeStyle,
    genericPreviewBlock,
    className: previewClassName
  } = (0, _useStylesForBlock.default)({
    clientId,
    onSwitch
  });
  const [hoveredStyle, setHoveredStyle] = (0, _element.useState)(null);
  const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');

  if (!stylesToRender || stylesToRender.length === 0) {
    return null;
  }

  const debouncedSetHoveredStyle = (0, _compose.debounce)(setHoveredStyle, 250);

  const onSelectStylePreview = style => {
    onSelect(style);
    onHoverClassName(null);
    setHoveredStyle(null);
    debouncedSetHoveredStyle.cancel();
  };

  const styleItemHandler = item => {
    var _item$name;

    if (hoveredStyle === item) {
      debouncedSetHoveredStyle.cancel();
      return;
    }

    debouncedSetHoveredStyle(item);
    onHoverClassName((_item$name = item?.name) !== null && _item$name !== void 0 ? _item$name : null);
  };

  return (0, _element.createElement)("div", {
    className: "block-editor-block-styles"
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-styles__variants"
  }, stylesToRender.map(style => {
    const buttonText = style.isDefault ? (0, _i18n.__)('Default') : style.label || style.name;
    return (0, _element.createElement)(_components.Button, {
      className: (0, _classnames.default)('block-editor-block-styles__item', {
        'is-active': activeStyle.name === style.name
      }),
      key: style.name,
      variant: "secondary",
      label: buttonText,
      onMouseEnter: () => styleItemHandler(style),
      onFocus: () => styleItemHandler(style),
      onMouseLeave: () => styleItemHandler(null),
      onBlur: () => styleItemHandler(null),
      onClick: () => onSelectStylePreview(style),
      "aria-current": activeStyle.name === style.name
    }, (0, _element.createElement)(_components.__experimentalTruncate, {
      numberOfLines: 1,
      className: "block-editor-block-styles__item-text"
    }, buttonText));
  })), hoveredStyle && !isMobileViewport && (0, _element.createElement)(_components.Popover, {
    placement: "left-start",
    offset: 20,
    focusOnMount: false
  }, (0, _element.createElement)("div", {
    className: "block-editor-block-styles__preview-panel",
    onMouseLeave: () => styleItemHandler(null)
  }, (0, _element.createElement)(_previewPanel.default, {
    activeStyle: activeStyle,
    className: previewClassName,
    genericPreviewBlock: genericPreviewBlock,
    style: hoveredStyle
  }))));
}

var _default = BlockStyles;
exports.default = _default;

BlockStyles.Slot = () => {
  (0, _deprecated.default)('BlockStyles.Slot', {
    version: '6.4',
    since: '6.2'
  });
  return null;
};
//# sourceMappingURL=index.js.map