npm - @wordpress/block-editor - Versions diffs - 12.16.1-next.79a6196f.0 → 12.18.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (376) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"names":["_components","require","_dom","_element","_i18n","ListViewDropIndicator","listViewRef","blockDropTarget","rootClientId","clientId","dropPosition","rootBlockElement","blockElement","useMemo","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","isRTL","getDropIndicatorIndent","useCallback","targetElementRect","rootBlockIconElement","rootBlockIconRect","getBoundingClientRect","right","left","getDropIndicatorWidth","indent","width","offsetWidth","scrollContainer","getScrollContainer","ownerDocument","windowScroll","body","documentElement","scrollContainerRect","distanceBetweenContainerAndTarget","scrollContainerWidth","clientWidth","style","popoverAnchor","isValidDropPosition","contextElement","rect","top","bottom","doc","scrollbarWidth","height","window","DOMRect","_react","createElement","Popover","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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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_dom","_element","_i18n","_blockIcon","_useBlockDisplayInformation","_useBlockDisplayTitle","_expander","ListViewDropIndicatorPreview","draggedBlockClientId","listViewRef","blockDropTarget","blockInformation","useBlockDisplayInformation","blockTitle","useBlockDisplayTitle","clientId","context","rootClientId","dropPosition","rootBlockElement","blockElement","useMemo","current","_rootBlockElement","querySelector","undefined","_blockElement","targetElement","rtl","isRTL","getDropIndicatorWidth","useCallback","targetElementRect","indent","width","offsetWidth","scrollContainer","getScrollContainer","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","_react","createElement","Popover","animate","anchor","focusOnMount","className","variant","flip","resize","classnames","default","onClick","icon","showColors","__experimentalHStack","alignment","justify","spacing","__experimentalTruncate","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/components/list-view/index.js CHANGED Viewed

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.PrivateListView = exports.BLOCK_LIST_ITEM_HEIGHT = void 0;
 var _react = require("react");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
@@ -16,12 +17,17 @@ var _branch = _interopRequireDefault(require("./branch"));
 var _context = require("./context");
 var _dropIndicator = _interopRequireDefault(require("./drop-indicator"));
 var _useBlockSelection = _interopRequireDefault(require("./use-block-selection"));
+var _useListViewBlockIndexes = _interopRequireDefault(require("./use-list-view-block-indexes"));
 var _useListViewClientIds = _interopRequireDefault(require("./use-list-view-client-ids"));
 var _useListViewDropZone = _interopRequireDefault(require("./use-list-view-drop-zone"));
 var _useListViewExpandSelectedItem = _interopRequireDefault(require("./use-list-view-expand-selected-item"));
 var _store = require("../../store");
 var _blockSettingsDropdown = require("../block-settings-menu/block-settings-dropdown");
 var _utils = require("./utils");
+/**
+ * External dependencies
+ */
 /**
  * WordPress dependencies
  */
@@ -94,6 +100,7 @@ function ListViewComponent({
     blocks,
     rootClientId
   });
+  const blockIndexes = (0, _useListViewBlockIndexes.default)(clientIdsTree);
   const {
     getBlock
   } = (0, _data.useSelect)(_store.store);
@@ -120,7 +127,9 @@ function ListViewComponent({
     ref: dropZoneRef,
     target: blockDropTarget
   } = (0, _useListViewDropZone.default)({
-    dropZoneElement
+    dropZoneElement,
+    expandedState,
+    setExpandedState
   });
   const elementRef = (0, _element.useRef)();
   const treeGridRef = (0, _compose.useMergeRefs)([elementRef, dropZoneRef, ref]);
@@ -182,10 +191,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
+  } = (0, _element.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 = (0, _element.useMemo)(() => ({
+    blockDropPosition,
+    blockDropTargetIndex,
+    blockIndexes,
     draggedClientIds,
     expandedState,
     expand,
+    firstDraggedBlockIndex,
     collapse,
     BlockSettingsMenu,
     listViewInstanceId: instanceId,
@@ -194,7 +236,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.
@@ -218,20 +260,26 @@ function ListViewComponent({
   return (0, _react.createElement)(_data.AsyncModeProvider, {
     value: true
   }, (0, _react.createElement)(_dropIndicator.default, {
+    draggedBlockClientId: firstDraggedBlockClientId,
     listViewRef: elementRef,
     blockDropTarget: blockDropTarget
   }), description && (0, _react.createElement)(_components.VisuallyHidden, {
     id: describedById
   }, description), (0, _react.createElement)(_components.__experimentalTreeGrid, {
     id: id,
-    className: "block-editor-list-view-tree",
+    className: (0, _classnames.default)('block-editor-list-view-tree', {
+      'is-dragging': draggedClientIds?.length > 0 && blockDropTargetIndex !== undefined
+    }),
     "aria-label": (0, _i18n.__)('Block navigation structure'),
     ref: treeGridRef,
     onCollapseRow: collapseRow,
     onExpandRow: expandRow,
     onFocusRow: focusRow,
     applicationAriaLabel: (0, _i18n.__)('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
+    }
   }, (0, _react.createElement)(_context.ListViewContext.Provider, {
     value: contextValue
   }, (0, _react.createElement)(_branch.default, {

package/build/components/list-view/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_compose","require","_components","_data","_deprecated","_interopRequireDefault","_element","_i18n","_branch","_context","_dropIndicator","_useBlockSelection","_useListViewClientIds","_useListViewDropZone","_useListViewExpandSelectedItem","_store","_blockSettingsDropdown","_utils","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","exports","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","deprecated","since","alternative","instanceId","useInstanceId","clientIdsTree","draggedClientIds","selectedClientIds","useListViewClientIds","getBlock","useSelect","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","useBlockSelection","expandedState","setExpandedState","useReducer","dropZoneRef","target","blockDropTarget","useListViewDropZone","elementRef","useRef","treeGridRef","useMergeRefs","insertedBlock","setInsertedBlock","useState","setSelectedTreeId","useListViewExpandSelectedItem","firstSelectedBlockClientId","selectEditorBlock","useCallback","event","blockClientId","focusPosition","useEffect","focusListItem","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","contextValue","useMemo","listViewInstanceId","treeGridElementRef","fixedListWindow","useFixedWindowList","useWindowing","windowOverscan","describedById","_react","createElement","AsyncModeProvider","value","default","listViewRef","VisuallyHidden","__experimentalTreeGrid","className","__","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","ListViewContext","Provider","parentId","selectBlock","PrivateListView","forwardRef","_default","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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"}
1	+ {"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_components","_data","_deprecated","_element","_i18n","_branch","_context","_dropIndicator","_useBlockSelection","_useListViewBlockIndexes","_useListViewClientIds","_useListViewDropZone","_useListViewExpandSelectedItem","_store","_blockSettingsDropdown","_utils","expanded","state","action","Array","isArray","clientIds","reduce","newState","id","type","BLOCK_LIST_ITEM_HEIGHT","exports","ListViewComponent","blocks","dropZoneElement","showBlockMovers","isExpanded","showAppender","blockSettingsMenu","BlockSettingsMenu","BlockSettingsDropdown","rootClientId","description","onSelect","additionalBlockContent","AdditionalBlockContent","ref","deprecated","since","alternative","instanceId","useInstanceId","clientIdsTree","draggedClientIds","selectedClientIds","useListViewClientIds","blockIndexes","useListViewBlockIndexes","getBlock","useSelect","blockEditorStore","visibleBlockCount","shouldShowInnerBlocks","select","getGlobalBlockCount","getClientIdsOfDescendants","__unstableGetEditorMode","draggedBlockCount","length","updateBlockSelection","useBlockSelection","expandedState","setExpandedState","useReducer","dropZoneRef","target","blockDropTarget","useListViewDropZone","elementRef","useRef","treeGridRef","useMergeRefs","insertedBlock","setInsertedBlock","useState","setSelectedTreeId","useListViewExpandSelectedItem","firstSelectedBlockClientId","selectEditorBlock","useCallback","event","blockClientId","focusPosition","useEffect","focusListItem","expand","clientId","collapse","expandRow","row","dataset","block","collapseRow","focusRow","startRow","endRow","shiftKey","firstDraggedBlockClientId","blockDropTargetIndex","blockDropPosition","firstDraggedBlockIndex","useMemo","_blockDropTargetIndex","_firstDraggedBlockIndex","foundBlockIndex","undefined","dropPosition","contextValue","listViewInstanceId","treeGridElementRef","fixedListWindow","useFixedWindowList","useWindowing","windowOverscan","describedById","_react","createElement","AsyncModeProvider","value","default","draggedBlockClientId","listViewRef","VisuallyHidden","__experimentalTreeGrid","className","classnames","__","onCollapseRow","onExpandRow","onFocusRow","applicationAriaLabel","style","ListViewContext","Provider","parentId","selectBlock","PrivateListView","forwardRef","_default","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/components/list-view/leaf.js CHANGED Viewed

@@ -26,6 +26,7 @@ var _useMovingAnimation = _interopRequireDefault(require("../use-moving-animatio
 const AnimatedTreeGridRow = (0, _web.animated)(_components.__experimentalTreeGridRow);
 const ListViewLeaf = (0, _element.forwardRef)(({
+  isDragged,
   isSelected,
   position,
   level,
@@ -36,8 +37,7 @@ const ListViewLeaf = (0, _element.forwardRef)(({
   ...props
 }, ref) => {
   const animationRef = (0, _useMovingAnimation.default)({
-    isSelected,
-    adjustScrolling: false,
+    clientId: props['data-block'],
     enableAnimation: true,
     triggerAnimationOnChange: path
   });

package/build/components/list-view/leaf.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_web","require","_classnames","_interopRequireDefault","_components","_compose","_element","_useMovingAnimation","AnimatedTreeGridRow","animated","TreeGridRow","ListViewLeaf","forwardRef","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","useMovingAnimation","~~adjustScrolling~~","enableAnimation","triggerAnimationOnChange","mergedRef","useMergeRefs","_react","createElement","classnames","positionInSet","setSize","isExpanded","undefined","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAKA,IAAAM,mBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMO,mBAAmB,GAAG,IAAAC,aAAQ,EAAEC,qCAAY,CAAC;AAEnD,MAAMC,YAAY,GAAG,IAAAC,mBAAU,EAC9B,CACC;EACCC,UAAU;EACVC,QAAQ;EACRC,KAAK;EACLC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC,IAAI;EACJ,GAAGC;AACJ,CAAC,EACDC,GAAG,KACC;EACJ,MAAMC,YAAY,GAAG,IAAAC,2BAAkB,EAAE;~~IACxCV~~,~~UAAU;IACVW~~,~~eAAe~~,~~EAAE~~,~~KAAK~~;~~IACtBC~~,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEP;EAC3B,CAAE,CAAC;EAEH,MAAMQ,SAAS,GAAG,IAAAC,qBAAY,EAAE,CAAEP,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACC,IAAAO,MAAA,CAAAC,aAAA,~~EAACtB~~,mBAAmB;~~IACnBa~~,GAAG,EAAGM,SAAW;IACjBT,SAAS,EAAG,IAAAa,mBAAU,EACrB,6BAA6B,EAC7Bb,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfiB,aAAa,EAAGlB,QAAU;IAC1BmB,OAAO,EAAGjB,QAAU;IACpBkB,UAAU,EAAGC,SAAW;IAAA,GACnBf;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAAC,IAAAmB,QAAA,~~GAEazB~~,YAAY;~~AAAA0B~~,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
1	+ {"version":3,"names":["_web","require","_classnames","_interopRequireDefault","_components","_compose","_element","_useMovingAnimation","AnimatedTreeGridRow","animated","TreeGridRow","ListViewLeaf","forwardRef","isDragged","isSelected","position","level","rowCount","children","className","path","props","ref","animationRef","useMovingAnimation","clientId","enableAnimation","triggerAnimationOnChange","mergedRef","useMergeRefs","_react","createElement","classnames","positionInSet","setSize","isExpanded","undefined","_default","exports","default"],"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":";;;;;;;;AAGA,IAAAA,IAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAKA,IAAAM,mBAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAKA;AACA;AACA;;AAGA,MAAMO,mBAAmB,GAAG,IAAAC,aAAQ,EAAEC,qCAAY,CAAC;AAEnD,MAAMC,YAAY,GAAG,IAAAC,mBAAU,EAC9B,CACC;EACCC,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,GAAG,IAAAC,2BAAkB,EAAE;IACxCC,QAAQ,EAAEJ,KAAK,CAAE,YAAY,CAAE;IAC/BK,eAAe,EAAE,IAAI;IACrBC,wBAAwB,EAAEP;EAC3B,CAAE,CAAC;EAEH,MAAMQ,SAAS,GAAG,IAAAC,qBAAY,EAAE,CAAEP,GAAG,EAAEC,YAAY,CAAG,CAAC;EAEvD,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACvB,mBAAmB;IACnBc,GAAG,EAAGM,SAAW;IACjBT,SAAS,EAAG,IAAAa,mBAAU,EACrB,6BAA6B,EAC7Bb,SACD,CAAG;IACHH,KAAK,EAAGA,KAAO;IACfiB,aAAa,EAAGlB,QAAU;IAC1BmB,OAAO,EAAGjB,QAAU;IACpBkB,UAAU,EAAGC,SAAW;IAAA,GACnBf;EAAK,GAERH,QACkB,CAAC;AAExB,CACD,CAAC;AAAC,IAAAmB,QAAA,GAEa1B,YAAY;AAAA2B,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useListViewBlockIndexes;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+function useListViewBlockIndexes(blocks) {
+  const blockIndexes = (0, _element.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/components/list-view/use-list-view-block-indexes.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["_element","require","useListViewBlockIndexes","blocks","blockIndexes","useMemo","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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGe,SAASC,uBAAuBA,CAAEC,MAAM,EAAG;EACzD,MAAMC,YAAY,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACnC,MAAMC,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,CAAEL,MAAO,CAAC;IAExB,OAAOG,OAAO;EACf,CAAC,EAAE,CAAEH,MAAM,CAAG,CAAC;EAEf,OAAOC,YAAY;AACpB"}

package/build/components/list-view/use-list-view-drop-zone.js CHANGED Viewed

@@ -244,6 +244,7 @@ function getListViewDropTarget(blocksData, position, rtl = false) {
     const newBlockIndex = candidateBlockData.isExpanded ? 0 : candidateBlockData.innerBlockCount || 0;
     return {
       rootClientId: candidateBlockData.clientId,
+      clientId: candidateBlockData.clientId,
       blockIndex: newBlockIndex,
       dropPosition: 'inside'
     };
@@ -303,16 +304,30 @@ function getListViewDropTarget(blocksData, position, rtl = false) {
   };
 }
+// Throttle options need to be defined outside of the hook to avoid
+// re-creating the object on every render. This is due to a limitation
+// of the `useThrottle` hook, where the options object is included
+// in the dependency array for memoization.
+const EXPAND_THROTTLE_OPTIONS = {
+  leading: false,
+  // Don't call the function immediately on the first call.
+  trailing: true // Do call the function on the last call.
+};
 /**
  * A react hook for implementing a drop zone in list view.
  *
- * @param {Object}       props                   Named parameters.
- * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {Object}       props                    Named parameters.
+ * @param {?HTMLElement} [props.dropZoneElement]  Optional element to be used as the drop zone.
+ * @param {Object}       [props.expandedState]    The expanded state of the blocks in the list view.
+ * @param {Function}     [props.setExpandedState] Function to set the expanded state of a list of block clientIds.
  *
  * @return {WPListViewDropZoneTarget} The drop target.
  */
 function useListViewDropZone({
-  dropZoneElement
+  dropZoneElement,
+  expandedState,
+  setExpandedState
 }) {
   const {
     getBlockRootClientId,
@@ -328,6 +343,36 @@ function useListViewDropZone({
   } = target || {};
   const onBlockDrop = (0, _useOnBlockDrop.default)(targetRootClientId, targetBlockIndex);
   const rtl = (0, _i18n.isRTL)();
+  const previousRootClientId = (0, _compose.usePrevious)(targetRootClientId);
+  const maybeExpandBlock = (0, _element.useCallback)((_expandedState, _target) => {
+    // If the user is attempting to drop a block inside a collapsed block,
+    // that is, using a nesting gesture flagged by 'inside' dropPosition,
+    // expand the block within the list view, if it isn't already.
+    const {
+      rootClientId
+    } = _target || {};
+    if (!rootClientId) {
+      return;
+    }
+    if (_target?.dropPosition === 'inside' && !_expandedState[rootClientId]) {
+      setExpandedState({
+        type: 'expand',
+        clientIds: [rootClientId]
+      });
+    }
+  }, [setExpandedState]);
+  // Throttle the maybeExpandBlock function to avoid expanding the block
+  // too quickly when the user is dragging over the block. This is to
+  // avoid expanding the block when the user is just passing over it.
+  const throttledMaybeExpandBlock = (0, _compose.useThrottle)(maybeExpandBlock, 500, EXPAND_THROTTLE_OPTIONS);
+  (0, _element.useEffect)(() => {
+    if (target?.dropPosition !== 'inside' || previousRootClientId !== target?.rootClientId) {
+      throttledMaybeExpandBlock.cancel();
+      return;
+    }
+    throttledMaybeExpandBlock(expandedState, target);
+  }, [expandedState, previousRootClientId, target, throttledMaybeExpandBlock]);
   const draggedBlockClientIds = getDraggedBlockClientIds();
   const throttled = (0, _compose.useThrottle)((0, _element.useCallback)((event, currentTarget) => {
     const position = {
@@ -361,7 +406,7 @@ function useListViewDropZone({
     if (newTarget) {
       setTarget(newTarget);
     }
-  }, [canInsertBlocks, draggedBlockClientIds, getBlockCount, getBlockIndex, getBlockRootClientId, rtl]), 200);
+  }, [canInsertBlocks, draggedBlockClientIds, getBlockCount, getBlockIndex, getBlockRootClientId, rtl]), 50);
   const ref = (0, _compose.__experimentalUseDropZone)({
     dropZoneElement,
     onDrop(event) {
@@ -371,6 +416,9 @@ function useListViewDropZone({
     },
     onDragLeave() {
       throttled.cancel();
+      // Use `null` value to indicate that the drop target is not valid,
+      // but that the drag is still active. This allows for styling rules
+      // that are active only when a user drags outside of the list view.
       setTarget(null);
     },
     onDragOver(event) {
@@ -381,7 +429,10 @@ function useListViewDropZone({
     },
     onDragEnd() {
       throttled.cancel();
-      setTarget(null);
+      // Use `undefined` value to indicate that the drag has concluded.
+      // This allows styling rules that are active only when a user is
+      // dragging to be removed.
+      setTarget(undefined);
     }
   });
   return {