@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 _clsx = _interopRequireDefault(require("clsx"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _components = require("@wordpress/components");
var _previewPanel = _interopRequireDefault(require("./preview-panel"));
var _useStylesForBlock = _interopRequireDefault(require("./use-styles-for-block"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * 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 /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-editor-block-styles",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-editor-block-styles__variants",
      children: stylesToRender.map(style => {
        const buttonText = style.label || style.name;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
          __next40pxDefaultSize: true,
          className: (0, _clsx.default)('block-editor-block-styles__item', {
            'is-active': activeStyle.name === 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,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalTruncate, {
            numberOfLines: 1,
            className: "block-editor-block-styles__item-text",
            children: buttonText
          })
        }, style.name);
      })
    }), hoveredStyle && !isMobileViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
      placement: "left-start",
      offset: 34,
      focusOnMount: false,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "block-editor-block-styles__preview-panel",
        onMouseLeave: () => styleItemHandler(null),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewPanel.default, {
          activeStyle: activeStyle,
          className: previewClassName,
          genericPreviewBlock: genericPreviewBlock,
          style: hoveredStyle
        })
      })
    })]
  });
}
var _default = exports.default = BlockStyles;
//# sourceMappingURL=index.js.map