@wordpress/block-editor
Version:
75 lines (72 loc) • 2.3 kB
JavaScript
import { createElement } from "@wordpress/element";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { __experimentalTreeGridCell as TreeGridCell } from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
/**
* Internal dependencies
*/
import BlockNavigationLeaf from './leaf';
import Indentation from './indentation';
import Inserter from '../inserter';
import { store as blockEditorStore } from '../../store';
export default function BlockNavigationAppender({
parentBlockClientId,
position,
level,
rowCount,
path
}) {
const isDragging = useSelect(select => {
const {
isBlockBeingDragged,
isAncestorBeingDragged
} = select(blockEditorStore);
return isBlockBeingDragged(parentBlockClientId) || isAncestorBeingDragged(parentBlockClientId);
}, [parentBlockClientId]);
const instanceId = useInstanceId(BlockNavigationAppender);
const descriptionId = `block-navigation-appender-row__description_${instanceId}`;
const appenderPositionDescription = sprintf(
/* translators: 1: The numerical position of the block that will be inserted. 2: The level of nesting for the block that will be inserted. */
__('Add block at position %1$d, Level %2$d'), position, level);
return createElement(BlockNavigationLeaf, {
className: classnames({
'is-dragging': isDragging
}),
level: level,
position: position,
rowCount: rowCount,
path: path
}, createElement(TreeGridCell, {
className: "block-editor-block-navigation-appender__cell",
colSpan: "3"
}, ({
ref,
tabIndex,
onFocus
}) => createElement("div", {
className: "block-editor-block-navigation-appender__container"
}, createElement(Indentation, {
level: level
}), createElement(Inserter, {
rootClientId: parentBlockClientId,
__experimentalIsQuick: true,
"aria-describedby": descriptionId,
toggleProps: {
ref,
tabIndex,
onFocus
}
}), createElement("div", {
className: "block-editor-block-navigation-appender__description",
id: descriptionId
}, appenderPositionDescription))));
}
//# sourceMappingURL=appender.js.map