@wordpress/block-editor
Version:
85 lines (84 loc) • 2.63 kB
JavaScript
/**
* WordPress dependencies
*/
import { Draggable } from '@wordpress/components';
import { createBlock, store as blocksStore } from '@wordpress/blocks';
import { useDispatch, useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';
/**
* Internal dependencies
*/
import BlockDraggableChip from '../block-draggable/draggable-chip';
import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { jsx as _jsx } from "react/jsx-runtime";
const InserterDraggableBlocks = ({
isEnabled,
blocks,
icon,
children,
pattern
}) => {
const blockTypeIcon = useSelect(select => {
const {
getBlockType
} = select(blocksStore);
return blocks.length === 1 && getBlockType(blocks[0].name)?.icon;
}, [blocks]);
const {
startDragging,
stopDragging
} = unlock(useDispatch(blockEditorStore));
const patternBlock = useMemo(() => {
return pattern?.type === INSERTER_PATTERN_TYPES.user && pattern?.syncStatus !== 'unsynced' ? [createBlock('core/block', {
ref: pattern.id
})] : undefined;
}, [pattern?.type, pattern?.syncStatus, pattern?.id]);
if (!isEnabled) {
return children({
draggable: false,
onDragStart: undefined,
onDragEnd: undefined
});
}
const draggableBlocks = patternBlock !== null && patternBlock !== void 0 ? patternBlock : blocks;
return /*#__PURE__*/_jsx(Draggable, {
__experimentalTransferDataType: "wp-blocks",
transferData: {
type: 'inserter',
blocks: draggableBlocks
},
onDragStart: event => {
startDragging();
for (const block of draggableBlocks) {
const type = `wp-block:${block.name}`;
// This will fill in the dataTransfer.types array so that
// the drop zone can check if the draggable is eligible.
// Unfortuantely, on drag start, we don't have access to the
// actual data, only the data keys/types.
event.dataTransfer.items.add('', type);
}
},
onDragEnd: () => {
stopDragging();
},
__experimentalDragComponent: /*#__PURE__*/_jsx(BlockDraggableChip, {
count: blocks.length,
icon: icon || !pattern && blockTypeIcon,
isPattern: !!pattern
}),
children: ({
onDraggableStart,
onDraggableEnd
}) => {
return children({
draggable: true,
onDragStart: onDraggableStart,
onDragEnd: onDraggableEnd
});
}
});
};
export default InserterDraggableBlocks;
//# sourceMappingURL=index.js.map