diff --git a/packages/block-editor/src/components/off-canvas-editor/block-contents.js b/packages/block-editor/src/components/off-canvas-editor/block-contents.js index 77922df8441ea0..3d4bd0d3c00dbe 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block-contents.js +++ b/packages/block-editor/src/components/off-canvas-editor/block-contents.js @@ -19,6 +19,7 @@ import { store as blockEditorStore } from '../../store'; import { updateAttributes } from './update-attributes'; import { LinkUI } from './link-ui'; import { useInsertedBlock } from './use-inserted-block'; +import { useListViewContext } from './context'; const BLOCKS_WITH_LINK_UI_SUPPORT = [ 'core/navigation-link', @@ -43,6 +44,7 @@ const ListViewBlockContents = forwardRef( ) => { const { clientId } = block; const [ isLinkUIOpen, setIsLinkUIOpen ] = useState(); + const { enableDragAndDrop } = useListViewContext(); const { blockMovingClientId, selectedBlockInBlockEditor, @@ -124,26 +126,44 @@ const ListViewBlockContents = forwardRef( onCancel={ () => setIsLinkUIOpen( false ) } /> ) } - - { ( { draggable, onDragStart, onDragEnd } ) => ( - - ) } - + { enableDragAndDrop && ( + + { ( { draggable, onDragStart, onDragEnd } ) => ( + + ) } + + ) } + { ! enableDragAndDrop && ( + + ) } ); } diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index aa47b9d8bebea6..c3f7406ed0df00 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -307,39 +307,40 @@ function ListViewBlock( { ) } - { showBlockActions && ( - <> - - { ( { ref, tabIndex, onFocus } ) => ( - <> - - - ) } - - - ) } + { showBlockActions || + ( MoreMenuComponent === false && ( + <> + + { ( { ref, tabIndex, onFocus } ) => ( + <> + + + ) } + + + ) ) } ); } diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index b0f18c56176967..708559c5f710ad 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -54,17 +54,18 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; /** * Show a hierarchical list of blocks. * - * @param {Object} props Components props. - * @param {string} props.id An HTML element id for the root element of ListView. - * @param {string} props.parentClientId The client id of the parent block. - * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. - * @param {boolean} props.showBlockMovers Flag to enable block movers - * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. - * @param {Object} props.LeafMoreMenu Optional more menu substitution. - * @param {string} props.description Optional accessible description for the tree grid component. - * @param {string} props.onSelect Optional callback to be invoked when a block is selected. - * @param {string} props.showAppender Flag to show or hide the block appender. - * @param {Object} ref Forwarded ref + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @param {string} props.parentClientId The client id of the parent block. + * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. + * @param {boolean} props.showBlockMovers Flag to enable block movers + * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. + * @param {Object} props.LeafMoreMenu Optional more menu substitution. + * @param {boolean} props.enableDragAndDrop Flag to enable drag and drop. + * @param {string} props.description Optional accessible description for the tree grid component. + * @param {string} props.onSelect Optional callback to be invoked when a block is selected. + * @param {string} props.showAppender Flag to show or hide the block appender. + * @param {Object} ref Forwarded ref */ function OffCanvasEditor( { @@ -75,6 +76,7 @@ function OffCanvasEditor( isExpanded = false, showAppender = true, LeafMoreMenu, + enableDragAndDrop = true, description = __( 'Block navigation structure' ), onSelect, }, @@ -200,6 +202,7 @@ function OffCanvasEditor( expand, collapse, LeafMoreMenu, + enableDragAndDrop, } ), [ isMounted.current, diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 04c11aa57f5a1f..57034632c626cf 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -15,6 +15,6 @@ } .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button { - cursor: grab; + cursor: pointer; padding: $grid-unit-10; } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js index ccc0b92a211ba2..9291afe7012179 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js @@ -20,10 +20,32 @@ import { NavigationMenuLoader } from './loader'; export default function NavigationMenuContent( { rootClientId, onSelect } ) { const { clientIdsTree, isLoading } = useSelect( ( select ) => { - const { __unstableGetClientIdsTree, areInnerBlocksControlled } = - select( blockEditorStore ); + const { + __unstableGetClientIdsTree, + areInnerBlocksControlled, + getBlocksByClientId, + } = select( blockEditorStore ); + + const filterLinksOnly = ( tree ) => { + if ( tree.innerBlocks && tree.innerBlocks.length > 0 ) { + tree.innerBlocks = filterLinksOnly( tree.innerBlocks ); + } + tree = tree.filter( ( item ) => { + const block = getBlocksByClientId( item.clientId )[ 0 ]; + return ( + block.name === 'core/navigation-link' || + block.name === 'core/navigation-submenu' || + block.name === 'core/page-list' || + block.name === 'core/page-list-item' + ); + } ); + return tree; + }; + const _clientIdsTree = filterLinksOnly( + __unstableGetClientIdsTree( rootClientId ) + ); return { - clientIdsTree: __unstableGetClientIdsTree( rootClientId ), + clientIdsTree: _clientIdsTree, // This is a small hack to wait for the navigation block // to actually load its inner blocks. @@ -35,7 +57,7 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) { const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } = useDispatch( blockEditorStore ); - const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis ); + const { OffCanvasEditor } = unlock( blockEditorPrivateApis ); const offCanvasOnselect = useCallback( ( block ) => { @@ -64,8 +86,9 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) { ) }