@wordpress/block-editor/build-module/components/block-styles/index.js

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import classnames from 'classnames';
/**
 * WordPress dependencies
 */

import { useState } from '@wordpress/element';
import { debounce, useViewportMatch } from '@wordpress/compose';
import { Button, __experimentalTruncate as Truncate, Popover } from '@wordpress/components';
import deprecated from '@wordpress/deprecated';
import { __ } from '@wordpress/i18n';
/**
 * Internal dependencies
 */

import BlockStylesPreviewPanel from './preview-panel';
import useStylesForBlocks from './use-styles-for-block';

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


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

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

  const debouncedSetHoveredStyle = 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 createElement("div", {
    className: "block-editor-block-styles"
  }, createElement("div", {
    className: "block-editor-block-styles__variants"
  }, stylesToRender.map(style => {
    const buttonText = style.isDefault ? __('Default') : style.label || style.name;
    return createElement(Button, {
      className: classnames('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
    }, createElement(Truncate, {
      numberOfLines: 1,
      className: "block-editor-block-styles__item-text"
    }, buttonText));
  })), hoveredStyle && !isMobileViewport && createElement(Popover, {
    placement: "left-start",
    offset: 20,
    focusOnMount: false
  }, createElement("div", {
    className: "block-editor-block-styles__preview-panel",
    onMouseLeave: () => styleItemHandler(null)
  }, createElement(BlockStylesPreviewPanel, {
    activeStyle: activeStyle,
    className: previewClassName,
    genericPreviewBlock: genericPreviewBlock,
    style: hoveredStyle
  }))));
}

export default BlockStyles;

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