Skip to content

Commit

Permalink
Move some code around
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Dec 13, 2023
1 parent 359b5b8 commit 59607c9
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 55 deletions.
50 changes: 31 additions & 19 deletions packages/block-editor/src/components/block-draggable/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import BlockDraggableChip from './draggable-chip';
import useScrollWhenDragging from './use-scroll-when-dragging';
import { store as blockEditorStore } from '../../store';
import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
import { useIsDropTargetValid } from '../use-block-drop-zone';
import { isDropTargetValid } from '../use-block-drop-zone';

const BlockDraggable = ( {
children,
Expand All @@ -26,19 +26,24 @@ const BlockDraggable = ( {
srcRootClientId,
isDraggable,
icon,
getBlockListSettings,
visibleInserter,
getBlockType,
getAllowedBlocks,
draggedBlockNames,
getBlockNamesByClientId,
} = useSelect(
( select ) => {
const {
canMoveBlocks,
getBlockRootClientId,
getBlockName,
getBlockAttributes,
getBlockListSettings: _getBlockListSettings,
isBlockInsertionPointVisible,
getDraggedBlockClientIds,
getBlockNamesByClientId: _getBlockNamesByClientId,
getAllowedBlocks: _getAllowedBlocks,
} = select( blockEditorStore );
const { getBlockType, getActiveBlockVariation } =
const { getBlockType: _getBlockType, getActiveBlockVariation } =
select( blocksStore );
const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
const blockName = getBlockName( clientIds[ 0 ] );
Expand All @@ -50,18 +55,21 @@ const BlockDraggable = ( {
return {
srcRootClientId: rootClientId,
isDraggable: canMoveBlocks( clientIds, rootClientId ),
icon: variation?.icon || getBlockType( blockName )?.icon,
getBlockListSettings: _getBlockListSettings,
icon: variation?.icon || _getBlockType( blockName )?.icon,
visibleInserter: isBlockInsertionPointVisible(),
getBlockType: _getBlockType,
getAllowedBlocks: _getAllowedBlocks,
draggedBlockNames: _getBlockNamesByClientId(
getDraggedBlockClientIds()
),
getBlockNamesByClientId: _getBlockNamesByClientId,
};
},
[ clientIds ]
);

const [ targetClientId, setTargetClientId ] = useState( null );

const isDropTargetValid = useIsDropTargetValid( clientIds, targetClientId );

const isDragging = useRef( false );
const [ startScrolling, scrollOnDragOver, stopScrolling ] =
useScrollWhenDragging();
Expand Down Expand Up @@ -100,16 +108,25 @@ const BlockDraggable = ( {
.getAttribute( 'data-block' );
//Only update targetClientId if it has changed
// and if it's a container block
if (
targetClientId !== newTargetClientId &&
getBlockListSettings( newTargetClientId )
) {
if ( targetClientId !== newTargetClientId ) {
setTargetClientId( newTargetClientId );
}

const allowedBlocks = getAllowedBlocks( targetClientId );
const targetBlockName = getBlockNamesByClientId( [
targetClientId,
] )[ 0 ];
const dropTargetValid = isDropTargetValid(
getBlockType,
allowedBlocks,
draggedBlockNames,
targetBlockName
);

// Update the body class to reflect if drop target is valid.
// This has to be done on the document body because the draggable
// chip is rendered outside of the editor iframe.
if ( ! isDropTargetValid && ! visibleInserter ) {
if ( ! dropTargetValid && ! visibleInserter ) {
window?.document?.body?.classList?.add(
'block-draggable-invalid-drag-token'
);
Expand Down Expand Up @@ -168,12 +185,7 @@ const BlockDraggable = ( {
}
} }
__experimentalDragComponent={
<BlockDraggableChip
count={ clientIds.length }
icon={ icon }
clientIds={ clientIds }
targetClientId={ targetClientId }
/>
<BlockDraggableChip count={ clientIds.length } icon={ icon } />
}
>
{ ( { onDraggableStart, onDraggableEnd } ) => {
Expand Down
79 changes: 43 additions & 36 deletions packages/block-editor/src/components/use-block-drop-zone/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,35 +195,19 @@ export function getDropTargetPosition(
}

/**
* A Rect hook that takes an array of dragged block client ids and a target client id
* and determines if the dragged blocks can be dropped on the target.
*
* @param {string[]} draggedBlockClientIds The client ids of the dragged blocks.
* @param {string} targetClientId The client id of the target.
* Check if the dragged blocks can be dropped on the target.
* @param {Function} getBlockType
* @param {Object[]} allowedBlocks
* @param {string[]} draggedBlockNames
* @param {string} targetBlockName
* @return {boolean} Whether the dragged blocks can be dropped on the target.
*/
export function useIsDropTargetValid( draggedBlockClientIds, targetClientId ) {
const { getBlockType, allowedBlocks, draggedBlockNames, targetBlockName } =
useSelect(
( select ) => {
const { getBlockType: _getBlockType } = select( blocksStore );
const { getBlockNamesByClientId, getAllowedBlocks } =
select( blockEditorStore );

return {
getBlockType: _getBlockType,
allowedBlocks: getAllowedBlocks( targetClientId ),
draggedBlockNames: getBlockNamesByClientId(
draggedBlockClientIds
),
targetBlockName: getBlockNamesByClientId( [
targetClientId,
] )[ 0 ],
};
},
[ draggedBlockClientIds, targetClientId ]
);

export function isDropTargetValid(
getBlockType,
allowedBlocks,
draggedBlockNames,
targetBlockName
) {
// At root level allowedBlocks is undefined and all blocks are allowed.
// Otherwise, check if all dragged blocks are allowed.
let areBlocksAllowed = true;
Expand All @@ -250,6 +234,7 @@ export function useIsDropTargetValid( draggedBlockClientIds, targetClientId ) {
return allowedParentName === targetBlockName;
}
);

return areBlocksAllowed && targetMatchesDraggedBlockParents;
}

Expand Down Expand Up @@ -282,7 +267,10 @@ export default function useBlockDropZone( {
parentBlockClientId,
rootBlockIndex,
isDisabled,
draggedBlockClientIds,
getBlockType,
allowedBlocks,
draggedBlockNames,
targetBlockName,
} = useSelect(
( select ) => {
const {
Expand All @@ -292,8 +280,10 @@ export default function useBlockDropZone( {
getBlockParents,
getBlockEditingMode,
getDraggedBlockClientIds,
getBlockNamesByClientId,
getAllowedBlocks,
} = select( blockEditorStore );

const { getBlockType: _getBlockType } = select( blocksStore );
const blockEditingMode = getBlockEditingMode( targetRootClientId );
return {
parentBlockClientId:
Expand All @@ -305,17 +295,20 @@ export default function useBlockDropZone( {
targetRootClientId
) ||
__unstableIsWithinBlockOverlay( targetRootClientId ),
draggedBlockClientIds: getDraggedBlockClientIds(),

getBlockType: _getBlockType,
allowedBlocks: getAllowedBlocks( targetRootClientId ),
draggedBlockNames: getBlockNamesByClientId(
getDraggedBlockClientIds()
),
targetBlockName: getBlockNamesByClientId( [
targetRootClientId,
] )[ 0 ],
};
},
[ targetRootClientId ]
);

const isBlockDroppingAllowed = useIsDropTargetValid(
draggedBlockClientIds,
targetRootClientId
);

const { getBlockListSettings, getBlocks, getBlockIndex } =
useSelect( blockEditorStore );
const { showInsertionPoint, hideInsertionPoint } =
Expand All @@ -333,6 +326,16 @@ export default function useBlockDropZone( {
const throttled = useThrottle(
useCallback(
( event, ownerDocument ) => {
const isBlockDroppingAllowed = isDropTargetValid(
getBlockType,
allowedBlocks,
draggedBlockNames,
targetBlockName
);
if ( ! isBlockDroppingAllowed ) {
return;
}

const blocks = getBlocks( targetRootClientId );

// The block list is empty, don't show the insertion point but still allow dropping.
Expand Down Expand Up @@ -406,14 +409,18 @@ export default function useBlockDropZone( {
getBlockIndex,
parentBlockClientId,
rootBlockIndex,
getBlockType,
allowedBlocks,
draggedBlockNames,
targetBlockName,
]
),
200
);

return useDropZone( {
dropZoneElement,
isDisabled: isDisabled || ! isBlockDroppingAllowed,
isDisabled,
onDrop: onBlockDrop,
onDragOver( event ) {
// `currentTarget` is only available while the event is being
Expand Down

0 comments on commit 59607c9

Please sign in to comment.