Skip to content

Commit

Permalink
Update dragging enabled calculation
Browse files Browse the repository at this point in the history
In order to prevent issues related to disabling the long-press gesture in elements within the block UI, the logic for enabling the dragging has been updated. Now it will enabled in the following cases:
- The block doesn't have inner blocks. This applies to root blocks and nested blocks without further nested blocks.
- Blocks with nested blocks if the block is selected.
- Blocks with nested blocks if none of the nested blocks is selected.
  • Loading branch information
fluiddot committed May 6, 2022
1 parent adbc1d6 commit c3e6576
Showing 1 changed file with 12 additions and 7 deletions.
19 changes: 12 additions & 7 deletions packages/block-editor/src/components/block-list/block.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -260,8 +260,9 @@ class BlockListBlock extends Component {
/>
) }
<BlockDraggable
clientId={ clientId }
draggingClientId={ draggingClientId }
enabled={ draggingEnabled }
clientId={ draggingClientId }
>
{ () =>
isValid ? (
Expand Down Expand Up @@ -319,6 +320,7 @@ export default compose( [
withSelect( ( select, { clientId } ) => {
const {
getBlockIndex,
getBlockCount,
getSettings,
isBlockSelected,
getBlock,
Expand Down Expand Up @@ -371,14 +373,17 @@ export default compose( [
const baseGlobalStyles = getSettings()
?.__experimentalGlobalStylesBaseStyles;

const topRootClientId = getBlockHierarchyRootClientId( clientId );
const isRootBlock = clientId === topRootClientId;
// For blocks with inner blocks, we only enable the dragging in the nested blocks. This way
// we prevent the long-press gesture from being disabled for elements within the block UI.
const draggingEnabled = ! isRootBlock || ! isInnerBlockSelected;
const hasInnerBlocks = getBlockCount( clientId ) > 0;
// For blocks with inner blocks, we only enable the dragging in the nested
// blocks if any of them are selected. This way we prevent the long-press
// gesture from being disabled for elements within the block UI.
const draggingEnabled =
! hasInnerBlocks ||
isSelected ||
! hasSelectedInnerBlock( clientId, true );
// Dragging nested blocks is not supported yet. For this reason, the block to be dragged
// will be the top in the hierarchy.
const draggingClientId = topRootClientId;
const draggingClientId = getBlockHierarchyRootClientId( clientId );

return {
icon,
Expand Down

0 comments on commit c3e6576

Please sign in to comment.