@wordpress/block-editor/build/components/block-switcher/block-styles-menu.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockStylesMenu;

var _element = require("@wordpress/element");

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

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

var _data = require("@wordpress/data");

var _blocks = require("@wordpress/blocks");

var _blockStyles = _interopRequireDefault(require("../block-styles"));

var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
function BlockStylesMenu({
  hoveredBlock,
  onSwitch
}) {
  const {
    name,
    clientId
  } = hoveredBlock;
  const [hoveredClassName, setHoveredClassName] = (0, _element.useState)();
  const blockType = (0, _data.useSelect)(select => select(_blocks.store).getBlockType(name), [name]);
  return (0, _element.createElement)(_components.MenuGroup, {
    label: (0, _i18n.__)('Styles'),
    className: "block-editor-block-switcher__styles__menugroup"
  }, hoveredClassName && (0, _element.createElement)(_previewBlockPopover.default, {
    blocks: blockType.example ? (0, _blocks.getBlockFromExample)(blockType.name, {
      attributes: { ...blockType.example.attributes,
        className: hoveredClassName
      },
      innerBlocks: blockType.example.innerBlocks
    }) : (0, _blocks.cloneBlock)(hoveredBlock, {
      className: hoveredClassName
    })
  }), (0, _element.createElement)(_blockStyles.default, {
    clientId: clientId,
    onSwitch: onSwitch,
    onHoverClassName: setHoveredClassName,
    itemRole: "menuitem"
  }));
}
//# sourceMappingURL=block-styles-menu.js.map