diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index 60c08abaf9089..a1b5de9ff9e28 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + /** * WordPress dependencies */ @@ -59,6 +64,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {Object} props Components props. * @param {string} props.id An HTML element id for the root element of ListView. * @param {Array} props.blocks _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy. + * @param {?string} props.className Optional class name to add to the TreeGrid element. * @param {?boolean} props.showBlockMovers Flag to enable block movers. Defaults to `false`. * @param {?boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. Defaults to `false`. * @param {?boolean} props.showAppender Flag to show or hide the block appender. Defaults to `false`. @@ -73,6 +79,7 @@ function ListViewComponent( { id, blocks, + className, showBlockMovers = false, isExpanded = false, showAppender = false, @@ -237,7 +244,10 @@ function ListViewComponent( /> { + ( event, currentTarget, action ) => { + if ( action === 'clear' ) { + setTarget( null ); + return; + } + const position = { x: event.clientX, y: event.clientY }; const isBlockDrag = !! draggedBlockClientIds?.length; @@ -433,6 +438,9 @@ export default function useListViewDropZone() { const ref = useDropZone( { onDrop: onBlockDrop, + onDragLeave( event ) { + throttled( event, event.currentTarget, 'clear' ); + }, onDragOver( event ) { // `currentTarget` is only available while the event is being // handled, so get it now and pass it to the thottled function. diff --git a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js index 67cb2ad11c4cb..8dbd5b0161078 100644 --- a/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js +++ b/packages/edit-post/src/components/secondary-sidebar/list-view-sidebar.js @@ -152,7 +152,7 @@ export default function ListViewSidebar() { > { tab === 'list-view' && (
- +
) } { tab === 'outline' && } diff --git a/packages/edit-post/src/components/secondary-sidebar/style.scss b/packages/edit-post/src/components/secondary-sidebar/style.scss index 63a3746e1b844..a9fe9198065a8 100644 --- a/packages/edit-post/src/components/secondary-sidebar/style.scss +++ b/packages/edit-post/src/components/secondary-sidebar/style.scss @@ -83,6 +83,18 @@ padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); } +.edit-post-editor__list-view-panel-content { + padding: 0; +} + +.edit-post-editor__list-view-panel-content__list-view { + padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width); + // Override the border collapse set by the TreeGrid table. + // This is so that the panel's height and padding can take effect. + border-collapse: separate; + border-spacing: 0; +} + .edit-post-editor__list-view-empty-headings { & > svg { margin-top: $grid-unit-30 + $grid-unit-05;