@wordpress/block-editor
Version:
90 lines (89 loc) • 2.83 kB
JavaScript
// packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js
import { useSelect, useDispatch } from "@wordpress/data";
import { useEffect, useState } from "@wordpress/element";
import BlockPopoverInbetween from "../block-popover/inbetween.mjs";
import ZoomOutModeInserterButton from "./zoom-out-mode-inserter-button.mjs";
import { store as blockEditorStore } from "../../store/index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { jsx } from "react/jsx-runtime";
function ZoomOutModeInserters() {
const [isReady, setIsReady] = useState(false);
const {
hasSelection,
blockOrder,
setInserterIsOpened,
sectionRootClientId,
selectedBlockClientId,
blockInsertionPoint,
insertionPointVisible
} = useSelect((select) => {
const {
getSettings,
getBlockOrder,
getSelectionStart,
getSelectedBlockClientId,
getSectionRootClientId,
getBlockInsertionPoint,
isBlockInsertionPointVisible
} = unlock(select(blockEditorStore));
const root = getSectionRootClientId();
return {
hasSelection: !!getSelectionStart().clientId,
blockOrder: getBlockOrder(root),
sectionRootClientId: root,
setInserterIsOpened: getSettings().__experimentalSetIsInserterOpened,
selectedBlockClientId: getSelectedBlockClientId(),
blockInsertionPoint: getBlockInsertionPoint(),
insertionPointVisible: isBlockInsertionPointVisible()
};
}, []);
const { showInsertionPoint } = unlock(useDispatch(blockEditorStore));
useEffect(() => {
const timeout = setTimeout(() => {
setIsReady(true);
}, 500);
return () => {
clearTimeout(timeout);
};
}, []);
if (!isReady || !hasSelection) {
return null;
}
const previousClientId = selectedBlockClientId;
const index = blockOrder.findIndex(
(clientId) => selectedBlockClientId === clientId
);
const insertionIndex = index + 1;
const nextClientId = blockOrder[insertionIndex];
if (insertionPointVisible && blockInsertionPoint?.index === insertionIndex) {
return null;
}
return /* @__PURE__ */ jsx(
BlockPopoverInbetween,
{
previousClientId,
nextClientId,
children: /* @__PURE__ */ jsx(
ZoomOutModeInserterButton,
{
onClick: () => {
setInserterIsOpened({
rootClientId: sectionRootClientId,
insertionIndex,
tab: "patterns",
category: "all"
});
showInsertionPoint(sectionRootClientId, insertionIndex, {
operation: "insert"
});
}
}
)
}
);
}
var zoom_out_mode_inserters_default = ZoomOutModeInserters;
export {
zoom_out_mode_inserters_default as default
};
//# sourceMappingURL=zoom-out-mode-inserters.mjs.map