@wordpress/block-library
Version:
Block library for the WordPress editor.
88 lines (87 loc) • 2.77 kB
JavaScript
// packages/block-library/src/navigation/edit/navigation-link-ui.js
import { store as blockEditorStore } from "@wordpress/block-editor";
import { useDispatch, useSelect } from "@wordpress/data";
import {
LinkUI,
updateAttributes,
useEntityBinding
} from "../../navigation-link/shared/index.mjs";
import { jsx } from "react/jsx-runtime";
var BLOCKS_WITH_LINK_UI_SUPPORT = [
"core/navigation-link",
"core/navigation-submenu"
];
function NavigationLinkUI({
insertedBlockClientId,
setInsertedBlockClientId
}) {
const { updateBlockAttributes, removeBlock } = useDispatch(blockEditorStore);
const { insertedBlockName, insertedBlockAttributes } = useSelect(
(select) => {
const { getBlockName, getBlockAttributes } = select(blockEditorStore);
return {
insertedBlockName: getBlockName(insertedBlockClientId),
insertedBlockAttributes: getBlockAttributes(
insertedBlockClientId
)
};
},
[insertedBlockClientId]
);
const showLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(insertedBlockName);
const { createBinding, clearBinding } = useEntityBinding({
clientId: insertedBlockClientId,
attributes: insertedBlockAttributes || {}
});
if (!showLinkControls) {
return null;
}
const cleanupInsertedBlock = () => {
const shouldAutoSelectBlock = false;
if (!insertedBlockAttributes?.url && insertedBlockClientId) {
removeBlock(insertedBlockClientId, shouldAutoSelectBlock);
}
setInsertedBlockClientId(null);
};
const setInsertedBlockAttributes = (_insertedBlockClientId) => (_updatedAttributes) => {
if (!_insertedBlockClientId) {
return;
}
updateBlockAttributes(_insertedBlockClientId, _updatedAttributes);
};
const handleSetInsertedBlock = (newBlock) => {
const shouldAutoSelectBlock = false;
if (insertedBlockClientId && newBlock) {
removeBlock(insertedBlockClientId, shouldAutoSelectBlock);
}
setInsertedBlockClientId(newBlock?.clientId ?? null);
};
return /* @__PURE__ */ jsx(
LinkUI,
{
clientId: insertedBlockClientId,
link: insertedBlockAttributes,
onBlockInsert: handleSetInsertedBlock,
onClose: () => {
cleanupInsertedBlock();
},
onChange: (updatedValue) => {
const { isEntityLink, attributes: updatedAttributes } = updateAttributes(
updatedValue,
setInsertedBlockAttributes(insertedBlockClientId),
insertedBlockAttributes
);
if (isEntityLink) {
createBinding(updatedAttributes);
} else {
clearBinding();
}
setInsertedBlockClientId(null);
}
}
);
}
export {
NavigationLinkUI
};
//# sourceMappingURL=navigation-link-ui.mjs.map