Skip to content

Commit

Permalink
This commit can potentially be discarded as it might be worth explori…
Browse files Browse the repository at this point in the history
…ng in a new PR.

Here we're calculating the top scroll position of the selected block.
  • Loading branch information
ramonjd committed Jan 10, 2022
1 parent 15765aa commit 9432959
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 3 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/list-view/branch.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import { isClientIdSelected } from './utils';
* @param {Array} draggedClientIds a list of dragged client ids
* @return {number} block count
*/
function countBlocks( block, expandedState, draggedClientIds ) {
export function countBlocks( block, expandedState, draggedClientIds ) {
const isDragged = draggedClientIds?.includes( block.clientId );
if ( isDragged ) {
return 0;
Expand Down
50 changes: 48 additions & 2 deletions packages/block-editor/src/components/list-view/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,12 @@ import {
forwardRef,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { getScrollContainer } from '@wordpress/dom';

/**
* Internal dependencies
*/
import ListViewBranch from './branch';
import ListViewBranch, { countBlocks } from './branch';
import { ListViewContext } from './context';
import ListViewDropIndicator from './drop-indicator';
import useListViewClientIds from './use-list-view-client-ids';
Expand All @@ -45,6 +46,8 @@ const expanded = ( state, action ) => {
return state;
};

const BLOCK_LIST_ITEM_HEIGHT = 36;

/**
* Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a
* recursive component (it renders itself), so this ensures TreeGrid is only
Expand Down Expand Up @@ -118,7 +121,7 @@ function ListView(
// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
const [ fixedListWindow ] = useFixedWindowList(
elementRef,
36,
BLOCK_LIST_ITEM_HEIGHT,
visibleBlockCount,
{
useWindowing: __experimentalPersistentListViewFeatures,
Expand Down Expand Up @@ -196,6 +199,49 @@ function ListView(
}
}, [ hasFocus, selectedBlockParentClientIds ] );

useEffect( () => {
if (
! hasFocus &&
Array.isArray( selectedClientIds ) &&
selectedClientIds.length
) {
const scrollContainer = getScrollContainer( elementRef.current );

// Grab the selected id. This is the point at which we can
// stop counting blocks in the tree.
let selectedId = selectedClientIds[ 0 ];

// If the selected block has parents, get the top-level parent.
if (
Array.isArray( selectedBlockParentClientIds ) &&
selectedBlockParentClientIds.length
) {
selectedId = selectedBlockParentClientIds[ 0 ];
}

// Count expanded blocks in the tree.
let heightFactor = 0;
clientIdsTree.every( ( item ) => {
if ( item?.clientId === selectedId ) {
return false;
}
heightFactor += countBlocks( item, expandedState, [] );
return true;
} );

scrollContainer?.scrollTo( {
top: heightFactor * BLOCK_LIST_ITEM_HEIGHT,
} );
}
}, [
hasFocus,
expandedState,
elementRef,
clientIdsTree,
selectedBlockParentClientIds,
selectedClientIds,
] );

return (
<AsyncModeProvider value={ true }>
<ListViewDropIndicator
Expand Down

0 comments on commit 9432959

Please sign in to comment.