List view: add drag cursor to draggable list items (#57493)

* Add drag cursor to draggable list items

* Use more specific classes

* Remove :hover and show pointer on the expander

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

@@ -63,7 +63,7 @@ function ListViewBlock( {
 	const [ isHovered, setIsHovered ] = useState( false );
 	const [ settingsAnchorRect, setSettingsAnchorRect ] = useState();
 
-	const { isLocked, canEdit } = useBlockLock( clientId );
+	const { isLocked, canEdit, canMove } = useBlockLock( clientId );
 
 	const isFirstSelectedBlock =
 		isSelected && selectedClientIds[ 0 ] === clientId;
@@ -269,6 +269,7 @@ function ListViewBlock( {
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
 		'is-synced': blockInformation?.isSynced,
+		'is-draggable': canMove,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block

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

@@ -15,6 +15,11 @@
 	// Use position relative for row animation.
 	position: relative;
 
+	&.is-draggable,
+	&.is-draggable .block-editor-list-view-block-contents {
+		cursor: grab;
+	}
+
 	.block-editor-list-view-block-select-button {
 		// When a row is expanded, retain the dark color.
 		&[aria-expanded="true"] {
@@ -378,6 +383,7 @@
 	height: $icon-size;
 	margin-left: $grid-unit-05;
 	width: $icon-size;
+	cursor: pointer;
 }
 
 // First level of indentation is aria-level 2, max indent is 8.