@wordpress/block-editor
Version:
71 lines (70 loc) • 2.19 kB
JavaScript
// packages/block-editor/src/components/block-navigation/dropdown.js
import deprecated from "@wordpress/deprecated";
import { Button, Dropdown } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { forwardRef } from "@wordpress/element";
import { listView } from "@wordpress/icons";
import ListView from "../list-view";
import { store as blockEditorStore } from "../../store";
import { jsx, jsxs } from "react/jsx-runtime";
function BlockNavigationDropdownToggle({
isEnabled,
onToggle,
isOpen,
innerRef,
...props
}) {
return /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
...props,
ref: innerRef,
icon: listView,
"aria-expanded": isOpen,
"aria-haspopup": "true",
onClick: isEnabled ? onToggle : void 0,
label: __("List view"),
className: "block-editor-block-navigation",
"aria-disabled": !isEnabled
}
);
}
function BlockNavigationDropdown({ isDisabled, ...props }, ref) {
deprecated("wp.blockEditor.BlockNavigationDropdown", {
since: "6.1",
alternative: "wp.components.Dropdown and wp.blockEditor.ListView"
});
const hasBlocks = useSelect(
(select) => !!select(blockEditorStore).getBlockCount(),
[]
);
const isEnabled = hasBlocks && !isDisabled;
return /* @__PURE__ */ jsx(
Dropdown,
{
contentClassName: "block-editor-block-navigation__popover",
popoverProps: { placement: "bottom-start" },
renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ jsx(
BlockNavigationDropdownToggle,
{
...props,
innerRef: ref,
isOpen,
onToggle,
isEnabled
}
),
renderContent: () => /* @__PURE__ */ jsxs("div", { className: "block-editor-block-navigation__container", children: [
/* @__PURE__ */ jsx("p", { className: "block-editor-block-navigation__label", children: __("List view") }),
/* @__PURE__ */ jsx(ListView, {})
] })
}
);
}
var dropdown_default = forwardRef(BlockNavigationDropdown);
export {
dropdown_default as default
};
//# sourceMappingURL=dropdown.js.map