Skip to content

Commit

Permalink
Check element ref for active document so we can try to expand the lis…
Browse files Browse the repository at this point in the history
…t only when a block is selected outside the block list.

Using an `useEffect` to loop through parent nodes, and expand them when necessary.
  • Loading branch information
ramonjd committed Oct 21, 2021
1 parent e192d50 commit 9b5e22e
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 6 deletions.
30 changes: 28 additions & 2 deletions packages/block-editor/src/components/list-view/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import ListViewDropIndicator from './drop-indicator';
import useListViewClientIds from './use-list-view-client-ids';
import useListViewDropZone from './use-list-view-drop-zone';
import { store as blockEditorStore } from '../../store';
import { hasFocusWithin } from './utils';

const noop = () => {};
const expanded = ( state, action ) => {
Expand Down Expand Up @@ -66,11 +67,14 @@ function ListView(
clientIdsTree,
selectedClientIds,
draggedClientIds,
selectedBlockRootClientId,
selectedBlockParentIds,
} = useListViewClientIds(
blocks,
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
);

const { selectBlock } = useDispatch( blockEditorStore );
const selectEditorBlock = useCallback(
( clientId ) => {
Expand All @@ -80,12 +84,12 @@ function ListView(
[ selectBlock, onSelect ]
);
const [ expandedState, setExpandedState ] = useReducer( expanded, {} );

const { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();
const elementRef = useRef();
const treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );

const isMounted = useRef( false );
const hasFocus = hasFocusWithin( elementRef?.current );

useEffect( () => {
isMounted.current = true;
}, [] );
Expand Down Expand Up @@ -125,6 +129,7 @@ function ListView(
expandedState,
expand,
collapse,
selectedBlockRootClientId,
} ),
[
__experimentalFeatures,
Expand All @@ -135,9 +140,30 @@ function ListView(
expandedState,
expand,
collapse,
selectedBlockRootClientId,
]
);

// If a selection is made outside the block list,
// for example, in the Block Editor,
// try to expand the block list tree.
useEffect( () => {
if (
! hasFocus &&
Array.isArray( selectedBlockParentIds ) &&
selectedBlockParentIds.length
) {
selectedBlockParentIds.forEach( ( clientId ) => {
if ( ! expandedState[ clientId ] ) {
setExpandedState( {
type: 'expand',
clientId,
} );
}
} );
}
}, [ hasFocus, selectedBlockParentIds ] );

return (
<AsyncModeProvider value={ true }>
<ListViewDropIndicator
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,24 +57,39 @@ export default function useListViewClientIds(
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
) {
const { selectedClientIds, draggedClientIds } = useSelect(
const {
selectedClientIds,
draggedClientIds,
selectedBlockParentIds,
} = useSelect(
( select ) => {
const {
getSelectedBlockClientId,
getSelectedBlockClientIds,
getDraggedBlockClientIds,
getBlockParents,
} = select( blockEditorStore );

if ( __experimentalPersistentListViewFeatures ) {
const selectedBlockClientIds = getSelectedBlockClientIds();
return {
selectedClientIds: getSelectedBlockClientIds(),
selectedClientIds: selectedBlockClientIds,
draggedClientIds: getDraggedBlockClientIds(),
selectedBlockParentIds: getBlockParents(
selectedBlockClientIds[ 0 ],
false
),
};
}
const selectedBlockClientId = getSelectedBlockClientId();

return {
selectedClientIds: getSelectedBlockClientId(),
selectedClientIds: selectedBlockClientId,
draggedClientIds: getDraggedBlockClientIds(),
selectedBlockParentIds: getBlockParents(
selectedBlockClientId,
false
),
};
},
[ __experimentalPersistentListViewFeatures ]
Expand All @@ -84,5 +99,11 @@ export default function useListViewClientIds(
selectedClientIds,
showOnlyCurrentHierarchy
);
return { clientIdsTree, selectedClientIds, draggedClientIds };

return {
clientIdsTree,
selectedClientIds,
draggedClientIds,
selectedBlockParentIds,
};
}
11 changes: 11 additions & 0 deletions packages/block-editor/src/components/list-view/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,14 @@ export const isClientIdSelected = ( clientId, selectedBlockClientIds ) =>
isArray( selectedBlockClientIds ) && selectedBlockClientIds.length
? selectedBlockClientIds.indexOf( clientId ) !== -1
: selectedBlockClientIds === clientId;

/**
* Returns true if the container contains the document active element.
*
* @param {HTMLElement} container An HTML element.
*
* @return {boolean} Whether the container contains the currently document active element.
*/
export const hasFocusWithin = ( container ) => {
return !! container?.contains( container?.ownerDocument?.activeElement );
};

0 comments on commit 9b5e22e

Please sign in to comment.