Skip to content

Commit

Permalink
List View: Simplify the BlockNavigation component (#31290)
Browse files Browse the repository at this point in the history
Simplify the `BlockNavigation` component, moving most of the logic inside its `BlockNavigationTree` sub-component.
  • Loading branch information
Copons authored May 21, 2021
1 parent 608d402 commit 0098f36
Show file tree
Hide file tree
Showing 7 changed files with 147 additions and 137 deletions.
16 changes: 12 additions & 4 deletions packages/block-editor/src/components/block-navigation/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { listView } from '@wordpress/icons';
/**
* Internal dependencies
*/
import BlockNavigation from './';
import BlockNavigationTree from './tree';
import { store as blockEditorStore } from '../../store';

function BlockNavigationDropdownToggle( {
Expand Down Expand Up @@ -60,9 +60,17 @@ function BlockNavigationDropdown(
/>
) }
renderContent={ () => (
<BlockNavigation
__experimentalFeatures={ __experimentalFeatures }
/>
<div className="block-editor-block-navigation__container">
<p className="block-editor-block-navigation__label">
{ __( 'List view' ) }
</p>

<BlockNavigationTree
showNestedBlocks
showOnlyCurrentHierarchy
__experimentalFeatures={ __experimentalFeatures }
/>
</div>
) }
/>
);
Expand Down
81 changes: 0 additions & 81 deletions packages/block-editor/src/components/block-navigation/index.js

This file was deleted.

42 changes: 37 additions & 5 deletions packages/block-editor/src/components/block-navigation/tree.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,56 @@
*/

import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
import { useEffect, useMemo, useRef } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { useCallback, useEffect, useMemo, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import BlockNavigationBranch from './branch';
import { BlockNavigationContext } from './context';
import useBlockNavigationClientIds from './use-block-navigation-client-ids';
import useBlockNavigationDropZone from './use-block-navigation-drop-zone';
import { store as blockEditorStore } from '../../store';

const noop = () => {};

/**
* Wrap `BlockNavigationRows` with `TreeGrid`. BlockNavigationRows is a
* recursive component (it renders itself), so this ensures TreeGrid is only
* present at the very top of the navigation grid.
*
* @param {Object} props Components props.
* @param {boolean} props.__experimentalFeatures Flag to enable experimental features.
* @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
* @param {Object} props Components props.
* @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy.
* @param {Function} props.onSelect Block selection callback.
* @param {boolean} props.showNestedBlocks Flag to enable displaying nested blocks.
* @param {boolean} props.showOnlyCurrentHierarchy Flag to limit the list to the current hierarchy of blocks.
* @param {boolean} props.__experimentalFeatures Flag to enable experimental features.
* @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
*/
export default function BlockNavigationTree( {
blocks,
showOnlyCurrentHierarchy,
onSelect = noop,
__experimentalFeatures,
__experimentalPersistentListViewFeatures,
...props
} ) {
const { clientIdsTree, selectedClientIds } = useBlockNavigationClientIds(
blocks,
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
);
const { selectBlock } = useDispatch( blockEditorStore );
const selectEditorBlock = useCallback(
( clientId ) => {
selectBlock( clientId );
onSelect( clientId );
},
[ selectBlock, onSelect ]
);

let {
ref: treeGridRef,
target: blockDropTarget,
Expand Down Expand Up @@ -62,7 +89,12 @@ export default function BlockNavigationTree( {
ref={ treeGridRef }
>
<BlockNavigationContext.Provider value={ contextValue }>
<BlockNavigationBranch { ...props } />
<BlockNavigationBranch
blocks={ clientIdsTree }
selectBlock={ selectEditorBlock }
selectedBlockClientIds={ selectedClientIds }
{ ...props }
/>
</BlockNavigationContext.Provider>
</TreeGrid>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
/**
* WordPress dependencies
*/

import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { isClientIdSelected } from './utils';
import { store as blockEditorStore } from '../../store';

const useBlockNavigationSelectedClientIds = (
__experimentalPersistentListViewFeatures
) =>
useSelect(
( select ) => {
const {
getSelectedBlockClientId,
getSelectedBlockClientIds,
} = select( blockEditorStore );

if ( __experimentalPersistentListViewFeatures ) {
return getSelectedBlockClientIds();
}

return getSelectedBlockClientId();
},
[ __experimentalPersistentListViewFeatures ]
);

const useBlockNavigationClientIdsTree = (
blocks,
selectedClientIds,
showOnlyCurrentHierarchy
) =>
useSelect(
( select ) => {
const {
getBlockHierarchyRootClientId,
__unstableGetClientIdsTree,
__unstableGetClientIdWithClientIdsTree,
} = select( blockEditorStore );

if ( blocks ) {
return blocks;
}

const isSingleBlockSelected =
selectedClientIds && ! Array.isArray( selectedClientIds );
if ( ! showOnlyCurrentHierarchy || ! isSingleBlockSelected ) {
return __unstableGetClientIdsTree();
}

const rootBlock = __unstableGetClientIdWithClientIdsTree(
getBlockHierarchyRootClientId( selectedClientIds )
);
if ( ! rootBlock ) {
return __unstableGetClientIdsTree();
}

const hasHierarchy =
! isClientIdSelected( rootBlock.clientId, selectedClientIds ) ||
( rootBlock.innerBlocks && rootBlock.innerBlocks.length !== 0 );
if ( hasHierarchy ) {
return [ rootBlock ];
}

return __unstableGetClientIdsTree();
},
[ blocks, selectedClientIds, showOnlyCurrentHierarchy ]
);

export default function useBlockNavigationClientIds(
blocks,
showOnlyCurrentHierarchy,
__experimentalPersistentListViewFeatures
) {
const selectedClientIds = useBlockNavigationSelectedClientIds(
__experimentalPersistentListViewFeatures
);
const clientIdsTree = useBlockNavigationClientIdsTree(
blocks,
selectedClientIds,
showOnlyCurrentHierarchy
);
return { clientIdsTree, selectedClientIds };
}
25 changes: 6 additions & 19 deletions packages/block-library/src/navigation/block-navigation-list.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,38 +5,25 @@ import {
__experimentalBlockNavigationTree,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';

export default function BlockNavigationList( {
clientId,
__experimentalFeatures,
} ) {
const { blocks, selectedBlockClientId } = useSelect(
( select ) => {
const {
getSelectedBlockClientId,
__unstableGetClientIdsTree,
} = select( blockEditorStore );

return {
blocks: __unstableGetClientIdsTree( clientId ),
selectedBlockClientId: getSelectedBlockClientId(),
};
},
const blocks = useSelect(
( select ) =>
select( blockEditorStore ).__unstableGetClientIdsTree( clientId ),
[ clientId ]
);

const { selectBlock } = useDispatch( blockEditorStore );

return (
<__experimentalBlockNavigationTree
blocks={ blocks }
selectedBlockClientIds={ [ selectedBlockClientId ] }
selectBlock={ selectBlock }
__experimentalFeatures={ __experimentalFeatures }
showNestedBlocks
showAppender
showBlockMovers
showNestedBlocks
__experimentalFeatures={ __experimentalFeatures }
/>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
useInstanceId,
useMergeRefs,
} from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
Expand All @@ -23,16 +23,6 @@ import { ESCAPE } from '@wordpress/keycodes';
import { store as editPostStore } from '../../store';

export default function ListViewSidebar() {
const { clientIdsTree, selectedBlockClientIds } = useSelect( ( select ) => {
const {
__unstableGetClientIdsTree,
getSelectedBlockClientIds,
} = select( blockEditorStore );
return {
clientIdsTree: __unstableGetClientIdsTree(),
selectedBlockClientIds: getSelectedBlockClientIds(),
};
}, [] );
const { setIsListViewOpened } = useDispatch( editPostStore );

const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -73,9 +63,7 @@ export default function ListViewSidebar() {
ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
>
<BlockNavigationTree
blocks={ clientIdsTree }
selectBlock={ selectEditorBlock }
selectedBlockClientIds={ selectedBlockClientIds }
onSelect={ selectEditorBlock }
showNestedBlocks
__experimentalPersistentListViewFeatures
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
useInstanceId,
useMergeRefs,
} from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { closeSmall } from '@wordpress/icons';
import { ESCAPE } from '@wordpress/keycodes';
Expand All @@ -23,16 +23,6 @@ import { ESCAPE } from '@wordpress/keycodes';
import { store as editSiteStore } from '../../store';

export default function ListViewSidebar() {
const { clientIdsTree, selectedBlockClientIds } = useSelect( ( select ) => {
const {
__unstableGetClientIdsTree,
getSelectedBlockClientIds,
} = select( blockEditorStore );
return {
clientIdsTree: __unstableGetClientIdsTree(),
selectedBlockClientIds: getSelectedBlockClientIds(),
};
}, [] );
const { setIsListViewOpened } = useDispatch( editSiteStore );

const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
Expand Down Expand Up @@ -73,9 +63,7 @@ export default function ListViewSidebar() {
ref={ useMergeRefs( [ focusReturnRef, focusOnMountRef ] ) }
>
<BlockNavigationTree
blocks={ clientIdsTree }
selectBlock={ selectEditorBlock }
selectedBlockClientIds={ selectedBlockClientIds }
onSelect={ selectEditorBlock }
showNestedBlocks
__experimentalPersistentListViewFeatures
/>
Expand Down

0 comments on commit 0098f36

Please sign in to comment.