@wordpress/block-editor 7.0.1 → 8.0.0

package/build-module/components/list-view/branch.js

@@ -1,131 +1,155 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * External dependencies
  */
-import { map, compact } from 'lodash';
+import { compact } from 'lodash';
 /**
  * WordPress dependencies
  */
 
-import { Fragment } from '@wordpress/element';
+import { memo } from '@wordpress/element';
+import { AsyncModeProvider } from '@wordpress/data';
 /**
  * Internal dependencies
  */
 
 import ListViewBlock from './block';
-import ListViewAppender from './appender';
-import { isClientIdSelected } from './utils';
 import { useListViewContext } from './context';
-export default function ListViewBranch(props) {
+import { isClientIdSelected } from './utils';
+/**
+ * Given a block, returns the total number of blocks in that subtree. This is used to help determine
+ * the list position of a block.
+ *
+ * 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
+ * @return {number} block count
+ */
+
+function countBlocks(block, expandedState, draggedClientIds) {
+  var _expandedState$block$;
+
+  const isDragged = draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.includes(block.clientId);
+
+  if (isDragged) {
+    return 0;
+  }
+
+  const isExpanded = (_expandedState$block$ = expandedState[block.clientId]) !== null && _expandedState$block$ !== void 0 ? _expandedState$block$ : true;
+
+  if (isExpanded) {
+    return 1 + block.innerBlocks.reduce(countReducer(expandedState, draggedClientIds), 0);
+  }
+
+  return 1;
+}
+
+const countReducer = (expandedState, draggedClientIds) => (count, block) => {
+  var _expandedState$block$2;
+
+  const isDragged = draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.includes(block.clientId);
+
+  if (isDragged) {
+    return count;
+  }
+
+  const isExpanded = (_expandedState$block$2 = expandedState[block.clientId]) !== null && _expandedState$block$2 !== void 0 ? _expandedState$block$2 : true;
+
+  if (isExpanded && block.innerBlocks.length > 0) {
+    return count + countBlocks(block, expandedState, draggedClientIds);
+  }
+
+  return count + 1;
+};
+
+function ListViewBranch(props) {
   const {
     blocks,
     selectBlock,
-    selectedBlockClientIds,
-    showAppender,
     showBlockMovers,
     showNestedBlocks,
-    parentBlockClientId,
+    selectedClientIds,
     level = 1,
-    terminatedLevels = [],
-    path = [],
+    path = '',
     isBranchSelected = false,
-    isLastOfBranch = false
+    listPosition = 0,
+    fixedListWindow
   } = props;
-  const isTreeRoot = !parentBlockClientId;
-  const filteredBlocks = compact(blocks);
-
-  const itemHasAppender = parentClientId => showAppender && !isTreeRoot && isClientIdSelected(parentClientId, selectedBlockClientIds);
-
-  const hasAppender = itemHasAppender(parentBlockClientId); // Add +1 to the rowCount to take the block appender into account.
-
-  const blockCount = filteredBlocks.length;
-  const rowCount = hasAppender ? blockCount + 1 : blockCount;
-  const appenderPosition = rowCount;
   const {
     expandedState,
-    expand,
-    collapse
+    draggedClientIds,
+    __experimentalPersistentListViewFeatures
   } = useListViewContext();
-  return createElement(Fragment, null, map(filteredBlocks, (block, index) => {
+  const filteredBlocks = compact(blocks);
+  const blockCount = filteredBlocks.length;
+  let nextPosition = listPosition;
+  return createElement(Fragment, null, filteredBlocks.map((block, index) => {
     var _expandedState$client;
 
     const {
       clientId,
       innerBlocks
     } = block;
+
+    if (index > 0) {
+      nextPosition += countBlocks(filteredBlocks[index - 1], expandedState, draggedClientIds);
+    }
+
+    const usesWindowing = __experimentalPersistentListViewFeatures;
+    const {
+      itemInView
+    } = fixedListWindow;
+    const blockInView = !usesWindowing || itemInView(nextPosition);
     const position = index + 1;
-    const isLastRowAtLevel = rowCount === position;
-    const updatedTerminatedLevels = isLastRowAtLevel ? [...terminatedLevels, level] : terminatedLevels;
-    const updatedPath = [...path, position];
+    const updatedPath = path.length > 0 ? `${path}_${position}` : `${position}`;
     const hasNestedBlocks = showNestedBlocks && !!innerBlocks && !!innerBlocks.length;
-    const hasNestedAppender = itemHasAppender(clientId);
-    const hasNestedBranch = hasNestedBlocks || hasNestedAppender;
-    const isSelected = isClientIdSelected(clientId, selectedBlockClientIds);
-    const isSelectedBranch = isBranchSelected || isSelected && hasNestedBranch; // Logic needed to target the last item of a selected branch which might be deeply nested.
-    // This is currently only needed for styling purposes. See: `.is-last-of-selected-branch`.
-
-    const isLastBlock = index === blockCount - 1;
-    const isLast = isSelected || isLastOfBranch && isLastBlock;
-    const isLastOfSelectedBranch = isLastOfBranch && !hasNestedBranch && isLastBlock;
-    const isExpanded = hasNestedBranch ? (_expandedState$client = expandedState[clientId]) !== null && _expandedState$client !== void 0 ? _expandedState$client : true : undefined;
-
-    const selectBlockWithClientId = event => {
-      event.stopPropagation();
-      selectBlock(clientId);
-    };
-
-    const toggleExpanded = event => {
-      event.stopPropagation();
-
-      if (isExpanded === true) {
-        collapse(clientId);
-      } else if (isExpanded === false) {
-        expand(clientId);
-      }
-    };
-
-    return createElement(Fragment, {
-      key: clientId
-    }, createElement(ListViewBlock, {
+    const isExpanded = hasNestedBlocks ? (_expandedState$client = expandedState[clientId]) !== null && _expandedState$client !== void 0 ? _expandedState$client : true : undefined;
+    const isDragged = !!(draggedClientIds !== null && draggedClientIds !== void 0 && draggedClientIds.includes(clientId));
+    const showBlock = isDragged || blockInView; // Make updates to the selected or dragged blocks synchronous,
+    // but asynchronous for any other block.
+
+    const isSelected = isClientIdSelected(clientId, selectedClientIds);
+    const isSelectedBranch = isBranchSelected || isSelected && hasNestedBlocks;
+    return createElement(AsyncModeProvider, {
+      key: clientId,
+      value: !isSelected
+    }, showBlock && createElement(ListViewBlock, {
       block: block,
-      onClick: selectBlockWithClientId,
-      onToggleExpanded: toggleExpanded,
+      selectBlock: selectBlock,
       isSelected: isSelected,
       isBranchSelected: isSelectedBranch,
-      isLastOfSelectedBranch: isLastOfSelectedBranch,
+      isDragged: isDragged,
       level: level,
       position: position,
-      rowCount: rowCount,
+      rowCount: blockCount,
       siblingBlockCount: blockCount,
       showBlockMovers: showBlockMovers,
-      terminatedLevels: terminatedLevels,
       path: updatedPath,
-      isExpanded: isExpanded
-    }), hasNestedBranch && isExpanded && createElement(ListViewBranch, {
+      isExpanded: isExpanded,
+      listPosition: nextPosition
+    }), !showBlock && createElement("tr", null, createElement("td", {
+      className: "block-editor-list-view-placeholder"
+    })), hasNestedBlocks && isExpanded && !isDragged && createElement(ListViewBranch, {
       blocks: innerBlocks,
-      selectedBlockClientIds: selectedBlockClientIds,
       selectBlock: selectBlock,
-      isBranchSelected: isSelectedBranch,
-      isLastOfBranch: isLast,
-      showAppender: showAppender,
       showBlockMovers: showBlockMovers,
       showNestedBlocks: showNestedBlocks,
-      parentBlockClientId: clientId,
       level: level + 1,
-      terminatedLevels: updatedTerminatedLevels,
-      path: updatedPath
+      path: updatedPath,
+      listPosition: nextPosition + 1,
+      fixedListWindow: fixedListWindow,
+      isBranchSelected: isSelectedBranch,
+      selectedClientIds: selectedClientIds
     }));
-  }), hasAppender && createElement(ListViewAppender, {
-    parentBlockClientId: parentBlockClientId,
-    position: rowCount,
-    rowCount: appenderPosition,
-    level: level,
-    terminatedLevels: terminatedLevels,
-    path: [...path, appenderPosition]
   }));
 }
+
 ListViewBranch.defaultProps = {
   selectBlock: () => {}
 };
+export default memo(ListViewBranch);
 //# sourceMappingURL=branch.js.map

package/build-module/components/list-view/branch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/branch.js"],"names":["map","compact","Fragment","ListViewBlock","ListViewAppender","isClientIdSelected","useListViewContext","ListViewBranch","props","blocks","selectBlock","selectedBlockClientIds","showAppender","showBlockMovers","showNestedBlocks","parentBlockClientId","level","terminatedLevels","path","isBranchSelected","isLastOfBranch","isTreeRoot","filteredBlocks","itemHasAppender","parentClientId","hasAppender","blockCount","length","rowCount","appenderPosition","expandedState","expand","collapse","block","index","clientId","innerBlocks","position","isLastRowAtLevel","updatedTerminatedLevels","updatedPath","hasNestedBlocks","hasNestedAppender","hasNestedBranch","isSelected","isSelectedBranch","isLastBlock","isLast","isLastOfSelectedBranch","isExpanded","undefined","selectBlockWithClientId","event","stopPropagation","toggleExpanded","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { map, compact } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Fragment } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlock from './block';\nimport ListViewAppender from './appender';\nimport { isClientIdSelected } from './utils';\nimport { useListViewContext } from './context';\n\nexport default function ListViewBranch( props ) {\n\tconst {\n\t\tblocks,\n\t\tselectBlock,\n\t\tselectedBlockClientIds,\n\t\tshowAppender,\n\t\tshowBlockMovers,\n\t\tshowNestedBlocks,\n\t\tparentBlockClientId,\n\t\tlevel = 1,\n\t\tterminatedLevels = [],\n\t\tpath = [],\n\t\tisBranchSelected = false,\n\t\tisLastOfBranch = false,\n\t} = props;\n\n\tconst isTreeRoot = ! parentBlockClientId;\n\tconst filteredBlocks = compact( blocks );\n\tconst itemHasAppender = ( parentClientId ) =>\n\t\tshowAppender &&\n\t\t! isTreeRoot &&\n\t\tisClientIdSelected( parentClientId, selectedBlockClientIds );\n\tconst hasAppender = itemHasAppender( parentBlockClientId );\n\t// Add +1 to the rowCount to take the block appender into account.\n\tconst blockCount = filteredBlocks.length;\n\tconst rowCount = hasAppender ? blockCount + 1 : blockCount;\n\tconst appenderPosition = rowCount;\n\n\tconst { expandedState, expand, collapse } = useListViewContext();\n\n\treturn (\n\t\t<>\n\t\t\t{ map( filteredBlocks, ( block, index ) => {\n\t\t\t\tconst { clientId, innerBlocks } = block;\n\t\t\t\tconst position = index + 1;\n\t\t\t\tconst isLastRowAtLevel = rowCount === position;\n\t\t\t\tconst updatedTerminatedLevels = isLastRowAtLevel\n\t\t\t\t\t? [ ...terminatedLevels, level ]\n\t\t\t\t\t: terminatedLevels;\n\t\t\t\tconst updatedPath = [ ...path, position ];\n\t\t\t\tconst hasNestedBlocks =\n\t\t\t\t\tshowNestedBlocks && !! innerBlocks && !! innerBlocks.length;\n\t\t\t\tconst hasNestedAppender = itemHasAppender( clientId );\n\t\t\t\tconst hasNestedBranch = hasNestedBlocks || hasNestedAppender;\n\n\t\t\t\tconst isSelected = isClientIdSelected(\n\t\t\t\t\tclientId,\n\t\t\t\t\tselectedBlockClientIds\n\t\t\t\t);\n\t\t\t\tconst isSelectedBranch =\n\t\t\t\t\tisBranchSelected || ( isSelected && hasNestedBranch );\n\n\t\t\t\t// Logic needed to target the last item of a selected branch which might be deeply nested.\n\t\t\t\t// This is currently only needed for styling purposes. See: `.is-last-of-selected-branch`.\n\t\t\t\tconst isLastBlock = index === blockCount - 1;\n\t\t\t\tconst isLast = isSelected || ( isLastOfBranch && isLastBlock );\n\t\t\t\tconst isLastOfSelectedBranch =\n\t\t\t\t\tisLastOfBranch && ! hasNestedBranch && isLastBlock;\n\n\t\t\t\tconst isExpanded = hasNestedBranch\n\t\t\t\t\t? expandedState[ clientId ] ?? true\n\t\t\t\t\t: undefined;\n\n\t\t\t\tconst selectBlockWithClientId = ( event ) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tselectBlock( clientId );\n\t\t\t\t};\n\n\t\t\t\tconst toggleExpanded = ( event ) => {\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tif ( isExpanded === true ) {\n\t\t\t\t\t\tcollapse( clientId );\n\t\t\t\t\t} else if ( isExpanded === false ) {\n\t\t\t\t\t\texpand( clientId );\n\t\t\t\t\t}\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<Fragment key={ clientId }>\n\t\t\t\t\t\t<ListViewBlock\n\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\tonClick={ selectBlockWithClientId }\n\t\t\t\t\t\t\tonToggleExpanded={ toggleExpanded }\n\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\tisLastOfSelectedBranch={ isLastOfSelectedBranch }\n\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\trowCount={ rowCount }\n\t\t\t\t\t\t\tsiblingBlockCount={ blockCount }\n\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\tterminatedLevels={ terminatedLevels }\n\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ hasNestedBranch && isExpanded && (\n\t\t\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\t\t\tblocks={ innerBlocks }\n\t\t\t\t\t\t\t\tselectedBlockClientIds={\n\t\t\t\t\t\t\t\t\tselectedBlockClientIds\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tselectBlock={ selectBlock }\n\t\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\t\tisLastOfBranch={ isLast }\n\t\t\t\t\t\t\t\tshowAppender={ showAppender }\n\t\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\t\tshowNestedBlocks={ showNestedBlocks }\n\t\t\t\t\t\t\t\tparentBlockClientId={ clientId }\n\t\t\t\t\t\t\t\tlevel={ level + 1 }\n\t\t\t\t\t\t\t\tterminatedLevels={ updatedTerminatedLevels }\n\t\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</Fragment>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t\t{ hasAppender && (\n\t\t\t\t<ListViewAppender\n\t\t\t\t\tparentBlockClientId={ parentBlockClientId }\n\t\t\t\t\tposition={ rowCount }\n\t\t\t\t\trowCount={ appenderPosition }\n\t\t\t\t\tlevel={ level }\n\t\t\t\t\tterminatedLevels={ terminatedLevels }\n\t\t\t\t\tpath={ [ ...path, appenderPosition ] }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nListViewBranch.defaultProps = {\n\tselectBlock: () => {},\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/branch.js"],"names":["compact","memo","AsyncModeProvider","ListViewBlock","useListViewContext","isClientIdSelected","countBlocks","block","expandedState","draggedClientIds","isDragged","includes","clientId","isExpanded","innerBlocks","reduce","countReducer","count","length","ListViewBranch","props","blocks","selectBlock","showBlockMovers","showNestedBlocks","selectedClientIds","level","path","isBranchSelected","listPosition","fixedListWindow","__experimentalPersistentListViewFeatures","filteredBlocks","blockCount","nextPosition","map","index","usesWindowing","itemInView","blockInView","position","updatedPath","hasNestedBlocks","undefined","showBlock","isSelected","isSelectedBranch","defaultProps"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { compact } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { memo } from '@wordpress/element';\nimport { AsyncModeProvider } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport ListViewBlock from './block';\nimport { useListViewContext } from './context';\nimport { isClientIdSelected } from './utils';\n\n/**\n * Given a block, returns the total number of blocks in that subtree. This is used to help determine\n * the list position of a block.\n *\n * When a block is collapsed, we do not count their children as part of that total. In the current drag\n * implementation dragged blocks and their children are not counted.\n *\n * @param {Object} block            block tree\n * @param {Object} expandedState    state that notes which branches are collapsed\n * @param {Array}  draggedClientIds a list of dragged client ids\n * @return {number} block count\n */\nfunction countBlocks( block, expandedState, draggedClientIds ) {\n\tconst isDragged = draggedClientIds?.includes( block.clientId );\n\tif ( isDragged ) {\n\t\treturn 0;\n\t}\n\tconst isExpanded = expandedState[ block.clientId ] ?? true;\n\tif ( isExpanded ) {\n\t\treturn (\n\t\t\t1 +\n\t\t\tblock.innerBlocks.reduce(\n\t\t\t\tcountReducer( expandedState, draggedClientIds ),\n\t\t\t\t0\n\t\t\t)\n\t\t);\n\t}\n\treturn 1;\n}\nconst countReducer = ( expandedState, draggedClientIds ) => (\n\tcount,\n\tblock\n) => {\n\tconst isDragged = draggedClientIds?.includes( block.clientId );\n\tif ( isDragged ) {\n\t\treturn count;\n\t}\n\tconst isExpanded = expandedState[ block.clientId ] ?? true;\n\tif ( isExpanded && block.innerBlocks.length > 0 ) {\n\t\treturn count + countBlocks( block, expandedState, draggedClientIds );\n\t}\n\treturn count + 1;\n};\n\nfunction ListViewBranch( props ) {\n\tconst {\n\t\tblocks,\n\t\tselectBlock,\n\t\tshowBlockMovers,\n\t\tshowNestedBlocks,\n\t\tselectedClientIds,\n\t\tlevel = 1,\n\t\tpath = '',\n\t\tisBranchSelected = false,\n\t\tlistPosition = 0,\n\t\tfixedListWindow,\n\t} = props;\n\n\tconst {\n\t\texpandedState,\n\t\tdraggedClientIds,\n\t\t__experimentalPersistentListViewFeatures,\n\t} = useListViewContext();\n\n\tconst filteredBlocks = compact( blocks );\n\tconst blockCount = filteredBlocks.length;\n\tlet nextPosition = listPosition;\n\n\treturn (\n\t\t<>\n\t\t\t{ filteredBlocks.map( ( block, index ) => {\n\t\t\t\tconst { clientId, innerBlocks } = block;\n\n\t\t\t\tif ( index > 0 ) {\n\t\t\t\t\tnextPosition += countBlocks(\n\t\t\t\t\t\tfilteredBlocks[ index - 1 ],\n\t\t\t\t\t\texpandedState,\n\t\t\t\t\t\tdraggedClientIds\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tconst usesWindowing = __experimentalPersistentListViewFeatures;\n\n\t\t\t\tconst { itemInView } = fixedListWindow;\n\n\t\t\t\tconst blockInView =\n\t\t\t\t\t! usesWindowing || itemInView( nextPosition );\n\n\t\t\t\tconst position = index + 1;\n\t\t\t\tconst updatedPath =\n\t\t\t\t\tpath.length > 0\n\t\t\t\t\t\t? `${ path }_${ position }`\n\t\t\t\t\t\t: `${ position }`;\n\t\t\t\tconst hasNestedBlocks =\n\t\t\t\t\tshowNestedBlocks && !! innerBlocks && !! innerBlocks.length;\n\n\t\t\t\tconst isExpanded = hasNestedBlocks\n\t\t\t\t\t? expandedState[ clientId ] ?? true\n\t\t\t\t\t: undefined;\n\n\t\t\t\tconst isDragged = !! draggedClientIds?.includes( clientId );\n\n\t\t\t\tconst showBlock = isDragged || blockInView;\n\n\t\t\t\t// Make updates to the selected or dragged blocks synchronous,\n\t\t\t\t// but asynchronous for any other block.\n\t\t\t\tconst isSelected = isClientIdSelected(\n\t\t\t\t\tclientId,\n\t\t\t\t\tselectedClientIds\n\t\t\t\t);\n\t\t\t\tconst isSelectedBranch =\n\t\t\t\t\tisBranchSelected || ( isSelected && hasNestedBlocks );\n\t\t\t\treturn (\n\t\t\t\t\t<AsyncModeProvider key={ clientId } value={ ! isSelected }>\n\t\t\t\t\t\t{ showBlock && (\n\t\t\t\t\t\t\t<ListViewBlock\n\t\t\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\t\t\tselectBlock={ selectBlock }\n\t\t\t\t\t\t\t\tisSelected={ isSelected }\n\t\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\t\tisDragged={ isDragged }\n\t\t\t\t\t\t\t\tlevel={ level }\n\t\t\t\t\t\t\t\tposition={ position }\n\t\t\t\t\t\t\t\trowCount={ blockCount }\n\t\t\t\t\t\t\t\tsiblingBlockCount={ blockCount }\n\t\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\t\tisExpanded={ isExpanded }\n\t\t\t\t\t\t\t\tlistPosition={ nextPosition }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ ! showBlock && (\n\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t<td className=\"block-editor-list-view-placeholder\" />\n\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasNestedBlocks && isExpanded && ! isDragged && (\n\t\t\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\t\t\tblocks={ innerBlocks }\n\t\t\t\t\t\t\t\tselectBlock={ selectBlock }\n\t\t\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\t\t\tshowNestedBlocks={ showNestedBlocks }\n\t\t\t\t\t\t\t\tlevel={ level + 1 }\n\t\t\t\t\t\t\t\tpath={ updatedPath }\n\t\t\t\t\t\t\t\tlistPosition={ nextPosition + 1 }\n\t\t\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\t\t\tisBranchSelected={ isSelectedBranch }\n\t\t\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AsyncModeProvider>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</>\n\t);\n}\n\nListViewBranch.defaultProps = {\n\tselectBlock: () => {},\n};\n\nexport default memo( ListViewBranch );\n"]}

package/build-module/components/list-view/index.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
-import { useMergeRefs } from '@wordpress/compose';
+import { useMergeRefs, __experimentalUseFixedWindowList as useFixedWindowList } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useCallback, useEffect, useMemo, useRef, useReducer } from '@wordpress/element';
+import { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';
+import { useCallback, useEffect, useMemo, useRef, useReducer, forwardRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -51,27 +51,44 @@ const expanded = (state, action) => {
  * @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.showBlockMovers                          Flag to enable block movers
  * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.
  * @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 {Object}   ref                                            Forwarded ref
  */
 
 
-export default function ListView({
+function ListView({
   blocks,
-  showOnlyCurrentHierarchy,
   onSelect = noop,
   __experimentalFeatures,
   __experimentalPersistentListViewFeatures,
+  __experimentalHideContainerBlockActions,
+  showNestedBlocks,
+  showBlockMovers,
   ...props
-}) {
+}, ref) {
   const {
     clientIdsTree,
+    draggedClientIds,
     selectedClientIds
-  } = useListViewClientIds(blocks, showOnlyCurrentHierarchy, __experimentalPersistentListViewFeatures);
+  } = useListViewClientIds(blocks);
   const {
     selectBlock
   } = useDispatch(blockEditorStore);
+  const {
+    visibleBlockCount
+  } = useSelect(select => {
+    const {
+      getGlobalBlockCount,
+      getClientIdsOfDescendants
+    } = select(blockEditorStore);
+    const draggedBlockCount = (draggedClientIds === null || draggedClientIds === void 0 ? void 0 : draggedClientIds.length) > 0 ? getClientIdsOfDescendants(draggedClientIds).length + 1 : 0;
+    return {
+      visibleBlockCount: getGlobalBlockCount() - draggedBlockCount
+    };
+  }, [draggedClientIds]);
   const selectEditorBlock = useCallback(clientId => {
     selectBlock(clientId);
     onSelect(clientId);
@@ -82,13 +99,19 @@ export default function ListView({
     target: blockDropTarget
   } = useListViewDropZone();
   const elementRef = useRef();
-  const treeGridRef = useMergeRefs([elementRef, dropZoneRef]);
+  const treeGridRef = useMergeRefs([elementRef, dropZoneRef, ref]);
   const isMounted = useRef(false);
   useEffect(() => {
     isMounted.current = true;
-  }, []);
-
-  const expand = clientId => {
+  }, []); // List View renders a fixed number of items and relies on each having a fixed item height of 36px.
+  // If this value changes, we should also change the itemHeight value set in useFixedWindowList.
+  // See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
+
+  const [fixedListWindow] = useFixedWindowList(elementRef, 36, visibleBlockCount, {
+    useWindowing: __experimentalPersistentListViewFeatures,
+    windowOverscan: 40
+  });
+  const expand = useCallback(clientId => {
     if (!clientId) {
       return;
     }
@@ -97,9 +120,8 @@ export default function ListView({
       type: 'expand',
       clientId
     });
-  };
-
-  const collapse = clientId => {
+  }, [setExpandedState]);
+  const collapse = useCallback(clientId => {
     if (!clientId) {
       return;
     }
@@ -108,29 +130,30 @@ export default function ListView({
       type: 'collapse',
       clientId
     });
-  };
-
-  const expandRow = row => {
+  }, [setExpandedState]);
+  const expandRow = useCallback(row => {
     var _row$dataset;
 
     expand(row === null || row === void 0 ? void 0 : (_row$dataset = row.dataset) === null || _row$dataset === void 0 ? void 0 : _row$dataset.block);
-  };
-
-  const collapseRow = row => {
+  }, [expand]);
+  const collapseRow = useCallback(row => {
     var _row$dataset2;
 
     collapse(row === null || row === void 0 ? void 0 : (_row$dataset2 = row.dataset) === null || _row$dataset2 === void 0 ? void 0 : _row$dataset2.block);
-  };
-
+  }, [collapse]);
   const contextValue = useMemo(() => ({
     __experimentalFeatures,
     __experimentalPersistentListViewFeatures,
+    __experimentalHideContainerBlockActions,
     isTreeGridMounted: isMounted.current,
+    draggedClientIds,
     expandedState,
     expand,
     collapse
-  }), [__experimentalFeatures, __experimentalPersistentListViewFeatures, isMounted.current, expandedState, expand, collapse]);
-  return createElement(Fragment, null, createElement(ListViewDropIndicator, {
+  }), [__experimentalFeatures, __experimentalPersistentListViewFeatures, __experimentalHideContainerBlockActions, isMounted.current, draggedClientIds, expandedState, expand, collapse]);
+  return createElement(AsyncModeProvider, {
+    value: true
+  }, createElement(ListViewDropIndicator, {
     listViewRef: elementRef,
     blockDropTarget: blockDropTarget
   }), createElement(TreeGrid, {
@@ -144,7 +167,12 @@ export default function ListView({
   }, createElement(ListViewBranch, _extends({
     blocks: clientIdsTree,
     selectBlock: selectEditorBlock,
-    selectedBlockClientIds: selectedClientIds
+    showNestedBlocks: showNestedBlocks,
+    showBlockMovers: showBlockMovers,
+    fixedListWindow: fixedListWindow,
+    selectedClientIds: selectedClientIds
   }, props)))));
 }
+
+export default forwardRef(ListView);
 //# sourceMappingURL=index.js.map

package/build-module/components/list-view/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"names":["useMergeRefs","__experimentalTreeGrid","TreeGrid","useDispatch","useCallback","useEffect","useMemo","useRef","useReducer","__","ListViewBranch","ListViewContext","ListViewDropIndicator","useListViewClientIds","useListViewDropZone","store","blockEditorStore","noop","expanded","state","action","type","clientId","ListView","blocks","showOnlyCurrentHierarchy","onSelect","__experimentalFeatures","__experimentalPersistentListViewFeatures","props","clientIdsTree","selectedClientIds","selectBlock","selectEditorBlock","expandedState","setExpandedState","ref","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","isMounted","current","expand","collapse","expandRow","row","dataset","block","collapseRow","contextValue","isTreeGridMounted"],"mappings":";;;AAAA;AACA;AACA;AAEA,SAASA,YAAT,QAA6B,oBAA7B;AACA,SAASC,sBAAsB,IAAIC,QAAnC,QAAmD,uBAAnD;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SACCC,WADD,EAECC,SAFD,EAGCC,OAHD,EAICC,MAJD,EAKCC,UALD,QAMO,oBANP;AAOA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,cAAP,MAA2B,UAA3B;AACA,SAASC,eAAT,QAAgC,WAAhC;AACA,OAAOC,qBAAP,MAAkC,kBAAlC;AACA,OAAOC,oBAAP,MAAiC,4BAAjC;AACA,OAAOC,mBAAP,MAAgC,2BAAhC;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AACA,MAAMC,QAAQ,GAAG,CAAEC,KAAF,EAASC,MAAT,KAAqB;AACrC,UAASA,MAAM,CAACC,IAAhB;AACC,SAAK,QAAL;AACC,aAAO,EAAE,GAAGF,KAAL;AAAY,WAAG;AAAE,WAAEC,MAAM,CAACE,QAAT,GAAqB;AAAvB;AAAf,OAAP;;AACD,SAAK,UAAL;AACC,aAAO,EAAE,GAAGH,KAAL;AAAY,WAAG;AAAE,WAAEC,MAAM,CAACE,QAAT,GAAqB;AAAvB;AAAf,OAAP;;AACD;AACC,aAAOH,KAAP;AANF;AAQA,CATD;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASI,QAAT,CAAmB;AACjCC,EAAAA,MADiC;AAEjCC,EAAAA,wBAFiC;AAGjCC,EAAAA,QAAQ,GAAGT,IAHsB;AAIjCU,EAAAA,sBAJiC;AAKjCC,EAAAA,wCALiC;AAMjC,KAAGC;AAN8B,CAAnB,EAOX;AACH,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAuClB,oBAAoB,CAChEW,MADgE,EAEhEC,wBAFgE,EAGhEG,wCAHgE,CAAjE;AAKA,QAAM;AAAEI,IAAAA;AAAF,MAAkB7B,WAAW,CAAEa,gBAAF,CAAnC;AACA,QAAMiB,iBAAiB,GAAG7B,WAAW,CAClCkB,QAAF,IAAgB;AACfU,IAAAA,WAAW,CAAEV,QAAF,CAAX;AACAI,IAAAA,QAAQ,CAAEJ,QAAF,CAAR;AACA,GAJmC,EAKpC,CAAEU,WAAF,EAAeN,QAAf,CALoC,CAArC;AAOA,QAAM,CAAEQ,aAAF,EAAiBC,gBAAjB,IAAsC3B,UAAU,CAAEU,QAAF,EAAY,EAAZ,CAAtD;AAEA,QAAM;AAAEkB,IAAAA,GAAG,EAAEC,WAAP;AAAoBC,IAAAA,MAAM,EAAEC;AAA5B,MAAgDzB,mBAAmB,EAAzE;AACA,QAAM0B,UAAU,GAAGjC,MAAM,EAAzB;AACA,QAAMkC,WAAW,GAAGzC,YAAY,CAAE,CAAEwC,UAAF,EAAcH,WAAd,CAAF,CAAhC;AAEA,QAAMK,SAAS,GAAGnC,MAAM,CAAE,KAAF,CAAxB;AACAF,EAAAA,SAAS,CAAE,MAAM;AAChBqC,IAAAA,SAAS,CAACC,OAAV,GAAoB,IAApB;AACA,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,MAAM,GAAKtB,QAAF,IAAgB;AAC9B,QAAK,CAAEA,QAAP,EAAkB;AACjB;AACA;;AACDa,IAAAA,gBAAgB,CAAE;AAAEd,MAAAA,IAAI,EAAE,QAAR;AAAkBC,MAAAA;AAAlB,KAAF,CAAhB;AACA,GALD;;AAMA,QAAMuB,QAAQ,GAAKvB,QAAF,IAAgB;AAChC,QAAK,CAAEA,QAAP,EAAkB;AACjB;AACA;;AACDa,IAAAA,gBAAgB,CAAE;AAAEd,MAAAA,IAAI,EAAE,UAAR;AAAoBC,MAAAA;AAApB,KAAF,CAAhB;AACA,GALD;;AAMA,QAAMwB,SAAS,GAAKC,GAAF,IAAW;AAAA;;AAC5BH,IAAAA,MAAM,CAAEG,GAAF,aAAEA,GAAF,uCAAEA,GAAG,CAAEC,OAAP,iDAAE,aAAcC,KAAhB,CAAN;AACA,GAFD;;AAGA,QAAMC,WAAW,GAAKH,GAAF,IAAW;AAAA;;AAC9BF,IAAAA,QAAQ,CAAEE,GAAF,aAAEA,GAAF,wCAAEA,GAAG,CAAEC,OAAP,kDAAE,cAAcC,KAAhB,CAAR;AACA,GAFD;;AAIA,QAAME,YAAY,GAAG7C,OAAO,CAC3B,OAAQ;AACPqB,IAAAA,sBADO;AAEPC,IAAAA,wCAFO;AAGPwB,IAAAA,iBAAiB,EAAEV,SAAS,CAACC,OAHtB;AAIPT,IAAAA,aAJO;AAKPU,IAAAA,MALO;AAMPC,IAAAA;AANO,GAAR,CAD2B,EAS3B,CACClB,sBADD,EAECC,wCAFD,EAGCc,SAAS,CAACC,OAHX,EAICT,aAJD,EAKCU,MALD,EAMCC,QAND,CAT2B,CAA5B;AAmBA,SACC,8BACC,cAAC,qBAAD;AACC,IAAA,WAAW,EAAGL,UADf;AAEC,IAAA,eAAe,EAAGD;AAFnB,IADD,EAKC,cAAC,QAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,kBAAa9B,EAAE,CAAE,4BAAF,CAFhB;AAGC,IAAA,GAAG,EAAGgC,WAHP;AAIC,IAAA,aAAa,EAAGS,WAJjB;AAKC,IAAA,WAAW,EAAGJ;AALf,KAOC,cAAC,eAAD,CAAiB,QAAjB;AAA0B,IAAA,KAAK,EAAGK;AAAlC,KACC,cAAC,cAAD;AACC,IAAA,MAAM,EAAGrB,aADV;AAEC,IAAA,WAAW,EAAGG,iBAFf;AAGC,IAAA,sBAAsB,EAAGF;AAH1B,KAIMF,KAJN,EADD,CAPD,CALD,CADD;AAwBA","sourcesContent":["/**\n * WordPress dependencies\n */\n\nimport { useMergeRefs } from '@wordpress/compose';\nimport { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';\nimport { useDispatch } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicator from './drop-indicator';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\nconst expanded = ( state, action ) => {\n\tswitch ( action.type ) {\n\t\tcase 'expand':\n\t\t\treturn { ...state, ...{ [ action.clientId ]: true } };\n\t\tcase 'collapse':\n\t\t\treturn { ...state, ...{ [ action.clientId ]: false } };\n\t\tdefault:\n\t\t\treturn state;\n\t}\n};\n\n/**\n * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a\n * recursive component (it renders itself), so this ensures TreeGrid is only\n * present at the very top of the navigation grid.\n *\n * @param {Object}   props                                          Components props.\n * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {Function} props.onSelect                                 Block selection callback.\n * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.\n * @param {boolean}  props.showOnlyCurrentHierarchy                 Flag to limit the list to the current hierarchy of blocks.\n * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.\n * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.\n */\nexport default function ListView( {\n\tblocks,\n\tshowOnlyCurrentHierarchy,\n\tonSelect = noop,\n\t__experimentalFeatures,\n\t__experimentalPersistentListViewFeatures,\n\t...props\n} ) {\n\tconst { clientIdsTree, selectedClientIds } = useListViewClientIds(\n\t\tblocks,\n\t\tshowOnlyCurrentHierarchy,\n\t\t__experimentalPersistentListViewFeatures\n\t);\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst selectEditorBlock = useCallback(\n\t\t( clientId ) => {\n\t\t\tselectBlock( clientId );\n\t\t\tonSelect( clientId );\n\t\t},\n\t\t[ selectBlock, onSelect ]\n\t);\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef ] );\n\n\tconst isMounted = useRef( false );\n\tuseEffect( () => {\n\t\tisMounted.current = true;\n\t}, [] );\n\n\tconst expand = ( clientId ) => {\n\t\tif ( ! clientId ) {\n\t\t\treturn;\n\t\t}\n\t\tsetExpandedState( { type: 'expand', clientId } );\n\t};\n\tconst collapse = ( clientId ) => {\n\t\tif ( ! clientId ) {\n\t\t\treturn;\n\t\t}\n\t\tsetExpandedState( { type: 'collapse', clientId } );\n\t};\n\tconst expandRow = ( row ) => {\n\t\texpand( row?.dataset?.block );\n\t};\n\tconst collapseRow = ( row ) => {\n\t\tcollapse( row?.dataset?.block );\n\t};\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\t__experimentalFeatures,\n\t\t\t__experimentalPersistentListViewFeatures,\n\t\t\tisTreeGridMounted: isMounted.current,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t} ),\n\t\t[\n\t\t\t__experimentalFeatures,\n\t\t\t__experimentalPersistentListViewFeatures,\n\t\t\tisMounted.current,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ListViewDropIndicator\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t<TreeGrid\n\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\tref={ treeGridRef }\n\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\tonExpandRow={ expandRow }\n\t\t\t>\n\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\tselectedBlockClientIds={ selectedClientIds }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t</ListViewContext.Provider>\n\t\t\t</TreeGrid>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"names":["useMergeRefs","__experimentalUseFixedWindowList","useFixedWindowList","__experimentalTreeGrid","TreeGrid","AsyncModeProvider","useDispatch","useSelect","useCallback","useEffect","useMemo","useRef","useReducer","forwardRef","__","ListViewBranch","ListViewContext","ListViewDropIndicator","useListViewClientIds","useListViewDropZone","store","blockEditorStore","noop","expanded","state","action","type","clientId","ListView","blocks","onSelect","__experimentalFeatures","__experimentalPersistentListViewFeatures","__experimentalHideContainerBlockActions","showNestedBlocks","showBlockMovers","props","ref","clientIdsTree","draggedClientIds","selectedClientIds","selectBlock","visibleBlockCount","select","getGlobalBlockCount","getClientIdsOfDescendants","draggedBlockCount","length","selectEditorBlock","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","isMounted","current","fixedListWindow","useWindowing","windowOverscan","expand","collapse","expandRow","row","dataset","block","collapseRow","contextValue","isTreeGridMounted"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';\nimport { AsyncModeProvider, useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicator from './drop-indicator';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport { store as blockEditorStore } from '../../store';\n\nconst noop = () => {};\nconst expanded = ( state, action ) => {\n\tswitch ( action.type ) {\n\t\tcase 'expand':\n\t\t\treturn { ...state, ...{ [ action.clientId ]: true } };\n\t\tcase 'collapse':\n\t\t\treturn { ...state, ...{ [ action.clientId ]: false } };\n\t\tdefault:\n\t\t\treturn state;\n\t}\n};\n\n/**\n * Wrap `ListViewRows` with `TreeGrid`. ListViewRows is a\n * recursive component (it renders itself), so this ensures TreeGrid is only\n * present at the very top of the navigation grid.\n *\n * @param {Object}   props                                          Components props.\n * @param {Array}    props.blocks                                   Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {Function} props.onSelect                                 Block selection callback.\n * @param {boolean}  props.showNestedBlocks                         Flag to enable displaying nested blocks.\n * @param {boolean}  props.showBlockMovers                          Flag to enable block movers\n * @param {boolean}  props.__experimentalFeatures                   Flag to enable experimental features.\n * @param {boolean}  props.__experimentalPersistentListViewFeatures Flag to enable features for the Persistent List View experiment.\n * @param {boolean}  props.__experimentalHideContainerBlockActions  Flag to hide actions of top level blocks (like core/widget-area)\n * @param {Object}   ref                                            Forwarded ref\n */\nfunction ListView(\n\t{\n\t\tblocks,\n\t\tonSelect = noop,\n\t\t__experimentalFeatures,\n\t\t__experimentalPersistentListViewFeatures,\n\t\t__experimentalHideContainerBlockActions,\n\t\tshowNestedBlocks,\n\t\tshowBlockMovers,\n\t\t...props\n\t},\n\tref\n) {\n\tconst {\n\t\tclientIdsTree,\n\t\tdraggedClientIds,\n\t\tselectedClientIds,\n\t} = useListViewClientIds( blocks );\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst { visibleBlockCount } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getGlobalBlockCount, getClientIdsOfDescendants } = select(\n\t\t\t\tblockEditorStore\n\t\t\t);\n\t\t\tconst draggedBlockCount =\n\t\t\t\tdraggedClientIds?.length > 0\n\t\t\t\t\t? getClientIdsOfDescendants( draggedClientIds ).length + 1\n\t\t\t\t\t: 0;\n\t\t\treturn {\n\t\t\t\tvisibleBlockCount: getGlobalBlockCount() - draggedBlockCount,\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\tconst selectEditorBlock = useCallback(\n\t\t( clientId ) => {\n\t\t\tselectBlock( clientId );\n\t\t\tonSelect( clientId );\n\t\t},\n\t\t[ selectBlock, onSelect ]\n\t);\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone();\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst isMounted = useRef( false );\n\tuseEffect( () => {\n\t\tisMounted.current = true;\n\t}, [] );\n\n\t// List View renders a fixed number of items and relies on each having a fixed item height of 36px.\n\t// If this value changes, we should also change the itemHeight value set in useFixedWindowList.\n\t// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.\n\tconst [ fixedListWindow ] = useFixedWindowList(\n\t\telementRef,\n\t\t36,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\tuseWindowing: __experimentalPersistentListViewFeatures,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\tconst expand = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'expand', clientId } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst collapse = useCallback(\n\t\t( clientId ) => {\n\t\t\tif ( ! clientId ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetExpandedState( { type: 'collapse', clientId } );\n\t\t},\n\t\t[ setExpandedState ]\n\t);\n\tconst expandRow = useCallback(\n\t\t( row ) => {\n\t\t\texpand( row?.dataset?.block );\n\t\t},\n\t\t[ expand ]\n\t);\n\tconst collapseRow = useCallback(\n\t\t( row ) => {\n\t\t\tcollapse( row?.dataset?.block );\n\t\t},\n\t\t[ collapse ]\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\t__experimentalFeatures,\n\t\t\t__experimentalPersistentListViewFeatures,\n\t\t\t__experimentalHideContainerBlockActions,\n\t\t\tisTreeGridMounted: isMounted.current,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t} ),\n\t\t[\n\t\t\t__experimentalFeatures,\n\t\t\t__experimentalPersistentListViewFeatures,\n\t\t\t__experimentalHideContainerBlockActions,\n\t\t\tisMounted.current,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t]\n\t);\n\n\treturn (\n\t\t<AsyncModeProvider value={ true }>\n\t\t\t<ListViewDropIndicator\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t<TreeGrid\n\t\t\t\tclassName=\"block-editor-list-view-tree\"\n\t\t\t\taria-label={ __( 'Block navigation structure' ) }\n\t\t\t\tref={ treeGridRef }\n\t\t\t\tonCollapseRow={ collapseRow }\n\t\t\t\tonExpandRow={ expandRow }\n\t\t\t>\n\t\t\t\t<ListViewContext.Provider value={ contextValue }>\n\t\t\t\t\t<ListViewBranch\n\t\t\t\t\t\tblocks={ clientIdsTree }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\n\t\t\t\t\t\tshowNestedBlocks={ showNestedBlocks }\n\t\t\t\t\t\tshowBlockMovers={ showBlockMovers }\n\t\t\t\t\t\tfixedListWindow={ fixedListWindow }\n\t\t\t\t\t\tselectedClientIds={ selectedClientIds }\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t</ListViewContext.Provider>\n\t\t\t</TreeGrid>\n\t\t</AsyncModeProvider>\n\t);\n}\nexport default forwardRef( ListView );\n"]}

package/build-module/components/list-view/leaf.js

@@ -4,7 +4,7 @@ import { createElement } from "@wordpress/element";
 /**
  * External dependencies
  */
-import { animated } from 'react-spring/web.cjs';
+import { animated } from '@react-spring/web';
 import classnames from 'classnames';
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ export default function ListViewLeaf({
     isSelected,
     adjustScrolling: false,
     enableAnimation: true,
-    triggerAnimationOnChange: path.join('_')
+    triggerAnimationOnChange: path
   });
   return createElement(AnimatedTreeGridRow, _extends({
     ref: ref,

package/build-module/components/list-view/leaf.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"names":["animated","classnames","__experimentalTreeGridRow","TreeGridRow","useMovingAnimation","AnimatedTreeGridRow","ListViewLeaf","isSelected","position","level","rowCount","children","className","path","props","ref","adjustScrolling","enableAnimation","triggerAnimationOnChange","join"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,sBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,yBAAyB,IAAIC,WAAtC,QAAyD,uBAAzD;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEA,MAAMC,mBAAmB,GAAGL,QAAQ,CAAEG,WAAF,CAApC;AAEA,eAAe,SAASG,YAAT,CAAuB;AACrCC,EAAAA,UADqC;AAErCC,EAAAA,QAFqC;AAGrCC,EAAAA,KAHqC;AAIrCC,EAAAA,QAJqC;AAKrCC,EAAAA,QALqC;AAMrCC,EAAAA,SANqC;AAOrCC,EAAAA,IAPqC;AAQrC,KAAGC;AARkC,CAAvB,EASX;AACH,QAAMC,GAAG,GAAGX,kBAAkB,CAAE;AAC/BG,IAAAA,UAD+B;AAE/BS,IAAAA,eAAe,EAAE,KAFc;AAG/BC,IAAAA,eAAe,EAAE,IAHc;AAI/BC,IAAAA,wBAAwB,EAAEL,IAAI,CAACM,IAAL,CAAW,GAAX;AAJK,GAAF,CAA9B;AAOA,SACC,cAAC,mBAAD;AACC,IAAA,GAAG,EAAGJ,GADP;AAEC,IAAA,SAAS,EAAGd,UAAU,CAAE,6BAAF,EAAiCW,SAAjC,CAFvB;AAGC,IAAA,KAAK,EAAGH,KAHT;AAIC,IAAA,aAAa,EAAGD,QAJjB;AAKC,IAAA,OAAO,EAAGE;AALX,KAMMI,KANN,GAQGH,QARH,CADD;AAYA","sourcesContent":["/**\n * External dependencies\n */\nimport { animated } from 'react-spring/web.cjs';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nexport default function ListViewLeaf( {\n\tisSelected,\n\tposition,\n\tlevel,\n\trowCount,\n\tchildren,\n\tclassName,\n\tpath,\n\t...props\n} ) {\n\tconst ref = useMovingAnimation( {\n\t\tisSelected,\n\t\tadjustScrolling: false,\n\t\tenableAnimation: true,\n\t\ttriggerAnimationOnChange: path.join( '_' ),\n\t} );\n\n\treturn (\n\t\t<AnimatedTreeGridRow\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'block-editor-list-view-leaf', className ) }\n\t\t\tlevel={ level }\n\t\t\tpositionInSet={ position }\n\t\t\tsetSize={ rowCount }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</AnimatedTreeGridRow>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"names":["animated","classnames","__experimentalTreeGridRow","TreeGridRow","useMovingAnimation","AnimatedTreeGridRow","ListViewLeaf","isSelected","position","level","rowCount","children","className","path","props","ref","adjustScrolling","enableAnimation","triggerAnimationOnChange"],"mappings":";;;AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,mBAAzB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,yBAAyB,IAAIC,WAAtC,QAAyD,uBAAzD;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,yBAA/B;AAEA,MAAMC,mBAAmB,GAAGL,QAAQ,CAAEG,WAAF,CAApC;AAEA,eAAe,SAASG,YAAT,CAAuB;AACrCC,EAAAA,UADqC;AAErCC,EAAAA,QAFqC;AAGrCC,EAAAA,KAHqC;AAIrCC,EAAAA,QAJqC;AAKrCC,EAAAA,QALqC;AAMrCC,EAAAA,SANqC;AAOrCC,EAAAA,IAPqC;AAQrC,KAAGC;AARkC,CAAvB,EASX;AACH,QAAMC,GAAG,GAAGX,kBAAkB,CAAE;AAC/BG,IAAAA,UAD+B;AAE/BS,IAAAA,eAAe,EAAE,KAFc;AAG/BC,IAAAA,eAAe,EAAE,IAHc;AAI/BC,IAAAA,wBAAwB,EAAEL;AAJK,GAAF,CAA9B;AAOA,SACC,cAAC,mBAAD;AACC,IAAA,GAAG,EAAGE,GADP;AAEC,IAAA,SAAS,EAAGd,UAAU,CAAE,6BAAF,EAAiCW,SAAjC,CAFvB;AAGC,IAAA,KAAK,EAAGH,KAHT;AAIC,IAAA,aAAa,EAAGD,QAJjB;AAKC,IAAA,OAAO,EAAGE;AALX,KAMMI,KANN,GAQGH,QARH,CADD;AAYA","sourcesContent":["/**\n * External dependencies\n */\nimport { animated } from '@react-spring/web';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalTreeGridRow as TreeGridRow } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nexport default function ListViewLeaf( {\n\tisSelected,\n\tposition,\n\tlevel,\n\trowCount,\n\tchildren,\n\tclassName,\n\tpath,\n\t...props\n} ) {\n\tconst ref = useMovingAnimation( {\n\t\tisSelected,\n\t\tadjustScrolling: false,\n\t\tenableAnimation: true,\n\t\ttriggerAnimationOnChange: path,\n\t} );\n\n\treturn (\n\t\t<AnimatedTreeGridRow\n\t\t\tref={ ref }\n\t\t\tclassName={ classnames( 'block-editor-list-view-leaf', className ) }\n\t\t\tlevel={ level }\n\t\t\tpositionInSet={ position }\n\t\t\tsetSize={ rowCount }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</AnimatedTreeGridRow>\n\t);\n}\n"]}

package/build-module/components/list-view/list-item.js

@@ -24,6 +24,7 @@ export default function ListViewListItem({
   children
 }) {
   const blockType = getBlockType(block.name);
+  const blockLabel = blockType ? getBlockLabel(blockType, block.attributes) : null;
   return createElement("div", {
     className: "block-editor-list-view__list-item"
   }, createElement(WrapperComponent, {
@@ -32,9 +33,9 @@ export default function ListViewListItem({
     }),
     onClick: onClick
   }, createElement(BlockIcon, {
-    icon: blockType.icon,
+    icon: blockType === null || blockType === void 0 ? void 0 : blockType.icon,
     showColors: true
-  }), children ? children : getBlockLabel(blockType, block.attributes), isSelected && createElement(VisuallyHidden, {
+  }), children ? children : blockLabel, isSelected && createElement(VisuallyHidden, {
     as: "span"
   }, __('(selected block)'))));
 }

package/build-module/components/list-view/list-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/list-item.js"],"names":["classnames","Button","VisuallyHidden","__experimentalGetBlockLabel","getBlockLabel","getBlockType","__","BlockIcon","ListViewListItem","block","onClick","isSelected","wrapperComponent","WrapperComponent","children","blockType","name","icon","attributes","defaultProps","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,cAAjB,QAAuC,uBAAvC;AACA,SACCC,2BAA2B,IAAIC,aADhC,EAECC,YAFD,QAGO,mBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AAEA,eAAe,SAASC,gBAAT,CAA2B;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA,OAFyC;AAGzCC,EAAAA,UAHyC;AAIzCC,EAAAA,gBAAgB,EAAEC,gBAJuB;AAKzCC,EAAAA;AALyC,CAA3B,EAMX;AACH,QAAMC,SAAS,GAAGV,YAAY,CAAEI,KAAK,CAACO,IAAR,CAA9B;AAEA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,gBAAD;AACC,IAAA,SAAS,EAAGhB,UAAU,CACrB,0CADqB,EAErB;AACC,qBAAeW;AADhB,KAFqB,CADvB;AAOC,IAAA,OAAO,EAAGD;AAPX,KASC,cAAC,SAAD;AAAW,IAAA,IAAI,EAAGK,SAAS,CAACE,IAA5B;AAAmC,IAAA,UAAU;AAA7C,IATD,EAUGH,QAAQ,GACPA,QADO,GAEPV,aAAa,CAAEW,SAAF,EAAaN,KAAK,CAACS,UAAnB,CAZjB,EAaGP,UAAU,IACX,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KACGL,EAAE,CAAE,kBAAF,CADL,CAdF,CADD,CADD;AAuBA;AAEDE,gBAAgB,CAACW,YAAjB,GAAgC;AAC/BT,EAAAA,OAAO,EAAE,MAAM,CAAE,CADc;AAE/BE,EAAAA,gBAAgB,EAAIQ,KAAF,IAAa,cAAC,MAAD,EAAaA,KAAb;AAFA,CAAhC","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\n\nexport default function ListViewListItem( {\n\tblock,\n\tonClick,\n\tisSelected,\n\twrapperComponent: WrapperComponent,\n\tchildren,\n} ) {\n\tconst blockType = getBlockType( block.name );\n\n\treturn (\n\t\t<div className=\"block-editor-list-view__list-item\">\n\t\t\t<WrapperComponent\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view__list-item-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tonClick={ onClick }\n\t\t\t>\n\t\t\t\t<BlockIcon icon={ blockType.icon } showColors />\n\t\t\t\t{ children\n\t\t\t\t\t? children\n\t\t\t\t\t: getBlockLabel( blockType, block.attributes ) }\n\t\t\t\t{ isSelected && (\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ __( '(selected block)' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</WrapperComponent>\n\t\t</div>\n\t);\n}\n\nListViewListItem.defaultProps = {\n\tonClick: () => {},\n\twrapperComponent: ( props ) => <Button { ...props } />,\n};\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/list-view/list-item.js"],"names":["classnames","Button","VisuallyHidden","__experimentalGetBlockLabel","getBlockLabel","getBlockType","__","BlockIcon","ListViewListItem","block","onClick","isSelected","wrapperComponent","WrapperComponent","children","blockType","name","blockLabel","attributes","icon","defaultProps","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,cAAjB,QAAuC,uBAAvC;AACA,SACCC,2BAA2B,IAAIC,aADhC,EAECC,YAFD,QAGO,mBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,eAAtB;AAEA,eAAe,SAASC,gBAAT,CAA2B;AACzCC,EAAAA,KADyC;AAEzCC,EAAAA,OAFyC;AAGzCC,EAAAA,UAHyC;AAIzCC,EAAAA,gBAAgB,EAAEC,gBAJuB;AAKzCC,EAAAA;AALyC,CAA3B,EAMX;AACH,QAAMC,SAAS,GAAGV,YAAY,CAAEI,KAAK,CAACO,IAAR,CAA9B;AACA,QAAMC,UAAU,GAAGF,SAAS,GACzBX,aAAa,CAAEW,SAAF,EAAaN,KAAK,CAACS,UAAnB,CADY,GAEzB,IAFH;AAIA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,gBAAD;AACC,IAAA,SAAS,EAAGlB,UAAU,CACrB,0CADqB,EAErB;AACC,qBAAeW;AADhB,KAFqB,CADvB;AAOC,IAAA,OAAO,EAAGD;AAPX,KASC,cAAC,SAAD;AAAW,IAAA,IAAI,EAAGK,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAEI,IAA7B;AAAoC,IAAA,UAAU;AAA9C,IATD,EAUGL,QAAQ,GAAGA,QAAH,GAAcG,UAVzB,EAWGN,UAAU,IACX,cAAC,cAAD;AAAgB,IAAA,EAAE,EAAC;AAAnB,KACGL,EAAE,CAAE,kBAAF,CADL,CAZF,CADD,CADD;AAqBA;AAEDE,gBAAgB,CAACY,YAAjB,GAAgC;AAC/BV,EAAAA,OAAO,EAAE,MAAM,CAAE,CADc;AAE/BE,EAAAA,gBAAgB,EAAIS,KAAF,IAAa,cAAC,MAAD,EAAaA,KAAb;AAFA,CAAhC","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Button, VisuallyHidden } from '@wordpress/components';\nimport {\n\t__experimentalGetBlockLabel as getBlockLabel,\n\tgetBlockType,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\n\nexport default function ListViewListItem( {\n\tblock,\n\tonClick,\n\tisSelected,\n\twrapperComponent: WrapperComponent,\n\tchildren,\n} ) {\n\tconst blockType = getBlockType( block.name );\n\tconst blockLabel = blockType\n\t\t? getBlockLabel( blockType, block.attributes )\n\t\t: null;\n\n\treturn (\n\t\t<div className=\"block-editor-list-view__list-item\">\n\t\t\t<WrapperComponent\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view__list-item-button',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': isSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tonClick={ onClick }\n\t\t\t>\n\t\t\t\t<BlockIcon icon={ blockType?.icon } showColors />\n\t\t\t\t{ children ? children : blockLabel }\n\t\t\t\t{ isSelected && (\n\t\t\t\t\t<VisuallyHidden as=\"span\">\n\t\t\t\t\t\t{ __( '(selected block)' ) }\n\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t) }\n\t\t\t</WrapperComponent>\n\t\t</div>\n\t);\n}\n\nListViewListItem.defaultProps = {\n\tonClick: () => {},\n\twrapperComponent: ( props ) => <Button { ...props } />,\n};\n"]}