List View: Try a WYSIWYG drag chip (make it feel like you are really dragging the item)

packages/block-editor/src/components/list-view/block-contents.js

@@ -16,6 +16,7 @@ import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 import { useListViewContext } from './context';
+import useDragChip from './use-drag-chip';
 
 const ListViewBlockContents = forwardRef(
  (
@@ -47,8 +48,21 @@ const ListViewBlockContents = forwardRef(
  []
  );
 
- const { AdditionalBlockContent, insertedBlock, setInsertedBlock } =
- useListViewContext();
+ const {
+ AdditionalBlockContent,
+ blockDropTarget,
+ insertedBlock,
+ listViewInstanceId,
+ setInsertedBlock,
+ treeGridElementRef,
+ } = useListViewContext();
+
+ const { dragChipOnDragStart, dragChipOnDragEnd } = useDragChip( {
+ blockDropTarget,
+ cloneClassname: 'block-editor-list-view-draggable-chip',
+ listViewRef: treeGridElementRef,
+ elementId: `list-view-${ listViewInstanceId }-block-${ clientId }`,
+ } );
 
  const isBlockMoveTarget =
  blockMovingClientId && selectedBlockInBlockEditor === clientId;
@@ -77,7 +91,9 @@ const ListViewBlockContents = forwardRef(
  <BlockDraggable
  appendToOwnerDocument
  clientIds={ draggableClientIds }
- cloneClassname={ 'block-editor-list-view-draggable-chip' }
+ cloneClassname={
+ 'block-editor-list-view-default-draggable-chip'
+ }
  >
  { ( { draggable, onDragStart, onDragEnd } ) => (
  <ListViewBlockSelectButton
@@ -91,8 +107,14 @@ const ListViewBlockContents = forwardRef(
  siblingBlockCount={ siblingBlockCount }
  level={ level }
  draggable={ draggable }
- onDragStart={ onDragStart }
- onDragEnd={ onDragEnd }
+ onDragStart={ ( event ) => {
+ onDragStart( event );
+ dragChipOnDragStart( event );
+ } }
+ onDragEnd={ ( event ) => {
+ onDragEnd( event );
+ dragChipOnDragEnd( event );
+ } }
  isExpanded={ isExpanded }
  { ...props }
  />

packages/block-editor/src/components/list-view/drop-indicator.js

@@ -6,35 +6,16 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
- __experimentalHStack as HStack,
- __experimentalTruncate as Truncate,
- Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 import { getScrollContainer } from '@wordpress/dom';
 import { useCallback, useMemo } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 
-/**
- * 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, dropPosition } = blockDropTarget || {};
 
  const [ rootBlockElement, blockElement ] = useMemo( () => {
@@ -153,56 +134,6 @@ export default function ListViewDropIndicatorPreview( {
  };
  }, [ 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;
@@ -309,40 +240,7 @@ export default function ListViewDropIndicatorPreview( {
  hasAdjacentSelectedBranch,
  }
  ) }
- >
- <div
- className="block-editor-list-view-leaf"
- aria-level={ ariaLevel }
- >
- <div
- className={ classnames(
- 'block-editor-list-view-block-select-button',
- 'block-editor-list-view-block-contents'
- ) }
- style={ horizontalScrollOffsetStyle }
- >
- <ListViewExpander onClick={ () => {} } />
- <BlockIcon
- icon={ blockInformation?.icon }
- showColors
- context="list-view"
- />
- <HStack
- alignment="center"
- className="block-editor-list-view-block-select-button__label-wrapper"
- justify="flex-start"
- spacing={ 1 }
- >
- <span className="block-editor-list-view-block-select-button__title">
- <Truncate ellipsizeMode="auto">
- { blockTitle }
- </Truncate>
- </span>
- </HStack>
- </div>
- <div className="block-editor-list-view-block__menu-cell"></div>
- </div>
- </div>
+ ></div>
  </Popover>
  );
 }

packages/block-editor/src/components/list-view/index.js

@@ -275,6 +275,7 @@ function ListViewComponent(
  const contextValue = useMemo(
  () => ( {
  blockDropPosition,
+ blockDropTarget,
  blockDropTargetIndex,
  blockIndexes,
  draggedClientIds,
@@ -292,6 +293,7 @@ function ListViewComponent(
  } ),
  [
  blockDropPosition,
+ blockDropTarget,
  blockDropTargetIndex,
  blockIndexes,
  draggedClientIds,

packages/block-editor/src/components/list-view/leaf.js

@@ -37,6 +37,9 @@ const ListViewLeaf = forwardRef(
  clientId: props[ 'data-block' ],
  enableAnimation: true,
  triggerAnimationOnChange: path,
+ elementSelector: isDragged
+ ? '.block-editor-list-view-draggable-chip .block-editor-list-view-leaf'
+ : undefined,
  } );
 
  const mergedRef = useMergeRefs( [ ref, animationRef ] );

packages/block-editor/src/components/list-view/style.scss

@@ -437,8 +437,65 @@
 // Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
 $block-navigation-max-indent: 8;
 
+.block-editor-list-view-default-draggable-chip {
+ // Hide the default draggable chip
+ display: none;
+}
+
 .block-editor-list-view-draggable-chip {
- opacity: 0.8;
+ .block-editor-list-view-leaf {
+ background-color: $white;
+ border-radius: $radius-block-ui;
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ display: flex;
+ height: 36px;
+ // Where possible, restrict the width of the cloned row to the width of the list view.
+ max-width: 338px;
+ opacity: 1;
+
+ // Reset colors to use the admin color.
+ td {
+ background: none !important;
+ .block-editor-list-view-block-select-button,
+ .block-editor-block-icon,
+ .components-button.has-icon {
+ color: var(--wp-admin-theme-color) !important;
+ }
+ }
+
+ .block-editor-list-view__expander {
+ // Remove indent on the expander, as the dragged component offsets the entire row.
+ margin-left: 0 !important;
+ }
+
+ // Apply a margin offset to account for nesting level.
+ &[aria-level] {
+ margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
+ }
+
+ // When updating the margin for each indentation level, the corresponding
+ // indentation in `use-list-view-drop-zone.js` must be updated as well
+ // to ensure the drop zone is aligned with the indentation.
+ @for $i from 0 to $block-navigation-max-indent {
+ &[aria-level="#{ $i + 1 }"] {
+ @if $i - 1 >= 0 {
+ margin-left: ( $icon-size * $i ) + 4 * ($i - 1) !important;
+ }
+ @else {
+ margin-left: ( $icon-size * $i ) !important;
+ }
+ }
+ }
+
+ .block-editor-list-view-block__contents-cell {
+ flex: 1;
+ }
+
+ .block-editor-list-view-block__menu-cell {
+ display: flex;
+ align-items: center;
+ }
+ }
 }
 
 .block-editor-list-view-block__contents-cell,