Add prop to control default expand/collapse state of ListView nodes (W…

…ordPress#39486) * Add prop to control default expand/collapse state * Update windowing to account for default expanded state * Remove implementation
jostnes · Mar 23, 2022 · 2d30a6f · 2d30a6f
1 parent 2c84790
commit 2d30a6f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 15 deletions.
diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js
@@ -23,39 +23,59 @@ import { isClientIdSelected } from './utils';
  * When a block is collapsed, we do not count their children as part of that total. In the current drag
  * implementation dragged blocks and their children are not counted.
  *
- * @param {Object} block            block tree
- * @param {Object} expandedState    state that notes which branches are collapsed
- * @param {Array}  draggedClientIds a list of dragged client ids
+ * @param {Object}  block               block tree
+ * @param {Object}  expandedState       state that notes which branches are collapsed
+ * @param {Array}   draggedClientIds    a list of dragged client ids
+ * @param {boolean} isExpandedByDefault flag to determine the default fallback expanded state.
  * @return {number} block count
  */
-function countBlocks( block, expandedState, draggedClientIds ) {
+function countBlocks(
+	block,
+	expandedState,
+	draggedClientIds,
+	isExpandedByDefault
+) {
 	const isDragged = draggedClientIds?.includes( block.clientId );
 	if ( isDragged ) {
 		return 0;
 	}
-	const isExpanded = expandedState[ block.clientId ] ?? true;
+	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
+
 	if ( isExpanded ) {
 		return (
 			1 +
 			block.innerBlocks.reduce(
-				countReducer( expandedState, draggedClientIds ),
+				countReducer(
+					expandedState,
+					draggedClientIds,
+					isExpandedByDefault
+				),
 				0
 			)
 		);
 	}
 	return 1;
 }
-const countReducer = ( expandedState, draggedClientIds ) => (
-	count,
-	block
-) => {
+const countReducer = (
+	expandedState,
+	draggedClientIds,
+	isExpandedByDefault
+) => ( count, block ) => {
 	const isDragged = draggedClientIds?.includes( block.clientId );
 	if ( isDragged ) {
 		return count;
 	}
-	const isExpanded = expandedState[ block.clientId ] ?? true;
+	const isExpanded = expandedState[ block.clientId ] ?? isExpandedByDefault;
 	if ( isExpanded && block.innerBlocks.length > 0 ) {
-		return count + countBlocks( block, expandedState, draggedClientIds );
+		return (
+			count +
+			countBlocks(
+				block,
+				expandedState,
+				draggedClientIds,
+				isExpandedByDefault
+			)
+		);
 	}
 	return count + 1;
 };
@@ -72,6 +92,7 @@ function ListViewBranch( props ) {
 		isBranchSelected = false,
 		listPosition = 0,
 		fixedListWindow,
+		expandNested = true,
 	} = props;
 
 	const {
@@ -93,14 +114,14 @@ function ListViewBranch( props ) {
 					nextPosition += countBlocks(
 						filteredBlocks[ index - 1 ],
 						expandedState,
-						draggedClientIds
+						draggedClientIds,
+						expandNested
 					);
 				}
 
 				const usesWindowing = __experimentalPersistentListViewFeatures;
 
 				const { itemInView } = fixedListWindow;
-
 				const blockInView =
 					! usesWindowing || itemInView( nextPosition );
 
@@ -113,7 +134,7 @@ function ListViewBranch( props ) {
 					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
 
 				const isExpanded = hasNestedBlocks
-					? expandedState[ clientId ] ?? true
+					? expandedState[ clientId ] ?? expandNested
 					: undefined;
 
 				const isDragged = !! draggedClientIds?.includes( clientId );
@@ -165,6 +186,7 @@ function ListViewBranch( props ) {
 								fixedListWindow={ fixedListWindow }
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
+								expandNested={ expandNested }
 							/>
 						) }
 					</AsyncModeProvider>

diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js
@@ -60,6 +60,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.
  * @param {boolean} props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)
  * @param {string}  props.id                                       Unique identifier for the root list element (primarily for a11y purposes).
+ * @param {boolean} props.expandNested                             Flag to determine whether nested levels are expanded by default.
  * @param {Object}  ref                                            Forwarded ref
  */
 function ListView(
@@ -71,6 +72,7 @@ function ListView(
 		showNestedBlocks,
 		showBlockMovers,
 		id,
+		expandNested,
 		...props
 	},
 	ref
@@ -223,6 +225,7 @@ function ListView(
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
 						selectedClientIds={ selectedClientIds }
+						expandNested={ expandNested }
 						{ ...props }
 					/>
 				</ListViewContext.Provider>