// packages/block-editor/src/components/block-settings-menu/block-mode-toggle.js
import { __ } from "@wordpress/i18n";
import { MenuItem } from "@wordpress/components";
import { getBlockType, hasBlockSupport } from "@wordpress/blocks";
import { useDispatch, useSelect } from "@wordpress/data";
import { store as blockEditorStore } from "../../store";
import { jsx } from "react/jsx-runtime";
var noop = () => {
};
function BlockModeToggle({ clientId, onToggle = noop }) {
  const { blockType, mode, enabled } = useSelect(
    (select) => {
      const { getBlock, getBlockMode, getSettings } = select(blockEditorStore);
      const block = getBlock(clientId);
      return {
        mode: getBlockMode(clientId),
        blockType: block ? getBlockType(block.name) : null,
        enabled: getSettings().codeEditingEnabled && !!block?.isValid
      };
    },
    [clientId]
  );
  const { toggleBlockMode } = useDispatch(blockEditorStore);
  if (!blockType || !hasBlockSupport(blockType, "html", true) || !enabled) {
    return null;
  }
  const label = mode === "visual" ? __("Edit as HTML") : __("Edit visually");
  return /* @__PURE__ */ jsx(
    MenuItem,
    {
      onClick: () => {
        toggleBlockMode(clientId);
        onToggle();
      },
      children: label
    }
  );
}
export {
  BlockModeToggle as default
};
//# sourceMappingURL=block-mode-toggle.js.map
