@wordpress/block-editor 12.16.1-next.79a6196f.0 → 12.18.0

package/build-module/components/list-view/drop-indicator.js

@@ -1,15 +1,34 @@
 import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { Popover } from '@wordpress/components';
+import { __experimentalHStack as HStack, __experimentalTruncate as Truncate, Popover } from '@wordpress/components';
 import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
-export default function ListViewDropIndicator({
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import useBlockDisplayInformation from '../use-block-display-information';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import ListViewExpander from './expander';
+export default function ListViewDropIndicatorPreview({
+  draggedBlockClientId,
   listViewRef,
   blockDropTarget
 }) {
+  const blockInformation = useBlockDisplayInformation(draggedBlockClientId);
+  const blockTitle = useBlockDisplayTitle({
+    clientId: draggedBlockClientId,
+    context: 'list-view'
+  });
   const {
     rootClientId,
     clientId,
@@ -29,25 +48,13 @@ export default function ListViewDropIndicator({
     // dropping a block into an empty block list.
     const _blockElement = clientId ? listViewRef.current.querySelector(`[data-block="${clientId}"]`) : undefined;
     return [_rootBlockElement, _blockElement];
-  }, [rootClientId, clientId]);
+  }, [listViewRef, rootClientId, clientId]);
 
   // The targetElement is the element that the drop indicator will appear
   // before or after. When dropping into an empty block list, blockElement
   // is undefined, so the indicator will appear after the rootBlockElement.
   const targetElement = blockElement || rootBlockElement;
   const rtl = isRTL();
-  const getDropIndicatorIndent = useCallback(targetElementRect => {
-    if (!rootBlockElement) {
-      return 0;
-    }
-
-    // Calculate the indent using the block icon of the root block.
-    // Using a classname selector here might be flaky and could be
-    // improved.
-    const rootBlockIconElement = rootBlockElement.querySelector('.block-editor-block-icon');
-    const rootBlockIconRect = rootBlockIconElement.getBoundingClientRect();
-    return rtl ? targetElementRect.right - rootBlockIconRect.left : rootBlockIconRect.right - targetElementRect.left;
-  }, [rootBlockElement, rtl]);
   const getDropIndicatorWidth = useCallback((targetElementRect, indent) => {
     if (!targetElement) {
       return 0;
@@ -96,11 +103,47 @@ export default function ListViewDropIndicator({
       return {};
     }
     const targetElementRect = targetElement.getBoundingClientRect();
-    const indent = getDropIndicatorIndent(targetElementRect);
     return {
-      width: getDropIndicatorWidth(targetElementRect, indent)
+      width: getDropIndicatorWidth(targetElementRect, 0)
     };
-  }, [getDropIndicatorIndent, getDropIndicatorWidth, targetElement]);
+  }, [getDropIndicatorWidth, targetElement]);
+  const horizontalScrollOffsetStyle = useMemo(() => {
+    if (!targetElement) {
+      return {};
+    }
+    const scrollContainer = getScrollContainer(targetElement);
+    const ownerDocument = targetElement.ownerDocument;
+    const windowScroll = scrollContainer === ownerDocument.body || scrollContainer === ownerDocument.documentElement;
+    if (scrollContainer && !windowScroll) {
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const targetElementRect = targetElement.getBoundingClientRect();
+      const distanceBetweenContainerAndTarget = rtl ? scrollContainerRect.right - targetElementRect.right : targetElementRect.left - scrollContainerRect.left;
+      if (!rtl && scrollContainerRect.left > targetElementRect.left) {
+        return {
+          transform: `translateX( ${distanceBetweenContainerAndTarget}px )`
+        };
+      }
+      if (rtl && scrollContainerRect.right < targetElementRect.right) {
+        return {
+          transform: `translateX( ${distanceBetweenContainerAndTarget * -1}px )`
+        };
+      }
+    }
+    return {};
+  }, [rtl, targetElement]);
+  const ariaLevel = useMemo(() => {
+    if (!rootBlockElement) {
+      return 1;
+    }
+    const _ariaLevel = parseInt(rootBlockElement.getAttribute('aria-level'), 10);
+    return _ariaLevel ? _ariaLevel + 1 : 1;
+  }, [rootBlockElement]);
+  const hasAdjacentSelectedBranch = useMemo(() => {
+    if (!targetElement) {
+      return false;
+    }
+    return targetElement.classList.contains('is-branch-selected');
+  }, [targetElement]);
   const popoverAnchor = useMemo(() => {
     const isValidDropPosition = dropPosition === 'top' || dropPosition === 'bottom' || dropPosition === 'inside';
     if (!targetElement || !isValidDropPosition) {
@@ -110,16 +153,15 @@ export default function ListViewDropIndicator({
       contextElement: targetElement,
       getBoundingClientRect() {
         const rect = targetElement.getBoundingClientRect();
-        const indent = getDropIndicatorIndent(rect);
         // In RTL languages, the drop indicator should be positioned
         // to the left of the target element, with the width of the
         // indicator determining the indent at the right edge of the
         // target element. In LTR languages, the drop indicator should
         // end at the right edge of the target element, with the indent
         // added to the position of the left edge of the target element.
-        let left = rtl ? rect.left : rect.left + indent;
+        // let left = rtl ? rect.left : rect.left + indent;
+        let left = rect.left;
         let top = 0;
-        let bottom = 0;
 
         // In deeply nested lists, where a scrollbar is present,
         // the width of the drop indicator should be the width of
@@ -147,19 +189,17 @@ export default function ListViewDropIndicator({
           }
         }
         if (dropPosition === 'top') {
-          top = rect.top;
-          bottom = rect.top;
+          top = rect.top - rect.height * 2;
         } else {
           // `dropPosition` is either `bottom` or `inside`
-          top = rect.bottom;
-          bottom = rect.bottom;
+          top = rect.top;
         }
-        const width = getDropIndicatorWidth(rect, indent);
-        const height = bottom - top;
+        const width = getDropIndicatorWidth(rect, 0);
+        const height = rect.height;
         return new window.DOMRect(left, top, width, height);
       }
     };
-  }, [targetElement, dropPosition, getDropIndicatorIndent, getDropIndicatorWidth, rtl]);
+  }, [targetElement, dropPosition, getDropIndicatorWidth, rtl]);
   if (!targetElement) {
     return null;
   }
@@ -167,11 +207,38 @@ export default function ListViewDropIndicator({
     animate: false,
     anchor: popoverAnchor,
     focusOnMount: false,
-    className: "block-editor-list-view-drop-indicator",
-    variant: "unstyled"
+    className: "block-editor-list-view-drop-indicator--preview",
+    variant: "unstyled",
+    flip: false,
+    resize: true
   }, createElement("div", {
     style: style,
-    className: "block-editor-list-view-drop-indicator__line"
-  }));
+    className: classnames('block-editor-list-view-drop-indicator__line', {
+      'block-editor-list-view-drop-indicator__line--darker': hasAdjacentSelectedBranch
+    })
+  }, createElement("div", {
+    className: "block-editor-list-view-leaf",
+    "aria-level": ariaLevel
+  }, createElement("div", {
+    className: classnames('block-editor-list-view-block-select-button', 'block-editor-list-view-block-contents'),
+    style: horizontalScrollOffsetStyle
+  }, createElement(ListViewExpander, {
+    onClick: () => {}
+  }), createElement(BlockIcon, {
+    icon: blockInformation?.icon,
+    showColors: true,
+    context: "list-view"
+  }), createElement(HStack, {
+    alignment: "center",
+    className: "block-editor-list-view-block-select-button__label-wrapper",
+    justify: "flex-start",
+    spacing: 1
+  }, createElement("span", {
+    className: "block-editor-list-view-block-select-button__title"
+  }, createElement(Truncate, {
+    ellipsizeMode: "auto"
+  }, blockTitle)))), createElement("div", {
+    className: "block-editor-list-view-block__menu-cell"
+  }))));
 }
 //# sourceMappingURL=drop-indicator.js.map

package/build-module/components/list-view/drop-indicator.js.map

@@ -1 +1 @@
-{"version":3,"names":["Popover","getScrollContainer","useCallback","useMemo","isRTL","ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","getDropIndicatorIndent","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","distanceBetweenContainerAndTarget","scrollContainerWidth","clientWidth","style","popoverAnchor","isValidDropPosition","contextElement","rect","top","bottom","doc","scrollbarWidth","height","window","DOMRect","createElement","animate","anchor","focusOnMount","className","variant"],"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Popover } from '@wordpress/components';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\nexport default function ListViewDropIndicator( {\n\tlistViewRef,\n\tblockDropTarget,\n} ) {\n\tconst { rootClientId, clientId, dropPosition } = blockDropTarget || {};\n\n\tconst [ rootBlockElement, blockElement ] = useMemo( () => {\n\t\tif ( ! listViewRef.current ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// The rootClientId will be defined whenever dropping into inner\n\t\t// block lists, but is undefined when dropping at the root level.\n\t\tconst _rootBlockElement = rootClientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ rootClientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\t// The clientId represents the sibling block, the dragged block will\n\t\t// usually be inserted adjacent to it. It will be undefined when\n\t\t// dropping a block into an empty block list.\n\t\tconst _blockElement = clientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ clientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\treturn [ _rootBlockElement, _blockElement ];\n\t}, [ rootClientId, clientId ] );\n\n\t// The targetElement is the element that the drop indicator will appear\n\t// before or after. When dropping into an empty block list, blockElement\n\t// is undefined, so the indicator will appear after the rootBlockElement.\n\tconst targetElement = blockElement || rootBlockElement;\n\n\tconst rtl = isRTL();\n\n\tconst getDropIndicatorIndent = useCallback(\n\t\t( targetElementRect ) => {\n\t\t\tif ( ! rootBlockElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Calculate the indent using the block icon of the root block.\n\t\t\t// Using a classname selector here might be flaky and could be\n\t\t\t// improved.\n\t\t\tconst rootBlockIconElement = rootBlockElement.querySelector(\n\t\t\t\t'.block-editor-block-icon'\n\t\t\t);\n\t\t\tconst rootBlockIconRect =\n\t\t\t\trootBlockIconElement.getBoundingClientRect();\n\t\t\treturn rtl\n\t\t\t\t? targetElementRect.right - rootBlockIconRect.left\n\t\t\t\t: rootBlockIconRect.right - targetElementRect.left;\n\t\t},\n\t\t[ rootBlockElement, rtl ]\n\t);\n\n\tconst getDropIndicatorWidth = useCallback(\n\t\t( targetElementRect, indent ) => {\n\t\t\tif ( ! targetElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Default to assuming that the width of the drop indicator\n\t\t\t// should be the same as the target element.\n\t\t\tlet width = targetElement.offsetWidth;\n\n\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t// the width of the drop indicator should be the width of\n\t\t\t// the scroll container, minus the distance from the left\n\t\t\t// edge of the scroll container to the left edge of the\n\t\t\t// target element.\n\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\ttargetElement,\n\t\t\t\t'horizontal'\n\t\t\t);\n\n\t\t\tconst ownerDocument = targetElement.ownerDocument;\n\t\t\tconst windowScroll =\n\t\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\t\tscrollContainer === ownerDocument.documentElement;\n\n\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\tconst distanceBetweenContainerAndTarget = isRTL()\n\t\t\t\t\t? scrollContainerRect.right - targetElementRect.right\n\t\t\t\t\t: targetElementRect.left - scrollContainerRect.left;\n\n\t\t\t\tconst scrollContainerWidth = scrollContainer.clientWidth;\n\n\t\t\t\tif (\n\t\t\t\t\tscrollContainerWidth <\n\t\t\t\t\twidth + distanceBetweenContainerAndTarget\n\t\t\t\t) {\n\t\t\t\t\twidth =\n\t\t\t\t\t\tscrollContainerWidth -\n\t\t\t\t\t\tdistanceBetweenContainerAndTarget;\n\t\t\t\t}\n\n\t\t\t\t// LTR logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\t! rtl &&\n\t\t\t\t\ttargetElementRect.left + indent < scrollContainerRect.left\n\t\t\t\t) {\n\t\t\t\t\twidth -= scrollContainerRect.left - targetElementRect.left;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\n\t\t\t\t// RTL logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\trtl &&\n\t\t\t\t\ttargetElementRect.right - indent > scrollContainerRect.right\n\t\t\t\t) {\n\t\t\t\t\twidth -=\n\t\t\t\t\t\ttargetElementRect.right - scrollContainerRect.right;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Subtract the indent from the final width of the indicator.\n\t\t\treturn width - indent;\n\t\t},\n\t\t[ rtl, targetElement ]\n\t);\n\n\tconst style = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\t\tconst indent = getDropIndicatorIndent( targetElementRect );\n\n\t\treturn {\n\t\t\twidth: getDropIndicatorWidth( targetElementRect, indent ),\n\t\t};\n\t}, [ getDropIndicatorIndent, getDropIndicatorWidth, targetElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tconst isValidDropPosition =\n\t\t\tdropPosition === 'top' ||\n\t\t\tdropPosition === 'bottom' ||\n\t\t\tdropPosition === 'inside';\n\t\tif ( ! targetElement || ! isValidDropPosition ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tcontextElement: targetElement,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\tconst indent = getDropIndicatorIndent( rect );\n\t\t\t\t// In RTL languages, the drop indicator should be positioned\n\t\t\t\t// to the left of the target element, with the width of the\n\t\t\t\t// indicator determining the indent at the right edge of the\n\t\t\t\t// target element. In LTR languages, the drop indicator should\n\t\t\t\t// end at the right edge of the target element, with the indent\n\t\t\t\t// added to the position of the left edge of the target element.\n\t\t\t\tlet left = rtl ? rect.left : rect.left + indent;\n\t\t\t\tlet top = 0;\n\t\t\t\tlet bottom = 0;\n\n\t\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t\t// the width of the drop indicator should be the width of\n\t\t\t\t// the visible area of the scroll container. Additionally,\n\t\t\t\t// the left edge of the drop indicator line needs to be\n\t\t\t\t// offset by the distance the left edge of the target element\n\t\t\t\t// and the left edge of the scroll container. The ensures\n\t\t\t\t// that the drop indicator position never breaks out of the\n\t\t\t\t// visible area of the scroll container.\n\t\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\t\ttargetElement,\n\t\t\t\t\t'horizontal'\n\t\t\t\t);\n\n\t\t\t\tconst doc = targetElement.ownerDocument;\n\t\t\t\tconst windowScroll =\n\t\t\t\t\tscrollContainer === doc.body ||\n\t\t\t\t\tscrollContainer === doc.documentElement;\n\n\t\t\t\t// If the scroll container is not the window, offset the left position, if need be.\n\t\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\t\t// In RTL languages, a vertical scrollbar is present on the\n\t\t\t\t\t// left edge of the scroll container. The width of the\n\t\t\t\t\t// scrollbar needs to be accounted for when positioning the\n\t\t\t\t\t// drop indicator.\n\t\t\t\t\tconst scrollbarWidth = rtl\n\t\t\t\t\t\t? scrollContainer.offsetWidth -\n\t\t\t\t\t\t  scrollContainer.clientWidth\n\t\t\t\t\t\t: 0;\n\n\t\t\t\t\tif ( left < scrollContainerRect.left + scrollbarWidth ) {\n\t\t\t\t\t\tleft = scrollContainerRect.left + scrollbarWidth;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( dropPosition === 'top' ) {\n\t\t\t\t\ttop = rect.top;\n\t\t\t\t\tbottom = rect.top;\n\t\t\t\t} else {\n\t\t\t\t\t// `dropPosition` is either `bottom` or `inside`\n\t\t\t\t\ttop = rect.bottom;\n\t\t\t\t\tbottom = rect.bottom;\n\t\t\t\t}\n\n\t\t\t\tconst width = getDropIndicatorWidth( rect, indent );\n\t\t\t\tconst height = bottom - top;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [\n\t\ttargetElement,\n\t\tdropPosition,\n\t\tgetDropIndicatorIndent,\n\t\tgetDropIndicatorWidth,\n\t\trtl,\n\t] );\n\n\tif ( ! targetElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-list-view-drop-indicator\"\n\t\t\tvariant=\"unstyled\"\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ style }\n\t\t\t\tclassName=\"block-editor-list-view-drop-indicator__line\"\n\t\t\t/>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"names":["classnames","__experimentalHStack","HStack","__experimentalTruncate","Truncate","Popover","getScrollContainer","useCallback","useMemo","isRTL","BlockIcon","useBlockDisplayInformation","useBlockDisplayTitle","ListViewExpander","ListViewDropIndicatorPreview","draggedBlockClientId","listViewRef","blockDropTarget","blockInformation","blockTitle","clientId","context","rootClientId","dropPosition","rootBlockElement","blockElement","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","getDropIndicatorWidth","targetElementRect","indent","width","offsetWidth","scrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","getBoundingClientRect","distanceBetweenContainerAndTarget","right","left","scrollContainerWidth","clientWidth","style","horizontalScrollOffsetStyle","transform","ariaLevel","_ariaLevel","parseInt","getAttribute","hasAdjacentSelectedBranch","classList","contains","popoverAnchor","isValidDropPosition","contextElement","rect","top","doc","scrollbarWidth","height","window","DOMRect","createElement","animate","anchor","focusOnMount","className","variant","flip","resize","onClick","icon","showColors","alignment","justify","spacing","ellipsizeMode"],"sources":["@wordpress/block-editor/src/components/list-view/drop-indicator.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n\tPopover,\n} from '@wordpress/components';\n\nimport { getScrollContainer } from '@wordpress/dom';\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport BlockIcon from '../block-icon';\nimport useBlockDisplayInformation from '../use-block-display-information';\nimport useBlockDisplayTitle from '../block-title/use-block-display-title';\nimport ListViewExpander from './expander';\n\nexport default function ListViewDropIndicatorPreview( {\n\tdraggedBlockClientId,\n\tlistViewRef,\n\tblockDropTarget,\n} ) {\n\tconst blockInformation = useBlockDisplayInformation( draggedBlockClientId );\n\tconst blockTitle = useBlockDisplayTitle( {\n\t\tclientId: draggedBlockClientId,\n\t\tcontext: 'list-view',\n\t} );\n\n\tconst { rootClientId, clientId, dropPosition } = blockDropTarget || {};\n\n\tconst [ rootBlockElement, blockElement ] = useMemo( () => {\n\t\tif ( ! listViewRef.current ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t// The rootClientId will be defined whenever dropping into inner\n\t\t// block lists, but is undefined when dropping at the root level.\n\t\tconst _rootBlockElement = rootClientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ rootClientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\t// The clientId represents the sibling block, the dragged block will\n\t\t// usually be inserted adjacent to it. It will be undefined when\n\t\t// dropping a block into an empty block list.\n\t\tconst _blockElement = clientId\n\t\t\t? listViewRef.current.querySelector(\n\t\t\t\t\t`[data-block=\"${ clientId }\"]`\n\t\t\t  )\n\t\t\t: undefined;\n\n\t\treturn [ _rootBlockElement, _blockElement ];\n\t}, [ listViewRef, rootClientId, clientId ] );\n\n\t// The targetElement is the element that the drop indicator will appear\n\t// before or after. When dropping into an empty block list, blockElement\n\t// is undefined, so the indicator will appear after the rootBlockElement.\n\tconst targetElement = blockElement || rootBlockElement;\n\n\tconst rtl = isRTL();\n\n\tconst getDropIndicatorWidth = useCallback(\n\t\t( targetElementRect, indent ) => {\n\t\t\tif ( ! targetElement ) {\n\t\t\t\treturn 0;\n\t\t\t}\n\n\t\t\t// Default to assuming that the width of the drop indicator\n\t\t\t// should be the same as the target element.\n\t\t\tlet width = targetElement.offsetWidth;\n\n\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t// the width of the drop indicator should be the width of\n\t\t\t// the scroll container, minus the distance from the left\n\t\t\t// edge of the scroll container to the left edge of the\n\t\t\t// target element.\n\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\ttargetElement,\n\t\t\t\t'horizontal'\n\t\t\t);\n\n\t\t\tconst ownerDocument = targetElement.ownerDocument;\n\t\t\tconst windowScroll =\n\t\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\t\tscrollContainer === ownerDocument.documentElement;\n\n\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\tconst distanceBetweenContainerAndTarget = isRTL()\n\t\t\t\t\t? scrollContainerRect.right - targetElementRect.right\n\t\t\t\t\t: targetElementRect.left - scrollContainerRect.left;\n\n\t\t\t\tconst scrollContainerWidth = scrollContainer.clientWidth;\n\n\t\t\t\tif (\n\t\t\t\t\tscrollContainerWidth <\n\t\t\t\t\twidth + distanceBetweenContainerAndTarget\n\t\t\t\t) {\n\t\t\t\t\twidth =\n\t\t\t\t\t\tscrollContainerWidth -\n\t\t\t\t\t\tdistanceBetweenContainerAndTarget;\n\t\t\t\t}\n\n\t\t\t\t// LTR logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\t! rtl &&\n\t\t\t\t\ttargetElementRect.left + indent < scrollContainerRect.left\n\t\t\t\t) {\n\t\t\t\t\twidth -= scrollContainerRect.left - targetElementRect.left;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\n\t\t\t\t// RTL logic for ensuring the drop indicator does not extend\n\t\t\t\t// beyond the right edge of the scroll container.\n\t\t\t\tif (\n\t\t\t\t\trtl &&\n\t\t\t\t\ttargetElementRect.right - indent > scrollContainerRect.right\n\t\t\t\t) {\n\t\t\t\t\twidth -=\n\t\t\t\t\t\ttargetElementRect.right - scrollContainerRect.right;\n\t\t\t\t\treturn width;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Subtract the indent from the final width of the indicator.\n\t\t\treturn width - indent;\n\t\t},\n\t\t[ rtl, targetElement ]\n\t);\n\n\tconst style = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\n\t\treturn {\n\t\t\twidth: getDropIndicatorWidth( targetElementRect, 0 ),\n\t\t};\n\t}, [ getDropIndicatorWidth, targetElement ] );\n\n\tconst horizontalScrollOffsetStyle = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn {};\n\t\t}\n\n\t\tconst scrollContainer = getScrollContainer( targetElement );\n\t\tconst ownerDocument = targetElement.ownerDocument;\n\t\tconst windowScroll =\n\t\t\tscrollContainer === ownerDocument.body ||\n\t\t\tscrollContainer === ownerDocument.documentElement;\n\n\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\tconst scrollContainerRect = scrollContainer.getBoundingClientRect();\n\t\t\tconst targetElementRect = targetElement.getBoundingClientRect();\n\n\t\t\tconst distanceBetweenContainerAndTarget = rtl\n\t\t\t\t? scrollContainerRect.right - targetElementRect.right\n\t\t\t\t: targetElementRect.left - scrollContainerRect.left;\n\n\t\t\tif ( ! rtl && scrollContainerRect.left > targetElementRect.left ) {\n\t\t\t\treturn {\n\t\t\t\t\ttransform: `translateX( ${ distanceBetweenContainerAndTarget }px )`,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tif ( rtl && scrollContainerRect.right < targetElementRect.right ) {\n\t\t\t\treturn {\n\t\t\t\t\ttransform: `translateX( ${\n\t\t\t\t\t\tdistanceBetweenContainerAndTarget * -1\n\t\t\t\t\t}px )`,\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\n\t\treturn {};\n\t}, [ rtl, targetElement ] );\n\n\tconst ariaLevel = useMemo( () => {\n\t\tif ( ! rootBlockElement ) {\n\t\t\treturn 1;\n\t\t}\n\n\t\tconst _ariaLevel = parseInt(\n\t\t\trootBlockElement.getAttribute( 'aria-level' ),\n\t\t\t10\n\t\t);\n\n\t\treturn _ariaLevel ? _ariaLevel + 1 : 1;\n\t}, [ rootBlockElement ] );\n\n\tconst hasAdjacentSelectedBranch = useMemo( () => {\n\t\tif ( ! targetElement ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn targetElement.classList.contains( 'is-branch-selected' );\n\t}, [ targetElement ] );\n\n\tconst popoverAnchor = useMemo( () => {\n\t\tconst isValidDropPosition =\n\t\t\tdropPosition === 'top' ||\n\t\t\tdropPosition === 'bottom' ||\n\t\t\tdropPosition === 'inside';\n\t\tif ( ! targetElement || ! isValidDropPosition ) {\n\t\t\treturn undefined;\n\t\t}\n\n\t\treturn {\n\t\t\tcontextElement: targetElement,\n\t\t\tgetBoundingClientRect() {\n\t\t\t\tconst rect = targetElement.getBoundingClientRect();\n\t\t\t\t// In RTL languages, the drop indicator should be positioned\n\t\t\t\t// to the left of the target element, with the width of the\n\t\t\t\t// indicator determining the indent at the right edge of the\n\t\t\t\t// target element. In LTR languages, the drop indicator should\n\t\t\t\t// end at the right edge of the target element, with the indent\n\t\t\t\t// added to the position of the left edge of the target element.\n\t\t\t\t// let left = rtl ? rect.left : rect.left + indent;\n\t\t\t\tlet left = rect.left;\n\t\t\t\tlet top = 0;\n\n\t\t\t\t// In deeply nested lists, where a scrollbar is present,\n\t\t\t\t// the width of the drop indicator should be the width of\n\t\t\t\t// the visible area of the scroll container. Additionally,\n\t\t\t\t// the left edge of the drop indicator line needs to be\n\t\t\t\t// offset by the distance the left edge of the target element\n\t\t\t\t// and the left edge of the scroll container. The ensures\n\t\t\t\t// that the drop indicator position never breaks out of the\n\t\t\t\t// visible area of the scroll container.\n\t\t\t\tconst scrollContainer = getScrollContainer(\n\t\t\t\t\ttargetElement,\n\t\t\t\t\t'horizontal'\n\t\t\t\t);\n\n\t\t\t\tconst doc = targetElement.ownerDocument;\n\t\t\t\tconst windowScroll =\n\t\t\t\t\tscrollContainer === doc.body ||\n\t\t\t\t\tscrollContainer === doc.documentElement;\n\n\t\t\t\t// If the scroll container is not the window, offset the left position, if need be.\n\t\t\t\tif ( scrollContainer && ! windowScroll ) {\n\t\t\t\t\tconst scrollContainerRect =\n\t\t\t\t\t\tscrollContainer.getBoundingClientRect();\n\n\t\t\t\t\t// In RTL languages, a vertical scrollbar is present on the\n\t\t\t\t\t// left edge of the scroll container. The width of the\n\t\t\t\t\t// scrollbar needs to be accounted for when positioning the\n\t\t\t\t\t// drop indicator.\n\t\t\t\t\tconst scrollbarWidth = rtl\n\t\t\t\t\t\t? scrollContainer.offsetWidth -\n\t\t\t\t\t\t  scrollContainer.clientWidth\n\t\t\t\t\t\t: 0;\n\n\t\t\t\t\tif ( left < scrollContainerRect.left + scrollbarWidth ) {\n\t\t\t\t\t\tleft = scrollContainerRect.left + scrollbarWidth;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif ( dropPosition === 'top' ) {\n\t\t\t\t\ttop = rect.top - rect.height * 2;\n\t\t\t\t} else {\n\t\t\t\t\t// `dropPosition` is either `bottom` or `inside`\n\t\t\t\t\ttop = rect.top;\n\t\t\t\t}\n\n\t\t\t\tconst width = getDropIndicatorWidth( rect, 0 );\n\t\t\t\tconst height = rect.height;\n\n\t\t\t\treturn new window.DOMRect( left, top, width, height );\n\t\t\t},\n\t\t};\n\t}, [ targetElement, dropPosition, getDropIndicatorWidth, rtl ] );\n\n\tif ( ! targetElement ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Popover\n\t\t\tanimate={ false }\n\t\t\tanchor={ popoverAnchor }\n\t\t\tfocusOnMount={ false }\n\t\t\tclassName=\"block-editor-list-view-drop-indicator--preview\"\n\t\t\tvariant=\"unstyled\"\n\t\t\tflip={ false }\n\t\t\tresize={ true }\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={ style }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-drop-indicator__line',\n\t\t\t\t\t{\n\t\t\t\t\t\t'block-editor-list-view-drop-indicator__line--darker':\n\t\t\t\t\t\t\thasAdjacentSelectedBranch,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"block-editor-list-view-leaf\"\n\t\t\t\t\taria-level={ ariaLevel }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'block-editor-list-view-block-select-button',\n\t\t\t\t\t\t\t'block-editor-list-view-block-contents'\n\t\t\t\t\t\t) }\n\t\t\t\t\t\tstyle={ horizontalScrollOffsetStyle }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ListViewExpander onClick={ () => {} } />\n\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\ticon={ blockInformation?.icon }\n\t\t\t\t\t\t\tshowColors\n\t\t\t\t\t\t\tcontext=\"list-view\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\tclassName=\"block-editor-list-view-block-select-button__label-wrapper\"\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"block-editor-list-view-block-select-button__title\">\n\t\t\t\t\t\t\t\t<Truncate ellipsizeMode=\"auto\">\n\t\t\t\t\t\t\t\t\t{ blockTitle }\n\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"block-editor-list-view-block__menu-cell\"></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,9 @@
 import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -14,8 +19,9 @@ import { __ } from '@wordpress/i18n';
  */
 import ListViewBranch from './branch';
 import { ListViewContext } from './context';
-import ListViewDropIndicator from './drop-indicator';
+import ListViewDropIndicatorPreview from './drop-indicator';
 import useBlockSelection from './use-block-selection';
+import useListViewBlockIndexes from './use-list-view-block-indexes';
 import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
@@ -85,6 +91,7 @@ function ListViewComponent({
     blocks,
     rootClientId
   });
+  const blockIndexes = useListViewBlockIndexes(clientIdsTree);
   const {
     getBlock
   } = useSelect(blockEditorStore);
@@ -111,7 +118,9 @@ function ListViewComponent({
     ref: dropZoneRef,
     target: blockDropTarget
   } = useListViewDropZone({
-    dropZoneElement
+    dropZoneElement,
+    expandedState,
+    setExpandedState
   });
   const elementRef = useRef();
   const treeGridRef = useMergeRefs([elementRef, dropZoneRef, ref]);
@@ -173,10 +182,43 @@ function ListViewComponent({
       updateBlockSelection(event, startRow?.dataset?.block, endRow?.dataset?.block);
     }
   }, [updateBlockSelection]);
+  const firstDraggedBlockClientId = draggedClientIds?.[0];
+
+  // Convert a blockDropTarget into indexes relative to the blocks in the list view.
+  // These values are used to determine which blocks should be displaced to make room
+  // for the drop indicator. See `ListViewBranch` and `getDragDisplacementValues`.
+  const {
+    blockDropTargetIndex,
+    blockDropPosition,
+    firstDraggedBlockIndex
+  } = useMemo(() => {
+    let _blockDropTargetIndex, _firstDraggedBlockIndex;
+    if (blockDropTarget?.clientId) {
+      const foundBlockIndex = blockIndexes[blockDropTarget.clientId];
+      // If dragging below or inside the block, treat the drop target as the next block.
+      _blockDropTargetIndex = foundBlockIndex === undefined || blockDropTarget?.dropPosition === 'top' ? foundBlockIndex : foundBlockIndex + 1;
+    } else if (blockDropTarget === null) {
+      // A `null` value is used to indicate that the user is dragging outside of the list view.
+      _blockDropTargetIndex = null;
+    }
+    if (firstDraggedBlockClientId) {
+      const foundBlockIndex = blockIndexes[firstDraggedBlockClientId];
+      _firstDraggedBlockIndex = foundBlockIndex === undefined || blockDropTarget?.dropPosition === 'top' ? foundBlockIndex : foundBlockIndex + 1;
+    }
+    return {
+      blockDropTargetIndex: _blockDropTargetIndex,
+      blockDropPosition: blockDropTarget?.dropPosition,
+      firstDraggedBlockIndex: _firstDraggedBlockIndex
+    };
+  }, [blockDropTarget, blockIndexes, firstDraggedBlockClientId]);
   const contextValue = useMemo(() => ({
+    blockDropPosition,
+    blockDropTargetIndex,
+    blockIndexes,
     draggedClientIds,
     expandedState,
     expand,
+    firstDraggedBlockIndex,
     collapse,
     BlockSettingsMenu,
     listViewInstanceId: instanceId,
@@ -185,7 +227,7 @@ function ListViewComponent({
     setInsertedBlock,
     treeGridElementRef: elementRef,
     rootClientId
-  }), [draggedClientIds, expandedState, expand, collapse, BlockSettingsMenu, instanceId, AdditionalBlockContent, insertedBlock, setInsertedBlock, rootClientId]);
+  }), [blockDropPosition, blockDropTargetIndex, blockIndexes, draggedClientIds, expandedState, expand, firstDraggedBlockIndex, collapse, BlockSettingsMenu, instanceId, AdditionalBlockContent, insertedBlock, setInsertedBlock, rootClientId]);
 
   // 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.
@@ -208,21 +250,27 @@ function ListViewComponent({
   const describedById = description && `block-editor-list-view-description-${instanceId}`;
   return createElement(AsyncModeProvider, {
     value: true
-  }, createElement(ListViewDropIndicator, {
+  }, createElement(ListViewDropIndicatorPreview, {
+    draggedBlockClientId: firstDraggedBlockClientId,
     listViewRef: elementRef,
     blockDropTarget: blockDropTarget
   }), description && createElement(VisuallyHidden, {
     id: describedById
   }, description), createElement(TreeGrid, {
     id: id,
-    className: "block-editor-list-view-tree",
+    className: classnames('block-editor-list-view-tree', {
+      'is-dragging': draggedClientIds?.length > 0 && blockDropTargetIndex !== undefined
+    }),
     "aria-label": __('Block navigation structure'),
     ref: treeGridRef,
     onCollapseRow: collapseRow,
     onExpandRow: expandRow,
     onFocusRow: focusRow,
     applicationAriaLabel: __('Block navigation structure'),
-    "aria-describedby": describedById
+    "aria-describedby": describedById,
+    style: {
+      '--wp-admin--list-view-dragged-items-height': draggedClientIds?.length ? `${BLOCK_LIST_ITEM_HEIGHT * (draggedClientIds.length - 1)}px` : null
+    }
   }, createElement(ListViewContext.Provider, {
     value: contextValue
   }, createElement(ListViewBranch, {

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

@@ -1 +1 @@
-{"version":3,"names":["useInstanceId","useMergeRefs","__experimentalUseFixedWindowList","useFixedWindowList","__experimentalTreeGrid","TreeGrid","VisuallyHidden","AsyncModeProvider","useSelect","deprecated","useCallback","useEffect","useMemo","useRef","useReducer","forwardRef","useState","__","ListViewBranch","ListViewContext","ListViewDropIndicator","useBlockSelection","useListViewClientIds","useListViewDropZone","useListViewExpandSelectedItem","store","blockEditorStore","BlockSettingsDropdown","focusListItem","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","since","alternative","instanceId","clientIdsTree","draggedClientIds","selectedClientIds","getBlock","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","insertedBlock","setInsertedBlock","setSelectedTreeId","firstSelectedBlockClientId","selectEditorBlock","event","blockClientId","focusPosition","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","listViewInstanceId","treeGridElementRef","fixedListWindow","useWindowing","windowOverscan","describedById","createElement","value","listViewRef","className","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","Provider","parentId","selectBlock","PrivateListView","props","undefined"],"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tuseInstanceId,\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport {\n\t__experimentalTreeGrid as TreeGrid,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n\tuseState,\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 useBlockSelection from './use-block-selection';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport useListViewExpandSelectedItem from './use-list-view-expand-selected-item';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';\nimport { focusListItem } from './utils';\n\nconst expanded = ( state, action ) => {\n\tif ( Array.isArray( action.clientIds ) ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t...action.clientIds.reduce(\n\t\t\t\t( newState, id ) => ( {\n\t\t\t\t\t...newState,\n\t\t\t\t\t[ id ]: action.type === 'expand',\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t};\n\t}\n\treturn state;\n};\n\nexport const BLOCK_LIST_ITEM_HEIGHT = 36;\n\n/** @typedef {import('react').ComponentType} ComponentType */\n/** @typedef {import('react').Ref<HTMLElement>} Ref */\n\n/**\n * Show a hierarchical list of blocks.\n *\n * @param {Object}         props                        Components props.\n * @param {string}         props.id                     An HTML element id for the root element of ListView.\n * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.\n * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.\n * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.\n * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.\n * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.\n * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.\n * @param {string}         props.description            Optional accessible description for the tree grid component.\n * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.\n * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.\n * @param {Ref}            ref                          Forwarded ref\n */\nfunction ListViewComponent(\n\t{\n\t\tid,\n\t\tblocks,\n\t\tdropZoneElement,\n\t\tshowBlockMovers = false,\n\t\tisExpanded = false,\n\t\tshowAppender = false,\n\t\tblockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,\n\t\trootClientId,\n\t\tdescription,\n\t\tonSelect,\n\t\tadditionalBlockContent: AdditionalBlockContent,\n\t},\n\tref\n) {\n\t// This can be removed once we no longer need to support the blocks prop.\n\tif ( blocks ) {\n\t\tdeprecated(\n\t\t\t'`blocks` property in `wp.blockEditor.__experimentalListView`',\n\t\t\t{\n\t\t\t\tsince: '6.3',\n\t\t\t\talternative: '`rootClientId` property',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst instanceId = useInstanceId( ListViewComponent );\n\tconst { clientIdsTree, draggedClientIds, selectedClientIds } =\n\t\tuseListViewClientIds( { blocks, rootClientId } );\n\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst { visibleBlockCount, shouldShowInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetGlobalBlockCount,\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t} = select( blockEditorStore );\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\tshouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\n\tconst { updateBlockSelection } = useBlockSelection();\n\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {\n\t\tdropZoneElement,\n\t} );\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst [ insertedBlock, setInsertedBlock ] = useState( null );\n\n\tconst { setSelectedTreeId } = useListViewExpandSelectedItem( {\n\t\tfirstSelectedBlockClientId: selectedClientIds[ 0 ],\n\t\tsetExpandedState,\n\t} );\n\tconst selectEditorBlock = useCallback(\n\t\t/**\n\t\t * @param {MouseEvent | KeyboardEvent | undefined} event\n\t\t * @param {string}                                 blockClientId\n\t\t * @param {null | undefined | -1 | 1}              focusPosition\n\t\t */\n\t\t( event, blockClientId, focusPosition ) => {\n\t\t\tupdateBlockSelection( event, blockClientId, null, focusPosition );\n\t\t\tsetSelectedTreeId( blockClientId );\n\t\t\tif ( onSelect ) {\n\t\t\t\tonSelect( getBlock( blockClientId ) );\n\t\t\t}\n\t\t},\n\t\t[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]\n\t);\n\tuseEffect( () => {\n\t\t// If a blocks are already selected when the list view is initially\n\t\t// mounted, shift focus to the first selected block.\n\t\tif ( selectedClientIds?.length ) {\n\t\t\tfocusListItem( selectedClientIds[ 0 ], elementRef );\n\t\t}\n\t\t// Disable reason: Only focus on the selected item when the list view is mounted.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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', clientIds: [ 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', clientIds: [ 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\tconst focusRow = useCallback(\n\t\t( event, startRow, endRow ) => {\n\t\t\tif ( event.shiftKey ) {\n\t\t\t\tupdateBlockSelection(\n\t\t\t\t\tevent,\n\t\t\t\t\tstartRow?.dataset?.block,\n\t\t\t\t\tendRow?.dataset?.block\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ updateBlockSelection ]\n\t);\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tlistViewInstanceId: instanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\ttreeGridElementRef: elementRef,\n\t\t\trootClientId,\n\t\t} ),\n\t\t[\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tinstanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\trootClientId,\n\t\t]\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\tBLOCK_LIST_ITEM_HEIGHT,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\t// Ensure that the windowing logic is recalculated when the expanded state changes.\n\t\t\t// This is necessary because expanding a collapsed block in a short list view can\n\t\t\t// switch the list view to a tall list view with a scrollbar, and vice versa.\n\t\t\t// When this happens, the windowing logic needs to be recalculated to ensure that\n\t\t\t// the correct number of blocks are rendered, by rechecking for a scroll container.\n\t\t\texpandedState,\n\t\t\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\t// If there are no blocks to show and we're not showing the appender, do not render the list view.\n\tif ( ! clientIdsTree.length && ! showAppender ) {\n\t\treturn null;\n\t}\n\n\tconst describedById =\n\t\tdescription && `block-editor-list-view-description-${ instanceId }`;\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{ description && (\n\t\t\t\t<VisuallyHidden id={ describedById }>\n\t\t\t\t\t{ description }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t\t<TreeGrid\n\t\t\t\tid={ id }\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\tonFocusRow={ focusRow }\n\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t\taria-describedby={ describedById }\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\tparentId={ rootClientId }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\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\tisExpanded={ isExpanded }\n\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\tshowAppender={ showAppender }\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}\n\n// This is the private API for the ListView component.\n// It allows access to all props, not just the public ones.\nexport const PrivateListView = forwardRef( ListViewComponent );\n\n// This is the public API for the ListView component.\n// We wrap the PrivateListView component to hide some props from the public API.\nexport default forwardRef( ( props, ref ) => {\n\treturn (\n\t\t<PrivateListView\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tshowAppender={ false }\n\t\t\trootClientId={ null }\n\t\t\tonSelect={ null }\n\t\t\tadditionalBlockContent={ null }\n\t\t\tblockSettingsMenu={ undefined }\n\t\t/>\n\t);\n} );\n"],"mappings":"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"}
+{"version":3,"names":["classnames","useInstanceId","useMergeRefs","__experimentalUseFixedWindowList","useFixedWindowList","__experimentalTreeGrid","TreeGrid","VisuallyHidden","AsyncModeProvider","useSelect","deprecated","useCallback","useEffect","useMemo","useRef","useReducer","forwardRef","useState","__","ListViewBranch","ListViewContext","ListViewDropIndicatorPreview","useBlockSelection","useListViewBlockIndexes","useListViewClientIds","useListViewDropZone","useListViewExpandSelectedItem","store","blockEditorStore","BlockSettingsDropdown","focusListItem","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","since","alternative","instanceId","clientIdsTree","draggedClientIds","selectedClientIds","blockIndexes","getBlock","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","expandedState","setExpandedState","dropZoneRef","target","blockDropTarget","elementRef","treeGridRef","insertedBlock","setInsertedBlock","setSelectedTreeId","firstSelectedBlockClientId","selectEditorBlock","event","blockClientId","focusPosition","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","firstDraggedBlockClientId","blockDropTargetIndex","blockDropPosition","firstDraggedBlockIndex","_blockDropTargetIndex","_firstDraggedBlockIndex","foundBlockIndex","undefined","dropPosition","contextValue","listViewInstanceId","treeGridElementRef","fixedListWindow","useWindowing","windowOverscan","describedById","createElement","value","draggedBlockClientId","listViewRef","className","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","style","Provider","parentId","selectBlock","PrivateListView","props"],"sources":["@wordpress/block-editor/src/components/list-view/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseInstanceId,\n\tuseMergeRefs,\n\t__experimentalUseFixedWindowList as useFixedWindowList,\n} from '@wordpress/compose';\nimport {\n\t__experimentalTreeGrid as TreeGrid,\n\tVisuallyHidden,\n} from '@wordpress/components';\nimport { AsyncModeProvider, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseReducer,\n\tforwardRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ListViewBranch from './branch';\nimport { ListViewContext } from './context';\nimport ListViewDropIndicatorPreview from './drop-indicator';\nimport useBlockSelection from './use-block-selection';\nimport useListViewBlockIndexes from './use-list-view-block-indexes';\nimport useListViewClientIds from './use-list-view-client-ids';\nimport useListViewDropZone from './use-list-view-drop-zone';\nimport useListViewExpandSelectedItem from './use-list-view-expand-selected-item';\nimport { store as blockEditorStore } from '../../store';\nimport { BlockSettingsDropdown } from '../block-settings-menu/block-settings-dropdown';\nimport { focusListItem } from './utils';\n\nconst expanded = ( state, action ) => {\n\tif ( Array.isArray( action.clientIds ) ) {\n\t\treturn {\n\t\t\t...state,\n\t\t\t...action.clientIds.reduce(\n\t\t\t\t( newState, id ) => ( {\n\t\t\t\t\t...newState,\n\t\t\t\t\t[ id ]: action.type === 'expand',\n\t\t\t\t} ),\n\t\t\t\t{}\n\t\t\t),\n\t\t};\n\t}\n\treturn state;\n};\n\nexport const BLOCK_LIST_ITEM_HEIGHT = 36;\n\n/** @typedef {import('react').ComponentType} ComponentType */\n/** @typedef {import('react').Ref<HTMLElement>} Ref */\n\n/**\n * Show a hierarchical list of blocks.\n *\n * @param {Object}         props                        Components props.\n * @param {string}         props.id                     An HTML element id for the root element of ListView.\n * @param {Array}          props.blocks                 _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.\n * @param {?HTMLElement}   props.dropZoneElement        Optional element to be used as the drop zone.\n * @param {?boolean}       props.showBlockMovers        Flag to enable block movers. Defaults to `false`.\n * @param {?boolean}       props.isExpanded             Flag to determine whether nested levels are expanded by default. Defaults to `false`.\n * @param {?boolean}       props.showAppender           Flag to show or hide the block appender. Defaults to `false`.\n * @param {?ComponentType} props.blockSettingsMenu      Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.\n * @param {string}         props.rootClientId           The client id of the root block from which we determine the blocks to show in the list.\n * @param {string}         props.description            Optional accessible description for the tree grid component.\n * @param {?Function}      props.onSelect               Optional callback to be invoked when a block is selected. Receives the block object that was selected.\n * @param {?ComponentType} props.additionalBlockContent Component that renders additional block content UI.\n * @param {Ref}            ref                          Forwarded ref\n */\nfunction ListViewComponent(\n\t{\n\t\tid,\n\t\tblocks,\n\t\tdropZoneElement,\n\t\tshowBlockMovers = false,\n\t\tisExpanded = false,\n\t\tshowAppender = false,\n\t\tblockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,\n\t\trootClientId,\n\t\tdescription,\n\t\tonSelect,\n\t\tadditionalBlockContent: AdditionalBlockContent,\n\t},\n\tref\n) {\n\t// This can be removed once we no longer need to support the blocks prop.\n\tif ( blocks ) {\n\t\tdeprecated(\n\t\t\t'`blocks` property in `wp.blockEditor.__experimentalListView`',\n\t\t\t{\n\t\t\t\tsince: '6.3',\n\t\t\t\talternative: '`rootClientId` property',\n\t\t\t}\n\t\t);\n\t}\n\n\tconst instanceId = useInstanceId( ListViewComponent );\n\tconst { clientIdsTree, draggedClientIds, selectedClientIds } =\n\t\tuseListViewClientIds( { blocks, rootClientId } );\n\tconst blockIndexes = useListViewBlockIndexes( clientIdsTree );\n\n\tconst { getBlock } = useSelect( blockEditorStore );\n\tconst { visibleBlockCount, shouldShowInnerBlocks } = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetGlobalBlockCount,\n\t\t\t\tgetClientIdsOfDescendants,\n\t\t\t\t__unstableGetEditorMode,\n\t\t\t} = select( blockEditorStore );\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\tshouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',\n\t\t\t};\n\t\t},\n\t\t[ draggedClientIds ]\n\t);\n\n\tconst { updateBlockSelection } = useBlockSelection();\n\n\tconst [ expandedState, setExpandedState ] = useReducer( expanded, {} );\n\n\tconst { ref: dropZoneRef, target: blockDropTarget } = useListViewDropZone( {\n\t\tdropZoneElement,\n\t\texpandedState,\n\t\tsetExpandedState,\n\t} );\n\tconst elementRef = useRef();\n\tconst treeGridRef = useMergeRefs( [ elementRef, dropZoneRef, ref ] );\n\n\tconst [ insertedBlock, setInsertedBlock ] = useState( null );\n\n\tconst { setSelectedTreeId } = useListViewExpandSelectedItem( {\n\t\tfirstSelectedBlockClientId: selectedClientIds[ 0 ],\n\t\tsetExpandedState,\n\t} );\n\tconst selectEditorBlock = useCallback(\n\t\t/**\n\t\t * @param {MouseEvent | KeyboardEvent | undefined} event\n\t\t * @param {string}                                 blockClientId\n\t\t * @param {null | undefined | -1 | 1}              focusPosition\n\t\t */\n\t\t( event, blockClientId, focusPosition ) => {\n\t\t\tupdateBlockSelection( event, blockClientId, null, focusPosition );\n\t\t\tsetSelectedTreeId( blockClientId );\n\t\t\tif ( onSelect ) {\n\t\t\t\tonSelect( getBlock( blockClientId ) );\n\t\t\t}\n\t\t},\n\t\t[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]\n\t);\n\tuseEffect( () => {\n\t\t// If a blocks are already selected when the list view is initially\n\t\t// mounted, shift focus to the first selected block.\n\t\tif ( selectedClientIds?.length ) {\n\t\t\tfocusListItem( selectedClientIds[ 0 ], elementRef );\n\t\t}\n\t\t// Disable reason: Only focus on the selected item when the list view is mounted.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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', clientIds: [ 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', clientIds: [ 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\tconst focusRow = useCallback(\n\t\t( event, startRow, endRow ) => {\n\t\t\tif ( event.shiftKey ) {\n\t\t\t\tupdateBlockSelection(\n\t\t\t\t\tevent,\n\t\t\t\t\tstartRow?.dataset?.block,\n\t\t\t\t\tendRow?.dataset?.block\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ updateBlockSelection ]\n\t);\n\n\tconst firstDraggedBlockClientId = draggedClientIds?.[ 0 ];\n\n\t// Convert a blockDropTarget into indexes relative to the blocks in the list view.\n\t// These values are used to determine which blocks should be displaced to make room\n\t// for the drop indicator. See `ListViewBranch` and `getDragDisplacementValues`.\n\tconst { blockDropTargetIndex, blockDropPosition, firstDraggedBlockIndex } =\n\t\tuseMemo( () => {\n\t\t\tlet _blockDropTargetIndex, _firstDraggedBlockIndex;\n\n\t\t\tif ( blockDropTarget?.clientId ) {\n\t\t\t\tconst foundBlockIndex =\n\t\t\t\t\tblockIndexes[ blockDropTarget.clientId ];\n\t\t\t\t// If dragging below or inside the block, treat the drop target as the next block.\n\t\t\t\t_blockDropTargetIndex =\n\t\t\t\t\tfoundBlockIndex === undefined ||\n\t\t\t\t\tblockDropTarget?.dropPosition === 'top'\n\t\t\t\t\t\t? foundBlockIndex\n\t\t\t\t\t\t: foundBlockIndex + 1;\n\t\t\t} else if ( blockDropTarget === null ) {\n\t\t\t\t// A `null` value is used to indicate that the user is dragging outside of the list view.\n\t\t\t\t_blockDropTargetIndex = null;\n\t\t\t}\n\n\t\t\tif ( firstDraggedBlockClientId ) {\n\t\t\t\tconst foundBlockIndex =\n\t\t\t\t\tblockIndexes[ firstDraggedBlockClientId ];\n\t\t\t\t_firstDraggedBlockIndex =\n\t\t\t\t\tfoundBlockIndex === undefined ||\n\t\t\t\t\tblockDropTarget?.dropPosition === 'top'\n\t\t\t\t\t\t? foundBlockIndex\n\t\t\t\t\t\t: foundBlockIndex + 1;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\tblockDropTargetIndex: _blockDropTargetIndex,\n\t\t\t\tblockDropPosition: blockDropTarget?.dropPosition,\n\t\t\t\tfirstDraggedBlockIndex: _firstDraggedBlockIndex,\n\t\t\t};\n\t\t}, [ blockDropTarget, blockIndexes, firstDraggedBlockClientId ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tblockDropPosition,\n\t\t\tblockDropTargetIndex,\n\t\t\tblockIndexes,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tfirstDraggedBlockIndex,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tlistViewInstanceId: instanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\ttreeGridElementRef: elementRef,\n\t\t\trootClientId,\n\t\t} ),\n\t\t[\n\t\t\tblockDropPosition,\n\t\t\tblockDropTargetIndex,\n\t\t\tblockIndexes,\n\t\t\tdraggedClientIds,\n\t\t\texpandedState,\n\t\t\texpand,\n\t\t\tfirstDraggedBlockIndex,\n\t\t\tcollapse,\n\t\t\tBlockSettingsMenu,\n\t\t\tinstanceId,\n\t\t\tAdditionalBlockContent,\n\t\t\tinsertedBlock,\n\t\t\tsetInsertedBlock,\n\t\t\trootClientId,\n\t\t]\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\tBLOCK_LIST_ITEM_HEIGHT,\n\t\tvisibleBlockCount,\n\t\t{\n\t\t\t// Ensure that the windowing logic is recalculated when the expanded state changes.\n\t\t\t// This is necessary because expanding a collapsed block in a short list view can\n\t\t\t// switch the list view to a tall list view with a scrollbar, and vice versa.\n\t\t\t// When this happens, the windowing logic needs to be recalculated to ensure that\n\t\t\t// the correct number of blocks are rendered, by rechecking for a scroll container.\n\t\t\texpandedState,\n\t\t\tuseWindowing: true,\n\t\t\twindowOverscan: 40,\n\t\t}\n\t);\n\n\t// If there are no blocks to show and we're not showing the appender, do not render the list view.\n\tif ( ! clientIdsTree.length && ! showAppender ) {\n\t\treturn null;\n\t}\n\n\tconst describedById =\n\t\tdescription && `block-editor-list-view-description-${ instanceId }`;\n\n\treturn (\n\t\t<AsyncModeProvider value={ true }>\n\t\t\t<ListViewDropIndicatorPreview\n\t\t\t\tdraggedBlockClientId={ firstDraggedBlockClientId }\n\t\t\t\tlistViewRef={ elementRef }\n\t\t\t\tblockDropTarget={ blockDropTarget }\n\t\t\t/>\n\t\t\t{ description && (\n\t\t\t\t<VisuallyHidden id={ describedById }>\n\t\t\t\t\t{ description }\n\t\t\t\t</VisuallyHidden>\n\t\t\t) }\n\t\t\t<TreeGrid\n\t\t\t\tid={ id }\n\t\t\t\tclassName={ classnames( 'block-editor-list-view-tree', {\n\t\t\t\t\t'is-dragging':\n\t\t\t\t\t\tdraggedClientIds?.length > 0 &&\n\t\t\t\t\t\tblockDropTargetIndex !== undefined,\n\t\t\t\t} ) }\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\tonFocusRow={ focusRow }\n\t\t\t\tapplicationAriaLabel={ __( 'Block navigation structure' ) }\n\t\t\t\taria-describedby={ describedById }\n\t\t\t\tstyle={ {\n\t\t\t\t\t'--wp-admin--list-view-dragged-items-height':\n\t\t\t\t\t\tdraggedClientIds?.length\n\t\t\t\t\t\t\t? `${\n\t\t\t\t\t\t\t\t\tBLOCK_LIST_ITEM_HEIGHT *\n\t\t\t\t\t\t\t\t\t( draggedClientIds.length - 1 )\n\t\t\t\t\t\t\t  }px`\n\t\t\t\t\t\t\t: null,\n\t\t\t\t} }\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\tparentId={ rootClientId }\n\t\t\t\t\t\tselectBlock={ selectEditorBlock }\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\tisExpanded={ isExpanded }\n\t\t\t\t\t\tshouldShowInnerBlocks={ shouldShowInnerBlocks }\n\t\t\t\t\t\tshowAppender={ showAppender }\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}\n\n// This is the private API for the ListView component.\n// It allows access to all props, not just the public ones.\nexport const PrivateListView = forwardRef( ListViewComponent );\n\n// This is the public API for the ListView component.\n// We wrap the PrivateListView component to hide some props from the public API.\nexport default forwardRef( ( props, ref ) => {\n\treturn (\n\t\t<PrivateListView\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tshowAppender={ false }\n\t\t\trootClientId={ null }\n\t\t\tonSelect={ null }\n\t\t\tadditionalBlockContent={ null }\n\t\t\tblockSettingsMenu={ undefined }\n\t\t/>\n\t);\n} );\n"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ import { forwardRef } from '@wordpress/element';
 import useMovingAnimation from '../use-moving-animation';
 const AnimatedTreeGridRow = animated(TreeGridRow);
 const ListViewLeaf = forwardRef(({
+  isDragged,
   isSelected,
   position,
   level,
@@ -28,8 +29,7 @@ const ListViewLeaf = forwardRef(({
   ...props
 }, ref) => {
   const animationRef = useMovingAnimation({
-    isSelected,
-    adjustScrolling: false,
+    clientId: props['data-block'],
     enableAnimation: true,
     triggerAnimationOnChange: path
   });

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

@@ -1 +1 @@
-{"version":3,"names":["animated","classnames","__experimentalTreeGridRow","TreeGridRow","useMergeRefs","forwardRef","useMovingAnimation","AnimatedTreeGridRow","ListViewLeaf","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","adjustScrolling","enableAnimation","triggerAnimationOnChange","mergedRef","createElement","positionInSet","setSize","isExpanded","undefined"],"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"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';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nconst ListViewLeaf = forwardRef(\n\t(\n\t\t{\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tlevel,\n\t\t\trowCount,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tpath,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst animationRef = useMovingAnimation( {\n\t\t\tisSelected,\n\t\t\tadjustScrolling: false,\n\t\t\tenableAnimation: true,\n\t\t\ttriggerAnimationOnChange: path,\n\t\t} );\n\n\t\tconst mergedRef = useMergeRefs( [ ref, animationRef ] );\n\n\t\treturn (\n\t\t\t<AnimatedTreeGridRow\n\t\t\t\tref={ mergedRef }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-leaf',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tlevel={ level }\n\t\t\t\tpositionInSet={ position }\n\t\t\t\tsetSize={ rowCount }\n\t\t\t\tisExpanded={ undefined }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</AnimatedTreeGridRow>\n\t\t);\n\t}\n);\n\nexport default ListViewLeaf;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,WAAW,QAAQ,uBAAuB;AAChF,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,yBAAyB;AAExD,MAAMC,mBAAmB,GAAGP,QAAQ,CAAEG,WAAY,CAAC;AAEnD,MAAMK,YAAY,GAAGH,UAAU,CAC9B,CACC;EACCI,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJ,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAMC,YAAY,GAAGZ,kBAAkB,CAAE;IACxCG,UAAU;IACVU,eAAe,EAAE,KAAK;IACtBC,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEN;EAC3B,CAAE,CAAC;EAEH,MAAMO,SAAS,GAAGlB,YAAY,CAAE,CAAEa,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACCK,aAAA,CAAChB,mBAAmB;IACnBU,GAAG,EAAGK,SAAW;IACjBR,SAAS,EAAGb,UAAU,CACrB,6BAA6B,EAC7Ba,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfa,aAAa,EAAGd,QAAU;IAC1Be,OAAO,EAAGb,QAAU;IACpBc,UAAU,EAAGC,SAAW;IAAA,GACnBX;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAED,eAAeL,YAAY"}
+{"version":3,"names":["animated","classnames","__experimentalTreeGridRow","TreeGridRow","useMergeRefs","forwardRef","useMovingAnimation","AnimatedTreeGridRow","ListViewLeaf","isDragged","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","clientId","enableAnimation","triggerAnimationOnChange","mergedRef","createElement","positionInSet","setSize","isExpanded","undefined"],"sources":["@wordpress/block-editor/src/components/list-view/leaf.js"],"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';\nimport { useMergeRefs } from '@wordpress/compose';\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMovingAnimation from '../use-moving-animation';\n\nconst AnimatedTreeGridRow = animated( TreeGridRow );\n\nconst ListViewLeaf = forwardRef(\n\t(\n\t\t{\n\t\t\tisDragged,\n\t\t\tisSelected,\n\t\t\tposition,\n\t\t\tlevel,\n\t\t\trowCount,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tpath,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tconst animationRef = useMovingAnimation( {\n\t\t\tclientId: props[ 'data-block' ],\n\t\t\tenableAnimation: true,\n\t\t\ttriggerAnimationOnChange: path,\n\t\t} );\n\n\t\tconst mergedRef = useMergeRefs( [ ref, animationRef ] );\n\n\t\treturn (\n\t\t\t<AnimatedTreeGridRow\n\t\t\t\tref={ mergedRef }\n\t\t\t\tclassName={ classnames(\n\t\t\t\t\t'block-editor-list-view-leaf',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\tlevel={ level }\n\t\t\t\tpositionInSet={ position }\n\t\t\t\tsetSize={ rowCount }\n\t\t\t\tisExpanded={ undefined }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</AnimatedTreeGridRow>\n\t\t);\n\t}\n);\n\nexport default ListViewLeaf;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,QAAQ,QAAQ,mBAAmB;AAC5C,OAAOC,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,yBAAyB,IAAIC,WAAW,QAAQ,uBAAuB;AAChF,SAASC,YAAY,QAAQ,oBAAoB;AACjD,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,kBAAkB,MAAM,yBAAyB;AAExD,MAAMC,mBAAmB,GAAGP,QAAQ,CAAEG,WAAY,CAAC;AAEnD,MAAMK,YAAY,GAAGH,UAAU,CAC9B,CACC;EACCI,SAAS;EACTC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJ,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAMC,YAAY,GAAGb,kBAAkB,CAAE;IACxCc,QAAQ,EAAEH,KAAK,CAAE,YAAY,CAAE;IAC/BI,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEN;EAC3B,CAAE,CAAC;EAEH,MAAMO,SAAS,GAAGnB,YAAY,CAAE,CAAEc,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACCK,aAAA,CAACjB,mBAAmB;IACnBW,GAAG,EAAGK,SAAW;IACjBR,SAAS,EAAGd,UAAU,CACrB,6BAA6B,EAC7Bc,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfa,aAAa,EAAGd,QAAU;IAC1Be,OAAO,EAAGb,QAAU;IACpBc,UAAU,EAAGC,SAAW;IAAA,GACnBX;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAED,eAAeN,YAAY"}

package/build-module/components/list-view/use-list-view-block-indexes.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+export default function useListViewBlockIndexes(blocks) {
+  const blockIndexes = useMemo(() => {
+    const indexes = {};
+    let currentGlobalIndex = 0;
+    const traverseBlocks = blockList => {
+      blockList.forEach(block => {
+        indexes[block.clientId] = currentGlobalIndex;
+        currentGlobalIndex++;
+        if (block.innerBlocks.length > 0) {
+          traverseBlocks(block.innerBlocks);
+        }
+      });
+    };
+    traverseBlocks(blocks);
+    return indexes;
+  }, [blocks]);
+  return blockIndexes;
+}
+//# sourceMappingURL=use-list-view-block-indexes.js.map

package/build-module/components/list-view/use-list-view-block-indexes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useListViewBlockIndexes","blocks","blockIndexes","indexes","currentGlobalIndex","traverseBlocks","blockList","forEach","block","clientId","innerBlocks","length"],"sources":["@wordpress/block-editor/src/components/list-view/use-list-view-block-indexes.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nexport default function useListViewBlockIndexes( blocks ) {\n\tconst blockIndexes = useMemo( () => {\n\t\tconst indexes = {};\n\n\t\tlet currentGlobalIndex = 0;\n\n\t\tconst traverseBlocks = ( blockList ) => {\n\t\t\tblockList.forEach( ( block ) => {\n\t\t\t\tindexes[ block.clientId ] = currentGlobalIndex;\n\t\t\t\tcurrentGlobalIndex++;\n\n\t\t\t\tif ( block.innerBlocks.length > 0 ) {\n\t\t\t\t\ttraverseBlocks( block.innerBlocks );\n\t\t\t\t}\n\t\t\t} );\n\t\t};\n\n\t\ttraverseBlocks( blocks );\n\n\t\treturn indexes;\n\t}, [ blocks ] );\n\n\treturn blockIndexes;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,QAAQ,oBAAoB;AAE5C,eAAe,SAASC,uBAAuBA,CAAEC,MAAM,EAAG;EACzD,MAAMC,YAAY,GAAGH,OAAO,CAAE,MAAM;IACnC,MAAMI,OAAO,GAAG,CAAC,CAAC;IAElB,IAAIC,kBAAkB,GAAG,CAAC;IAE1B,MAAMC,cAAc,GAAKC,SAAS,IAAM;MACvCA,SAAS,CAACC,OAAO,CAAIC,KAAK,IAAM;QAC/BL,OAAO,CAAEK,KAAK,CAACC,QAAQ,CAAE,GAAGL,kBAAkB;QAC9CA,kBAAkB,EAAE;QAEpB,IAAKI,KAAK,CAACE,WAAW,CAACC,MAAM,GAAG,CAAC,EAAG;UACnCN,cAAc,CAAEG,KAAK,CAACE,WAAY,CAAC;QACpC;MACD,CAAE,CAAC;IACJ,CAAC;IAEDL,cAAc,CAAEJ,MAAO,CAAC;IAExB,OAAOE,OAAO;EACf,CAAC,EAAE,CAAEF,MAAM,CAAG,CAAC;EAEf,OAAOC,YAAY;AACpB"}