@wordpress/block-editor 15.9.1-next.8fd3f8831.0 → 15.10.1-next.79a2f3cdd.0

package/build-module/components/block-settings-menu/block-settings-dropdown.js

@@ -1,310 +0,0 @@
-// packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
-import {
-  getBlockType,
-  serialize,
-  store as blocksStore
-} from "@wordpress/blocks";
-import { DropdownMenu, MenuGroup, MenuItem } from "@wordpress/components";
-import { useDispatch, useSelect } from "@wordpress/data";
-import { moreVertical } from "@wordpress/icons";
-import { Children, cloneElement } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
-import { store as keyboardShortcutsStore } from "@wordpress/keyboard-shortcuts";
-import { pipe, useCopyToClipboard } from "@wordpress/compose";
-import BlockActions from "../block-actions/index.js";
-import CommentIconSlotFill from "../collab/block-comment-icon-slot.js";
-import BlockHTMLConvertButton from "./block-html-convert-button.js";
-import __unstableBlockSettingsMenuFirstItem from "./block-settings-menu-first-item.js";
-import BlockSettingsMenuControls from "../block-settings-menu-controls/index.js";
-import BlockParentSelectorMenuItem from "./block-parent-selector-menu-item.js";
-import { store as blockEditorStore } from "../../store/index.js";
-import { unlock } from "../../lock-unlock.js";
-import { useNotifyCopy } from "../../utils/use-notify-copy.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var POPOVER_PROPS = {
-  className: "block-editor-block-settings-menu__popover",
-  placement: "bottom-start"
-};
-function CopyMenuItem({
-  clientIds,
-  onCopy,
-  label,
-  shortcut,
-  eventType = "copy",
-  __experimentalUpdateSelection: updateSelection = false
-}) {
-  const { getBlocksByClientId } = useSelect(blockEditorStore);
-  const { removeBlocks } = useDispatch(blockEditorStore);
-  const notifyCopy = useNotifyCopy();
-  const ref = useCopyToClipboard(
-    () => serialize(getBlocksByClientId(clientIds)),
-    () => {
-      switch (eventType) {
-        case "copy":
-        case "copyStyles":
-          onCopy();
-          notifyCopy(eventType, clientIds);
-          break;
-        case "cut":
-          notifyCopy(eventType, clientIds);
-          removeBlocks(clientIds, updateSelection);
-          break;
-        default:
-          break;
-      }
-    }
-  );
-  const copyMenuItemLabel = label ? label : __("Copy");
-  return /* @__PURE__ */ jsx(MenuItem, { ref, shortcut, children: copyMenuItemLabel });
-}
-function BlockSettingsDropdown({
-  block,
-  clientIds,
-  children,
-  __experimentalSelectBlock,
-  ...props
-}) {
-  const count = clientIds.length;
-  const firstBlockClientId = clientIds[0];
-  const {
-    firstParentClientId,
-    parentBlockType,
-    previousBlockClientId,
-    selectedBlockClientIds,
-    isContentOnly,
-    isZoomOut
-  } = useSelect(
-    (select) => {
-      const {
-        getBlockName,
-        getBlockRootClientId,
-        getPreviousBlockClientId,
-        getSelectedBlockClientIds: getSelectedBlockClientIds2,
-        getBlockAttributes,
-        getBlockEditingMode,
-        isZoomOut: _isZoomOut
-      } = unlock(select(blockEditorStore));
-      const { getActiveBlockVariation } = select(blocksStore);
-      const _firstParentClientId = getBlockRootClientId(firstBlockClientId);
-      const parentBlockName = _firstParentClientId && getBlockName(_firstParentClientId);
-      return {
-        firstParentClientId: _firstParentClientId,
-        parentBlockType: _firstParentClientId && (getActiveBlockVariation(
-          parentBlockName,
-          getBlockAttributes(_firstParentClientId)
-        ) || getBlockType(parentBlockName)),
-        previousBlockClientId: getPreviousBlockClientId(firstBlockClientId),
-        selectedBlockClientIds: getSelectedBlockClientIds2(),
-        isContentOnly: getBlockEditingMode(firstBlockClientId) === "contentOnly",
-        isZoomOut: _isZoomOut()
-      };
-    },
-    [firstBlockClientId]
-  );
-  const { getBlockOrder, getSelectedBlockClientIds } = useSelect(blockEditorStore);
-  const shortcuts = useSelect((select) => {
-    const { getShortcutRepresentation } = select(keyboardShortcutsStore);
-    return {
-      copy: getShortcutRepresentation("core/block-editor/copy"),
-      cut: getShortcutRepresentation("core/block-editor/cut"),
-      duplicate: getShortcutRepresentation(
-        "core/block-editor/duplicate"
-      ),
-      remove: getShortcutRepresentation("core/block-editor/remove"),
-      insertAfter: getShortcutRepresentation(
-        "core/block-editor/insert-after"
-      ),
-      insertBefore: getShortcutRepresentation(
-        "core/block-editor/insert-before"
-      )
-    };
-  }, []);
-  const hasSelectedBlocks = selectedBlockClientIds.length > 0;
-  async function updateSelectionAfterDuplicate(clientIdsPromise) {
-    if (!__experimentalSelectBlock) {
-      return;
-    }
-    const ids = await clientIdsPromise;
-    if (ids && ids[0]) {
-      __experimentalSelectBlock(ids[0], false);
-    }
-  }
-  function updateSelectionAfterRemove() {
-    if (!__experimentalSelectBlock) {
-      return;
-    }
-    let blockToFocus = previousBlockClientId || firstParentClientId;
-    if (!blockToFocus) {
-      blockToFocus = getBlockOrder()[0];
-    }
-    const shouldUpdateSelection = hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
-    __experimentalSelectBlock(blockToFocus, shouldUpdateSelection);
-  }
-  const parentBlockIsSelected = selectedBlockClientIds?.includes(firstParentClientId);
-  const shouldShowBlockParentMenuItem = !parentBlockIsSelected && !!firstParentClientId;
-  return /* @__PURE__ */ jsx(
-    BlockActions,
-    {
-      clientIds,
-      __experimentalUpdateSelection: !__experimentalSelectBlock,
-      children: ({
-        canCopyStyles,
-        canDuplicate,
-        canInsertBlock,
-        canRemove,
-        onDuplicate,
-        onInsertAfter,
-        onInsertBefore,
-        onRemove,
-        onCopy,
-        onPasteStyles
-      }) => {
-        const isEmpty = !canRemove && !canDuplicate && !canInsertBlock && isContentOnly;
-        if (isEmpty) {
-          return null;
-        }
-        return /* @__PURE__ */ jsx(
-          DropdownMenu,
-          {
-            icon: moreVertical,
-            label: __("Options"),
-            className: "block-editor-block-settings-menu",
-            popoverProps: POPOVER_PROPS,
-            noIcons: true,
-            ...props,
-            children: ({ onClose }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(MenuGroup, { children: [
-                /* @__PURE__ */ jsx(
-                  __unstableBlockSettingsMenuFirstItem.Slot,
-                  {
-                    fillProps: { onClose }
-                  }
-                ),
-                shouldShowBlockParentMenuItem && /* @__PURE__ */ jsx(
-                  BlockParentSelectorMenuItem,
-                  {
-                    parentClientId: firstParentClientId,
-                    parentBlockType
-                  }
-                ),
-                count === 1 && /* @__PURE__ */ jsx(
-                  BlockHTMLConvertButton,
-                  {
-                    clientId: firstBlockClientId
-                  }
-                ),
-                !isContentOnly && /* @__PURE__ */ jsx(
-                  CopyMenuItem,
-                  {
-                    clientIds,
-                    onCopy,
-                    shortcut: shortcuts.copy
-                  }
-                ),
-                !isContentOnly && /* @__PURE__ */ jsx(
-                  CopyMenuItem,
-                  {
-                    clientIds,
-                    label: __("Cut"),
-                    eventType: "cut",
-                    shortcut: shortcuts.cut,
-                    __experimentalUpdateSelection: !__experimentalSelectBlock
-                  }
-                ),
-                canDuplicate && /* @__PURE__ */ jsx(
-                  MenuItem,
-                  {
-                    onClick: pipe(
-                      onClose,
-                      onDuplicate,
-                      updateSelectionAfterDuplicate
-                    ),
-                    shortcut: shortcuts.duplicate,
-                    children: __("Duplicate")
-                  }
-                ),
-                canInsertBlock && !isZoomOut && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      onClick: pipe(
-                        onClose,
-                        onInsertBefore
-                      ),
-                      shortcut: shortcuts.insertBefore,
-                      children: __("Add before")
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    MenuItem,
-                    {
-                      onClick: pipe(
-                        onClose,
-                        onInsertAfter
-                      ),
-                      shortcut: shortcuts.insertAfter,
-                      children: __("Add after")
-                    }
-                  )
-                ] }),
-                count === 1 && /* @__PURE__ */ jsx(
-                  CommentIconSlotFill.Slot,
-                  {
-                    fillProps: {
-                      clientId: firstBlockClientId,
-                      onClose
-                    }
-                  }
-                )
-              ] }),
-              canCopyStyles && !isContentOnly && /* @__PURE__ */ jsxs(MenuGroup, { children: [
-                /* @__PURE__ */ jsx(
-                  CopyMenuItem,
-                  {
-                    clientIds,
-                    onCopy,
-                    label: __("Copy styles"),
-                    eventType: "copyStyles"
-                  }
-                ),
-                /* @__PURE__ */ jsx(MenuItem, { onClick: onPasteStyles, children: __("Paste styles") })
-              ] }),
-              !isContentOnly && /* @__PURE__ */ jsx(
-                BlockSettingsMenuControls.Slot,
-                {
-                  fillProps: {
-                    onClose,
-                    count,
-                    firstBlockClientId
-                  },
-                  clientIds
-                }
-              ),
-              typeof children === "function" ? children({ onClose }) : Children.map(
-                (child) => cloneElement(child, { onClose })
-              ),
-              canRemove && /* @__PURE__ */ jsx(MenuGroup, { children: /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: pipe(
-                    onClose,
-                    onRemove,
-                    updateSelectionAfterRemove
-                  ),
-                  shortcut: shortcuts.remove,
-                  children: __("Delete")
-                }
-              ) })
-            ] })
-          }
-        );
-      }
-    }
-  );
-}
-var block_settings_dropdown_default = BlockSettingsDropdown;
-export {
-  BlockSettingsDropdown,
-  block_settings_dropdown_default as default
-};
-//# sourceMappingURL=block-settings-dropdown.js.map

package/build-module/components/block-settings-menu/block-settings-menu-first-item.js

@@ -1,11 +0,0 @@
-// packages/block-editor/src/components/block-settings-menu/block-settings-menu-first-item.js
-import { createSlotFill } from "@wordpress/components";
-var { Fill: __unstableBlockSettingsMenuFirstItem, Slot } = createSlotFill(
-  "__unstableBlockSettingsMenuFirstItem"
-);
-__unstableBlockSettingsMenuFirstItem.Slot = Slot;
-var block_settings_menu_first_item_default = __unstableBlockSettingsMenuFirstItem;
-export {
-  block_settings_menu_first_item_default as default
-};
-//# sourceMappingURL=block-settings-menu-first-item.js.map

package/build-module/components/block-settings-menu/index.js

@@ -1,24 +0,0 @@
-// packages/block-editor/src/components/block-settings-menu/index.js
-import { ToolbarGroup, ToolbarItem } from "@wordpress/components";
-import BlockSettingsDropdown from "./block-settings-dropdown.js";
-import CommentIconToolbarSlotFill from "../collab/block-comment-icon-toolbar-slot.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-function BlockSettingsMenu({ clientIds, ...props }) {
-  return /* @__PURE__ */ jsxs(ToolbarGroup, { children: [
-    /* @__PURE__ */ jsx(CommentIconToolbarSlotFill.Slot, {}),
-    /* @__PURE__ */ jsx(ToolbarItem, { children: (toggleProps) => /* @__PURE__ */ jsx(
-      BlockSettingsDropdown,
-      {
-        clientIds,
-        toggleProps,
-        ...props
-      }
-    ) })
-  ] });
-}
-var block_settings_menu_default = BlockSettingsMenu;
-export {
-  BlockSettingsMenu,
-  block_settings_menu_default as default
-};
-//# sourceMappingURL=index.js.map

package/build-module/components/block-settings-menu-controls/edit-section-menu-item.js

@@ -1,59 +0,0 @@
-// packages/block-editor/src/components/block-settings-menu-controls/edit-section-menu-item.js
-import { MenuItem } from "@wordpress/components";
-import { _x } from "@wordpress/i18n";
-import { useSelect } from "@wordpress/data";
-import { isReusableBlock, isTemplatePart } from "@wordpress/blocks";
-import useContentOnlySectionEdit from "../../hooks/use-content-only-section-edit.js";
-import { store as blockEditorStore } from "../../store/index.js";
-import { jsx } from "react/jsx-runtime";
-function EditSectionMenuItem({ clientId, onClose }) {
-  const {
-    isSectionBlock,
-    isEditingContentOnlySection,
-    editContentOnlySection
-  } = useContentOnlySectionEdit(clientId);
-  const { block, onNavigateToEntityRecord } = useSelect(
-    (select) => {
-      const { getBlock, getSettings } = select(blockEditorStore);
-      return {
-        block: getBlock(clientId),
-        onNavigateToEntityRecord: getSettings().onNavigateToEntityRecord
-      };
-    },
-    [clientId]
-  );
-  if (!window?.__experimentalContentOnlyPatternInsertion || !isSectionBlock || isEditingContentOnlySection) {
-    return null;
-  }
-  const blockAttributes = block?.attributes || {};
-  const isSyncedPattern = isReusableBlock(block);
-  const isTemplatePartBlock = isTemplatePart(block);
-  const shouldNavigateToIsolatedEditor = (isSyncedPattern || isTemplatePartBlock) && onNavigateToEntityRecord;
-  const handleClick = () => {
-    if (shouldNavigateToIsolatedEditor) {
-      if (isSyncedPattern) {
-        onNavigateToEntityRecord({
-          postId: blockAttributes.ref,
-          postType: "wp_block"
-        });
-      } else if (isTemplatePartBlock) {
-        const { theme, slug } = blockAttributes;
-        const templatePartId = theme && slug ? `${theme}//${slug}` : null;
-        if (templatePartId) {
-          onNavigateToEntityRecord({
-            postId: templatePartId,
-            postType: "wp_template_part"
-          });
-        }
-      }
-    } else {
-      editContentOnlySection(clientId);
-    }
-    onClose();
-  };
-  return /* @__PURE__ */ jsx(MenuItem, { onClick: handleClick, children: _x("Edit section", "Editing a section in the Editor") });
-}
-export {
-  EditSectionMenuItem
-};
-//# sourceMappingURL=edit-section-menu-item.js.map

package/build-module/components/block-settings-menu-controls/index.js

@@ -1,131 +0,0 @@
-// packages/block-editor/src/components/block-settings-menu-controls/index.js
-import {
-  createSlotFill,
-  MenuGroup,
-  __experimentalStyleProvider as StyleProvider
-} from "@wordpress/components";
-import { hasBlockSupport } from "@wordpress/blocks";
-import { useSelect } from "@wordpress/data";
-import {
-  useConvertToGroupButtonProps,
-  ConvertToGroupButton
-} from "../convert-to-group-buttons/index.js";
-import { BlockLockMenuItem, useBlockLock } from "../block-lock/index.js";
-import { store as blockEditorStore } from "../../store/index.js";
-import BlockModeToggle from "../block-settings-menu/block-mode-toggle.js";
-import { ModifyContentOnlySectionMenuItem } from "../content-lock/index.js";
-import { BlockRenameControl, useBlockRename } from "../block-rename/index.js";
-import { BlockVisibilityMenuItem } from "../block-visibility/index.js";
-import { EditSectionMenuItem } from "./edit-section-menu-item.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var { Fill, Slot } = createSlotFill("BlockSettingsMenuControls");
-var BlockSettingsMenuControlsSlot = ({ fillProps, clientIds = null }) => {
-  const {
-    selectedBlocks,
-    selectedClientIds,
-    isContentOnly,
-    canToggleSelectedBlocksVisibility
-  } = useSelect(
-    (select) => {
-      const {
-        getBlocksByClientId,
-        getBlockNamesByClientId,
-        getSelectedBlockClientIds,
-        getBlockEditingMode
-      } = select(blockEditorStore);
-      const ids = clientIds !== null ? clientIds : getSelectedBlockClientIds();
-      return {
-        selectedBlocks: getBlockNamesByClientId(ids),
-        selectedClientIds: ids,
-        isContentOnly: getBlockEditingMode(ids[0]) === "contentOnly",
-        canToggleSelectedBlocksVisibility: getBlocksByClientId(
-          ids
-        ).every(
-          (block) => hasBlockSupport(block.name, "visibility", true)
-        )
-      };
-    },
-    [clientIds]
-  );
-  const { canLock } = useBlockLock(selectedClientIds[0]);
-  const { canRename } = useBlockRename(selectedBlocks[0]);
-  const showLockButton = selectedClientIds.length === 1 && canLock && !isContentOnly;
-  const showRenameButton = selectedClientIds.length === 1 && canRename && !isContentOnly;
-  const showVisibilityButton = canToggleSelectedBlocksVisibility && !isContentOnly;
-  const convertToGroupButtonProps = useConvertToGroupButtonProps(selectedClientIds);
-  const { isGroupable, isUngroupable } = convertToGroupButtonProps;
-  const showConvertToGroupButton = (isGroupable || isUngroupable) && !isContentOnly;
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      fillProps: {
-        ...fillProps,
-        selectedBlocks,
-        selectedClientIds
-      },
-      children: (fills) => {
-        if (!fills?.length > 0 && !showConvertToGroupButton && !showLockButton) {
-          return null;
-        }
-        return /* @__PURE__ */ jsxs(MenuGroup, { children: [
-          showConvertToGroupButton && /* @__PURE__ */ jsx(
-            ConvertToGroupButton,
-            {
-              ...convertToGroupButtonProps,
-              onClose: fillProps?.onClose
-            }
-          ),
-          selectedClientIds.length === 1 && /* @__PURE__ */ jsx(
-            EditSectionMenuItem,
-            {
-              clientId: selectedClientIds[0],
-              onClose: fillProps?.onClose
-            }
-          ),
-          showLockButton && /* @__PURE__ */ jsx(
-            BlockLockMenuItem,
-            {
-              clientId: selectedClientIds[0]
-            }
-          ),
-          showRenameButton && /* @__PURE__ */ jsx(
-            BlockRenameControl,
-            {
-              clientId: selectedClientIds[0]
-            }
-          ),
-          showVisibilityButton && /* @__PURE__ */ jsx(
-            BlockVisibilityMenuItem,
-            {
-              clientIds: selectedClientIds
-            }
-          ),
-          fills,
-          selectedClientIds.length === 1 && /* @__PURE__ */ jsx(
-            ModifyContentOnlySectionMenuItem,
-            {
-              clientId: selectedClientIds[0],
-              onClose: fillProps?.onClose
-            }
-          ),
-          fillProps?.count === 1 && !isContentOnly && /* @__PURE__ */ jsx(
-            BlockModeToggle,
-            {
-              clientId: fillProps?.firstBlockClientId,
-              onToggle: fillProps?.onClose
-            }
-          )
-        ] });
-      }
-    }
-  );
-};
-function BlockSettingsMenuControls({ ...props }) {
-  return /* @__PURE__ */ jsx(StyleProvider, { document, children: /* @__PURE__ */ jsx(Fill, { ...props }) });
-}
-BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
-var block_settings_menu_controls_default = BlockSettingsMenuControls;
-export {
-  block_settings_menu_controls_default as default
-};
-//# sourceMappingURL=index.js.map

package/build-module/components/block-styles/index.js

@@ -1,109 +0,0 @@
-// packages/block-editor/src/components/block-styles/index.js
-import clsx from "clsx";
-import { useState } from "@wordpress/element";
-import { debounce, useViewportMatch } from "@wordpress/compose";
-import {
-  Button,
-  __experimentalTruncate as Truncate,
-  Popover
-} from "@wordpress/components";
-import BlockStylesPreviewPanel from "./preview-panel.js";
-import useStylesForBlocks from "./use-styles-for-block.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-var noop = () => {
-};
-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) => {
-    if (hoveredStyle === item) {
-      debouncedSetHoveredStyle.cancel();
-      return;
-    }
-    debouncedSetHoveredStyle(item);
-    onHoverClassName(item?.name ?? null);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "block-editor-block-styles", children: [
-    /* @__PURE__ */ jsx("div", { className: "block-editor-block-styles__variants", children: stylesToRender.map((style) => {
-      const buttonText = style.label || style.name;
-      return /* @__PURE__ */ jsx(
-        Button,
-        {
-          __next40pxDefaultSize: true,
-          className: clsx(
-            "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__ */ jsx(
-            Truncate,
-            {
-              numberOfLines: 1,
-              className: "block-editor-block-styles__item-text",
-              children: buttonText
-            }
-          )
-        },
-        style.name
-      );
-    }) }),
-    hoveredStyle && !isMobileViewport && /* @__PURE__ */ jsx(
-      Popover,
-      {
-        placement: "left-start",
-        offset: 34,
-        focusOnMount: false,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "block-editor-block-styles__preview-panel",
-            onMouseLeave: () => styleItemHandler(null),
-            children: /* @__PURE__ */ jsx(
-              BlockStylesPreviewPanel,
-              {
-                activeStyle,
-                className: previewClassName,
-                genericPreviewBlock,
-                style: hoveredStyle
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
-}
-var block_styles_default = BlockStyles;
-export {
-  block_styles_default as default
-};
-//# sourceMappingURL=index.js.map

package/build-module/components/block-styles/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/block-styles/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { debounce, useViewportMatch } from '@wordpress/compose';\nimport {\n\tButton,\n\t__experimentalTruncate as Truncate,\n\tPopover,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BlockStylesPreviewPanel from './preview-panel';\nimport useStylesForBlocks from './use-styles-for-block';\n\nconst noop = () => {};\n\n// Block Styles component for the Settings Sidebar.\nfunction BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {\n\tconst {\n\t\tonSelect,\n\t\tstylesToRender,\n\t\tactiveStyle,\n\t\tgenericPreviewBlock,\n\t\tclassName: previewClassName,\n\t} = useStylesForBlocks( {\n\t\tclientId,\n\t\tonSwitch,\n\t} );\n\tconst [ hoveredStyle, setHoveredStyle ] = useState( null );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tif ( ! stylesToRender || stylesToRender.length === 0 ) {\n\t\treturn null;\n\t}\n\n\tconst debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );\n\n\tconst onSelectStylePreview = ( style ) => {\n\t\tonSelect( style );\n\t\tonHoverClassName( null );\n\t\tsetHoveredStyle( null );\n\t\tdebouncedSetHoveredStyle.cancel();\n\t};\n\n\tconst styleItemHandler = ( item ) => {\n\t\tif ( hoveredStyle === item ) {\n\t\t\tdebouncedSetHoveredStyle.cancel();\n\t\t\treturn;\n\t\t}\n\t\tdebouncedSetHoveredStyle( item );\n\t\tonHoverClassName( item?.name ?? null );\n\t};\n\n\treturn (\n\t\t<div className=\"block-editor-block-styles\">\n\t\t\t<div className=\"block-editor-block-styles__variants\">\n\t\t\t\t{ stylesToRender.map( ( style ) => {\n\t\t\t\t\tconst buttonText = style.label || style.name;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t'block-editor-block-styles__item',\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t'is-active':\n\t\t\t\t\t\t\t\t\t\tactiveStyle.name === style.name,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\tkey={ style.name }\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tlabel={ buttonText }\n\t\t\t\t\t\t\tonMouseEnter={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonFocus={ () => styleItemHandler( style ) }\n\t\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonBlur={ () => styleItemHandler( null ) }\n\t\t\t\t\t\t\tonClick={ () => onSelectStylePreview( style ) }\n\t\t\t\t\t\t\taria-current={ activeStyle.name === style.name }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Truncate\n\t\t\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"block-editor-block-styles__item-text\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ buttonText }\n\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t\t{ hoveredStyle && ! isMobileViewport && (\n\t\t\t\t<Popover\n\t\t\t\t\tplacement=\"left-start\"\n\t\t\t\t\toffset={ 34 }\n\t\t\t\t\tfocusOnMount={ false }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"block-editor-block-styles__preview-panel\"\n\t\t\t\t\t\tonMouseLeave={ () => styleItemHandler( null ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockStylesPreviewPanel\n\t\t\t\t\t\t\tactiveStyle={ activeStyle }\n\t\t\t\t\t\t\tclassName={ previewClassName }\n\t\t\t\t\t\t\tgenericPreviewBlock={ genericPreviewBlock }\n\t\t\t\t\t\t\tstyle={ hoveredStyle }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default BlockStyles;\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,gBAAgB;AACzB,SAAS,UAAU,wBAAwB;AAC3C;AAAA,EACC;AAAA,EACA,0BAA0B;AAAA,EAC1B;AAAA,OACM;AAKP,OAAO,6BAA6B;AACpC,OAAO,wBAAwB;AA0C7B,SAyBK,KAzBL;AAxCF,IAAM,OAAO,MAAM;AAAC;AAGpB,SAAS,YAAa,EAAE,UAAU,WAAW,MAAM,mBAAmB,KAAK,GAAI;AAC9E,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACZ,IAAI,mBAAoB;AAAA,IACvB;AAAA,IACA;AAAA,EACD,CAAE;AACF,QAAM,CAAE,cAAc,eAAgB,IAAI,SAAU,IAAK;AACzD,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAEzD,MAAK,CAAE,kBAAkB,eAAe,WAAW,GAAI;AACtD,WAAO;AAAA,EACR;AAEA,QAAM,2BAA2B,SAAU,iBAAiB,GAAI;AAEhE,QAAM,uBAAuB,CAAE,UAAW;AACzC,aAAU,KAAM;AAChB,qBAAkB,IAAK;AACvB,oBAAiB,IAAK;AACtB,6BAAyB,OAAO;AAAA,EACjC;AAEA,QAAM,mBAAmB,CAAE,SAAU;AACpC,QAAK,iBAAiB,MAAO;AAC5B,+BAAyB,OAAO;AAChC;AAAA,IACD;AACA,6BAA0B,IAAK;AAC/B,qBAAkB,MAAM,QAAQ,IAAK;AAAA,EACtC;AAEA,SACC,qBAAC,SAAI,WAAU,6BACd;AAAA,wBAAC,SAAI,WAAU,uCACZ,yBAAe,IAAK,CAAE,UAAW;AAClC,YAAM,aAAa,MAAM,SAAS,MAAM;AAExC,aACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,WAAY;AAAA,YACX;AAAA,YACA;AAAA,cACC,aACC,YAAY,SAAS,MAAM;AAAA,YAC7B;AAAA,UACD;AAAA,UAEA,SAAQ;AAAA,UACR,OAAQ;AAAA,UACR,cAAe,MAAM,iBAAkB,KAAM;AAAA,UAC7C,SAAU,MAAM,iBAAkB,KAAM;AAAA,UACxC,cAAe,MAAM,iBAAkB,IAAK;AAAA,UAC5C,QAAS,MAAM,iBAAkB,IAAK;AAAA,UACtC,SAAU,MAAM,qBAAsB,KAAM;AAAA,UAC5C,gBAAe,YAAY,SAAS,MAAM;AAAA,UAE1C;AAAA,YAAC;AAAA;AAAA,cACA,eAAgB;AAAA,cAChB,WAAU;AAAA,cAER;AAAA;AAAA,UACH;AAAA;AAAA,QAfM,MAAM;AAAA,MAgBb;AAAA,IAEF,CAAE,GACH;AAAA,IACE,gBAAgB,CAAE,oBACnB;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,QAAS;AAAA,QACT,cAAe;AAAA,QAEf;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,cAAe,MAAM,iBAAkB,IAAK;AAAA,YAE5C;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,WAAY;AAAA,gBACZ;AAAA,gBACA,OAAQ;AAAA;AAAA,YACT;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,uBAAQ;",
-  "names": []
-}