diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js index a90bf116e1d08..d756f28e43127 100644 --- a/packages/block-editor/src/components/list-view/block.js +++ b/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 diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 7afa7a1c98431..42423328d19e4 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/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.