@wordpress/block-editor
Version:
238 lines (237 loc) • 8.98 kB
JavaScript
// packages/block-editor/src/components/block-toolbar/index.js
import clsx from "clsx";
import { __ } from "@wordpress/i18n";
import { useSelect } from "@wordpress/data";
import { useRef } from "@wordpress/element";
import { useViewportMatch } from "@wordpress/compose";
import {
getBlockType,
hasBlockSupport,
isReusableBlock,
isTemplatePart
} from "@wordpress/blocks";
import { ToolbarGroup } from "@wordpress/components";
import BlockMover from "../block-mover";
import BlockParentSelector from "../block-parent-selector";
import BlockControls from "../block-controls";
import __unstableBlockToolbarLastItem from "./block-toolbar-last-item";
import BlockSettingsMenu from "../block-settings-menu";
import { BlockLockToolbar } from "../block-lock";
import { BlockVisibilityToolbar } from "../block-visibility";
import { BlockGroupToolbar } from "../convert-to-group-buttons";
import BlockEditVisuallyButton from "../block-edit-visually-button";
import { useShowHoveredOrFocusedGestures } from "./utils";
import { store as blockEditorStore } from "../../store";
import NavigableToolbar from "../navigable-toolbar";
import { useHasBlockToolbar } from "./use-has-block-toolbar";
import ChangeDesign from "./change-design";
import SwitchSectionStyle from "./switch-section-style";
import { unlock } from "../../lock-unlock";
import BlockToolbarIcon from "./block-toolbar-icon";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function PrivateBlockToolbar({
hideDragHandle,
focusOnMount,
__experimentalInitialIndex,
__experimentalOnIndexChange,
variant = "unstyled"
}) {
const {
blockClientId,
blockClientIds,
isDefaultEditingMode,
blockType,
toolbarKey,
shouldShowVisualToolbar,
showParentSelector,
isUsingBindings,
isSectionContainer,
hasContentOnlyLocking,
showShuffleButton,
showSlots,
showGroupButtons,
showLockButtons,
showBlockVisibilityButton,
showSwitchSectionStyleButton
} = useSelect((select) => {
const {
getBlockName,
getBlockMode,
getBlockParents,
getSelectedBlockClientIds,
isBlockValid,
getBlockEditingMode,
getBlockAttributes,
getTemplateLock,
getParentSectionBlock,
isZoomOut,
isSectionBlock
} = unlock(select(blockEditorStore));
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[0];
const parents = getBlockParents(selectedBlockClientId);
const parentSection = getParentSectionBlock(selectedBlockClientId);
const parentClientId = parentSection ?? parents[parents.length - 1];
const parentBlockName = getBlockName(parentClientId);
const parentBlockType = getBlockType(parentBlockName);
const editingMode = getBlockEditingMode(selectedBlockClientId);
const _isDefaultEditingMode = editingMode === "default";
const _blockName = getBlockName(selectedBlockClientId);
const isValid = selectedBlockClientIds.every(
(id) => isBlockValid(id)
);
const isVisual = selectedBlockClientIds.every(
(id) => getBlockMode(id) === "visual"
);
const _isUsingBindings = selectedBlockClientIds.every(
(clientId) => !!getBlockAttributes(clientId)?.metadata?.bindings
);
const _hasTemplateLock = selectedBlockClientIds.some(
(id) => getTemplateLock(id) === "contentOnly"
);
const _isZoomOut = isZoomOut();
const _isSectionBlock = isSectionBlock(selectedBlockClientId);
const _showSwitchSectionStyleButton = window?.__experimentalContentOnlyPatternInsertion && (_isZoomOut || _isSectionBlock);
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && getBlockType(_blockName),
shouldShowVisualToolbar: isValid && isVisual,
toolbarKey: `${selectedBlockClientId}${parentClientId}`,
showParentSelector: !_isZoomOut && parentBlockType && editingMode !== "contentOnly" && getBlockEditingMode(parentClientId) !== "disabled" && hasBlockSupport(
parentBlockType,
"__experimentalParentSelector",
true
) && selectedBlockClientIds.length === 1,
isUsingBindings: _isUsingBindings,
isSectionContainer: _isSectionBlock,
hasContentOnlyLocking: _hasTemplateLock,
showShuffleButton: _isZoomOut,
showSlots: !_isZoomOut,
showGroupButtons: !_isZoomOut,
showLockButtons: !_isZoomOut,
showBlockVisibilityButton: !_isZoomOut,
showSwitchSectionStyleButton: _showSwitchSectionStyleButton
};
}, []);
const toolbarWrapperRef = useRef(null);
const nodeRef = useRef();
const showHoveredOrFocusedGestures = useShowHoveredOrFocusedGestures({
ref: nodeRef
});
const isLargeViewport = !useViewportMatch("medium", "<");
const hasBlockToolbar = useHasBlockToolbar();
if (!hasBlockToolbar) {
return null;
}
const isMultiToolbar = blockClientIds.length > 1;
const isSynced = isReusableBlock(blockType) || isTemplatePart(blockType);
const classes = clsx("block-editor-block-contextual-toolbar", {
"has-parent": showParentSelector
});
const innerClasses = clsx("block-editor-block-toolbar", {
"is-synced": isSynced,
"is-connected": isUsingBindings
});
return /* @__PURE__ */ jsx(
NavigableToolbar,
{
focusEditorOnEscape: true,
className: classes,
"aria-label": __("Block tools"),
variant: variant === "toolbar" ? void 0 : variant,
focusOnMount,
__experimentalInitialIndex,
__experimentalOnIndexChange,
children: /* @__PURE__ */ jsxs("div", { ref: toolbarWrapperRef, className: innerClasses, children: [
showParentSelector && !isMultiToolbar && isLargeViewport && /* @__PURE__ */ jsx(BlockParentSelector, {}),
(shouldShowVisualToolbar || isMultiToolbar) && /* @__PURE__ */ jsx("div", { ref: nodeRef, ...showHoveredOrFocusedGestures, children: /* @__PURE__ */ jsxs(ToolbarGroup, { className: "block-editor-block-toolbar__block-controls", children: [
/* @__PURE__ */ jsx(
BlockToolbarIcon,
{
clientIds: blockClientIds,
isSynced
}
),
isDefaultEditingMode && showBlockVisibilityButton && /* @__PURE__ */ jsx(
BlockVisibilityToolbar,
{
clientIds: blockClientIds
}
),
!isMultiToolbar && isDefaultEditingMode && showLockButtons && /* @__PURE__ */ jsx(
BlockLockToolbar,
{
clientId: blockClientId
}
),
/* @__PURE__ */ jsx(
BlockMover,
{
clientIds: blockClientIds,
hideDragHandle
}
)
] }) }),
!hasContentOnlyLocking && shouldShowVisualToolbar && isMultiToolbar && showGroupButtons && /* @__PURE__ */ jsx(BlockGroupToolbar, {}),
showShuffleButton && /* @__PURE__ */ jsx(ChangeDesign, { clientId: blockClientIds[0] }),
showSwitchSectionStyleButton && /* @__PURE__ */ jsx(SwitchSectionStyle, { clientId: blockClientIds[0] }),
shouldShowVisualToolbar && showSlots && /* @__PURE__ */ jsxs(Fragment, { children: [
!isSectionContainer && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
BlockControls.Slot,
{
group: "parent",
className: "block-editor-block-toolbar__slot"
}
),
/* @__PURE__ */ jsx(
BlockControls.Slot,
{
group: "block",
className: "block-editor-block-toolbar__slot"
}
),
/* @__PURE__ */ jsx(BlockControls.Slot, { className: "block-editor-block-toolbar__slot" }),
/* @__PURE__ */ jsx(
BlockControls.Slot,
{
group: "inline",
className: "block-editor-block-toolbar__slot"
}
)
] }),
/* @__PURE__ */ jsx(
BlockControls.Slot,
{
group: "other",
className: "block-editor-block-toolbar__slot"
}
),
/* @__PURE__ */ jsx(__unstableBlockToolbarLastItem.Slot, {})
] }),
/* @__PURE__ */ jsx(BlockEditVisuallyButton, { clientIds: blockClientIds }),
/* @__PURE__ */ jsx(BlockSettingsMenu, { clientIds: blockClientIds })
] })
},
toolbarKey
);
}
function BlockToolbar({ hideDragHandle, variant }) {
return /* @__PURE__ */ jsx(
PrivateBlockToolbar,
{
hideDragHandle,
variant,
focusOnMount: void 0,
__experimentalInitialIndex: void 0,
__experimentalOnIndexChange: void 0
}
);
}
export {
PrivateBlockToolbar,
BlockToolbar as default
};
//# sourceMappingURL=index.js.map