@wordpress/block-editor
Version:
91 lines (90 loc) • 3.2 kB
JavaScript
// packages/block-editor/src/components/list-view/appender.js
import { useInstanceId } from "@wordpress/compose";
import { speak } from "@wordpress/a11y";
import { useSelect } from "@wordpress/data";
import { forwardRef, useEffect } from "@wordpress/element";
import { __, sprintf } from "@wordpress/i18n";
import { store as blockEditorStore } from "../../store";
import useBlockDisplayTitle from "../block-title/use-block-display-title";
import { useListViewContext } from "./context";
import Inserter from "../inserter";
import AriaReferencedText from "./aria-referenced-text";
import { unlock } from "../../lock-unlock";
import { jsx, jsxs } from "react/jsx-runtime";
var Appender = forwardRef(
({ nestingLevel, blockCount, clientId, ...props }, ref) => {
const { insertedBlock, setInsertedBlock } = useListViewContext();
const instanceId = useInstanceId(Appender);
const { directInsert, hideInserter } = useSelect(
(select) => {
const { getBlockListSettings, getTemplateLock, isZoomOut } = unlock(select(blockEditorStore));
const settings = getBlockListSettings(clientId);
const directInsertValue = settings?.directInsert || false;
const hideInserterValue = !!getTemplateLock(clientId) || isZoomOut();
return {
directInsert: directInsertValue,
hideInserter: hideInserterValue
};
},
[clientId]
);
const blockTitle = useBlockDisplayTitle({
clientId,
context: "list-view"
});
const insertedBlockTitle = useBlockDisplayTitle({
clientId: insertedBlock?.clientId,
context: "list-view"
});
useEffect(() => {
if (!insertedBlockTitle?.length) {
return;
}
speak(
sprintf(
// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
__("%s block inserted"),
insertedBlockTitle
),
"assertive"
);
}, [insertedBlockTitle]);
if (hideInserter) {
return null;
}
const descriptionId = `list-view-appender__${instanceId}`;
const description = sprintf(
/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
__("Append to %1$s block at position %2$d, Level %3$d"),
blockTitle,
blockCount + 1,
nestingLevel
);
return /* @__PURE__ */ jsxs("div", { className: "list-view-appender", children: [
/* @__PURE__ */ jsx(
Inserter,
{
ref,
rootClientId: clientId,
position: "bottom right",
isAppender: true,
selectBlockOnInsert: false,
shouldDirectInsert: directInsert,
__experimentalIsQuick: true,
...props,
toggleProps: { "aria-describedby": descriptionId },
onSelectOrClose: (maybeInsertedBlock) => {
if (maybeInsertedBlock?.clientId) {
setInsertedBlock(maybeInsertedBlock);
}
}
}
),
/* @__PURE__ */ jsx(AriaReferencedText, { id: descriptionId, children: description })
] });
}
);
export {
Appender
};
//# sourceMappingURL=appender.js.map