wip fix issue where we were switching back to global state too early

WordPress · Aug 20, 2021 · 1878d4a · 1878d4a
1 parent 685c224
commit 1878d4a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 21 deletions.
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -171,9 +171,9 @@ export default function ListViewBlock( {
  };
 
  const onDragEnd = () => {
- expand( clientId );
- setDraggingId( null );
  dropItem();
+ setDraggingId( null );
+ expand( clientId );
  };
 
  const velocity = useMotionValue( 0 );

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -43,6 +43,10 @@ const expanded = ( state, action ) => {
  }
 };
 
+const LOCAL = 'local';
+const RESOLVING_DROP = 'resolvingDrop';
+const GLOBAL = 'global';
+
 function removeItemFromTree( tree, id, parentId = '' ) {
  const newTree = [];
  let removeParentId = '';
@@ -183,8 +187,7 @@ export default function ListView( {
  __experimentalPersistentListViewFeatures,
  ...props
 } ) {
- const [ draggingId, setDraggingId ] = useState( false );
- const [ dropped, setDropped ] = useState( false );
+ const [ draggingId, setDraggingId ] = useState( null );
  const { clientIdsTree, selectedClientIds } = useListViewClientIds(
  blocks,
  showOnlyCurrentHierarchy,
@@ -203,10 +206,17 @@ export default function ListView( {
  );
  const [ expandedState, setExpandedState ] = useReducer( expanded, {} );
 
- const timeoutRef = useRef();
  const treeGridRef = useRef();
 
  const isMounted = useRef( false );
+ const [ stateType, setStateType ] = useState( GLOBAL );
+
+ useEffect( () => {
+ if ( stateType === RESOLVING_DROP ) {
+ setStateType( GLOBAL );
+ }
+ }, [ clientIdsTree ] );
+
  useEffect( () => {
  isMounted.current = true;
  }, [] );
@@ -260,7 +270,6 @@ export default function ListView( {
  if ( ! target ) {
  return;
  }
- setDropped( true );
  const { clientId, originalParent, targetId, targetIndex } = target;
  lastTarget.set( null );
  await moveBlocksToPosition(
@@ -269,10 +278,7 @@ export default function ListView( {
  targetId,
  targetIndex
  );
- //TODO: still need to find something more reliable to test if things have settled
- timeoutRef.current = setTimeout( () => {
- setDropped( false );
- }, 200 );
+ setStateType( 'resolvingDrop' );
  };
  const moveItem = ( {
  block,
@@ -281,8 +287,6 @@ export default function ListView( {
  listPosition,
  velocity,
  } ) => {
- //TODO: fix nested containers such as columns and default settings
- //TODO: empty container with appender doesn't add children properly
  //TODO: simplify state and code
  const { clientId } = block;
  const ITEM_HEIGHT = 36;
@@ -456,20 +460,13 @@ export default function ListView( {
  ]
  );
 
- //TODO: mouseover on items highlights blocks and triggers a render check on all branches
- //TODO: used in prototyping, polish this more
  useEffect( () => {
  if ( draggingId ) {
  setTree( clone( clientIdsTree ) );
+ setStateType( LOCAL );
  }
  }, [ draggingId ] );
 
- useEffect( () => {
- if ( timeoutRef.current ) {
- clearTimeout( timeoutRef.current );
- }
- }, [] );
-
  return (
  <>
  <TreeGrid
@@ -482,7 +479,11 @@ export default function ListView( {
  >
  <ListViewContext.Provider value={ contextValue }>
  <ListViewBranch
- blocks={ draggingId || dropped ? tree : clientIdsTree }
+ blocks={
+ stateType === LOCAL || stateType === RESOLVING_DROP
+ ? tree
+ : clientIdsTree
+ }
  selectBlock={ selectEditorBlock }
  selectedBlockClientIds={ selectedClientIds }
  setPosition={ setPosition }