-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Try/expand block list tree on selection (#35817)
* Check element ref for active document so we can try to expand the list only when a block is selected outside the block list. Using an `useEffect` to loop through parent nodes, and expand them when necessary. * Renamed parent client id array to `selectedBlockParentClientIds` * Creating a new action type, so we can update the state with one action call. * Refactoring reducer to accept an array of clientIds. * Only try to expand nested branch items where there are parent ids * This commit can potentially be discarded as it might be worth exploring in a new PR. Here we're calculating the top scroll position of the selected block. * Tracking the selected block in the tree and checking it against the selected block *should* inform us that a block has been selected elsewhere, e.g., the editor. When we know this we can execute the hook logic that expands and scrolls to the selected element in the tree if a block is selected elsewhere. Removing hasFocus. * Extracted scroll and expand logic to hook * Revert scroll to logic to be performed in another PR. * Revert export * Adding e2e test * Forgot to pass on the correct args to `updateBlockSelection()` * Focussing on the cover block before testing the expand element. * Renaming function and file name to make it clearer to folks what it does. * Linto!
- Loading branch information
Showing
3 changed files
with
140 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
58 changes: 58 additions & 0 deletions
58
packages/block-editor/src/components/list-view/use-list-view-expand-selected-item.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useEffect, useState } from '@wordpress/element'; | ||
import { useSelect } from '@wordpress/data'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import { store as blockEditorStore } from '../../store'; | ||
|
||
export default function useListViewExpandSelectedItem( { | ||
firstSelectedBlockClientId, | ||
setExpandedState, | ||
} ) { | ||
const [ selectedTreeId, setSelectedTreeId ] = useState( null ); | ||
const { selectedBlockParentClientIds } = useSelect( | ||
( select ) => { | ||
const { getBlockParents } = select( blockEditorStore ); | ||
return { | ||
selectedBlockParentClientIds: getBlockParents( | ||
firstSelectedBlockClientId, | ||
false | ||
), | ||
}; | ||
}, | ||
[ firstSelectedBlockClientId ] | ||
); | ||
|
||
const parentClientIds = | ||
Array.isArray( selectedBlockParentClientIds ) && | ||
selectedBlockParentClientIds.length | ||
? selectedBlockParentClientIds | ||
: null; | ||
|
||
// Expand tree when a block is selected. | ||
useEffect( () => { | ||
// If the selectedTreeId is the same as the selected block, | ||
// it means that the block was selected using the block list tree. | ||
if ( selectedTreeId === firstSelectedBlockClientId ) { | ||
return; | ||
} | ||
|
||
// If the selected block has parents, get the top-level parent. | ||
if ( parentClientIds ) { | ||
// If the selected block has parents, | ||
// expand the tree branch. | ||
setExpandedState( { | ||
type: 'expand', | ||
clientIds: selectedBlockParentClientIds, | ||
} ); | ||
} | ||
}, [ firstSelectedBlockClientId ] ); | ||
|
||
return { | ||
setSelectedTreeId, | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters